Merge branch 'ietf-tools:main' into main

.circleci/config.yml

@@ -17,23 +17,28 @@ workflows:
                 target: aws-app # build this stage
                 tag: app # no tag no docker image
                 path: docker
+            - buildkit/build: # call the build command multiple times to build multiple images
+                target: app-test # build this stage
+                tag: app-test # no tag no docker image
+                path: docker
           after-builds:
-              #            - run:
-              #                  name: run backend tests
-              #                  command: |-
-              #                      set -eu
-              #
-              #                      DATABASE_PASSWORD="$( head -c 24 /dev/urandom | xxd -p | tr -d '\n ')"
-              #                      docker run --name=database \
-              #                          -ePOSTGRES_DB=app_test \
-              #                          -ePOSTGRES_PASSWORD=$DATABASE_PASSWORD \
-              #                          -d postgres:11-alpine
-              #                      docker run \
-              #                          -i --name app-test --rm \
-              #                          --link=database --link=cache --link=search \
-              #                          -eDATABASE_URL="postgres://postgres:$DATABASE_PASSWORD@database/app_test" \
-              #                          -eENVIRONMENT=test \
-              #                          app-test
+            - run:
+                name: run backend tests
+                command: |-
+                    set -eu
+
+                    docker run --name=database \
+                        -ePOSTGRES_DB=app \
+                        -ePOSTGRES_PASSWORD=password \
+                        -d postgres:11-alpine
+                    docker run \
+                        -i --rm --name=app-test \
+                        -u root \
+                        --link=database \
+                        -eDATABASE_URL="postgres://postgres:password@database/app" \
+                        -eAPP_SECRET_KEY=xxxx \
+                        -eENVIRONMENT=test \
+                        app-test
             - run:
                 name: tag, push and deploy images
                 command: |-

docker/Dockerfile

@@ -1,7 +1,7 @@
 # Frontend assets get compiled first
-# current-alpine is Node 16 (latest). This will become active LTS later this year.
+# gallium-alpine is Node 16. This is the active LTS.
 # see https://nodejs.org/en/about/releases/
-FROM node:current-alpine as frontend
+FROM node:gallium-alpine as frontend
 
 ENV NODE_PATH=/node_modules
 ENV PATH="${PATH}:/node_modules/.bin"
@@ -86,13 +86,29 @@ CMD ["/usr/local/bin/gunicorn", "--config", "/app/docker/gunicorn.py", "ietf.wsg
 # development stage
 FROM base as app-dev
 ENV DJANGO_SETTINGS_MODULE ietf.settings.docker.dev
+COPY docker/init-dev.sh /app/docker/
 
 ADD https://raw.githubusercontent.com/mrako/wait-for/d9699cb9fe8a4622f05c4ee32adf2fd93239d005/wait-for /usr/local/bin/
 USER root
 RUN chmod +rx /usr/local/bin/wait-for
 USER www
 
 # wait-for script waits until the database is ready and reachable
-# and then it runs the actual process
+# and then it runs the migrations and actual process
 ENTRYPOINT ["wait-for", "database:5432", "--"]
-CMD ["/usr/local/bin/gunicorn", "--config", "/app/docker/gunicorn.py", "--reload", "ietf.wsgi" ]
+CMD ["/app/docker/init-dev.sh"]
+
+# test stage
+FROM base as app-test
+ENV DJANGO_SETTINGS_MODULE ietf.settings.docker.dev
+COPY docker/init-test.sh /app/docker/
+
+ADD https://raw.githubusercontent.com/mrako/wait-for/d9699cb9fe8a4622f05c4ee32adf2fd93239d005/wait-for /usr/local/bin/
+USER root
+RUN chmod +rx /usr/local/bin/wait-for
+USER www
+
+# wait-for script waits until the database is ready and reachable
+# and then it runs the migrations and tests
+ENTRYPOINT ["wait-for", "database:5432", "--"]
+CMD ["/app/docker/init-test.sh"]

docker/init-dev.sh

@@ -0,0 +1,5 @@
+#!/bin/sh -e
+
+python /app/manage.py migrate --no-input
+python /app/manage.py createcachetable
+/usr/local/bin/gunicorn --config /app/docker/gunicorn.py --reload ietf.wsgi

docker/init-test.sh

@@ -0,0 +1,6 @@
+#!/bin/sh -e
+
+python /app/manage.py migrate --no-input
+python /app/manage.py createcachetable
+python /app/manage.py collectstatic
+python /app/manage.py test

ietf/bibliography/templates/bibliography/bibliography.html

@@ -10,7 +10,7 @@ <h3 class="h5">
                                 <span class="bibliography__order">[{{ item.ordering }}]</span>{{ item.title }}
                         </a>
                     </h3>
-                    <div class="pl-3">
+                    <div class="ps-3">
                     {% if item.long_title %}
                         <h4 class="h6">{{ item.long_title }}</h4>
                     {% endif %}

ietf/blog/templates/blog/blog_index_page.html

@@ -19,7 +19,7 @@ <h1>{{self.title}}</h1>
 
   <div class="container">
     <div class="row">
-      <div class="col-12 col-lg-3 order-lg-last bg-white border-left border-right border-bottom pt-4 ">
+      <div class="col-12 col-lg-3 order-lg-last bg-white border-start border-end border-bottom pt-4 ">
       <h2 class="h6">Filter Blog & News by Topic</h2>
         <ul class="list-unstyled">
           <li class="text-uppercase"><a href="{% routablepageurl self 'all_entries' %}">All</a></li>
@@ -33,7 +33,7 @@ <h2 class="h6">Filter Blog & News by Topic</h2>
         <table class="mb-4">
           {% for entry in entries %}
           <tr>
-            <td class="text-nowrap align-top pr-3 pb-2 pb-lg-0">{{entry.coalesced_published_date|date:"Y-m-d"}}</td>
+            <td class="text-nowrap align-top pe-3 pb-2 pb-lg-0">{{entry.coalesced_published_date|date:"Y-m-d"}}</td>
             <td class="align-top pb-2 pb-lg-0"><a href="{{entry.url}}">{{entry.title}}</a></td>
           </tr>
           {% endfor %}

ietf/blog/templates/blog/blog_page.html

@@ -10,7 +10,7 @@
 <div class="bg-white">
     <div id="content">
         <div class="container">
-            <div class="row align-items-stretch no-gutters">
+            <div class="row align-items-stretch g-0">
                 <aside class="col-12 col-lg-4 d-flex flex-column bg-light d-lg-none" aria-label="Blog listing">
                     <div class="d-none d-lg-block">
                         {% include "includes/blog_sidebar.html" with siblings=siblings current=self %}
@@ -24,8 +24,8 @@
                         <button
                             class="btn btn-outline-primary w-100 mb-4 d-lg-none collapsed"
                             type="button"
-                            data-toggle="collapse"
-                            data-target="#blog_sidebar"
+                            data-bs-toggle="collapse"
+                            data-bs-target="#blog_sidebar"
                             aria-expanded="false"
                             aria-controls="collapseExample"
                         >
@@ -51,17 +51,17 @@ <h1>{{ self.title }}</h1>
                     </div>
                     <hr>
                     <div class="px-3 px-xl-5 mt-5 mb-5">
-                        {% include "includes/social_share.html" only %}
+                        {% include "includes/social_share.html" with page=self settings=settings only %}
                     </div>
-                    <nav aria-label="blog" class="row no-gutters d-none d-lg-flex">
-                        <div class="col-6 bg-primary p-4 pl-5 d-flex align-items-center">
+                    <nav aria-label="blog" class="row g-0 d-none d-lg-flex">
+                        <div class="col-6 bg-primary p-4 ps-5 d-flex align-items-center">
                             <a class="text-white" href="{{ self.previous.url }}">
                                 <p class="sub">
                                     <div class="h6 text-uppercase">Previous</div>{{ self.previous.title }}
                                 </p>
                             </a>
                         </div>
-                        <div class="col-6 bg-secondary p-4 pr-5 d-flex align-items-center">
+                        <div class="col-6 bg-secondary p-4 pe-5 d-flex align-items-center">
                             <a class="text-white" href="{{ self.next.url }}">
                                 <p class="sub">
                                     <div class="h6 text-uppercase">Next</div>{{ self.next.title }}
@@ -76,7 +76,7 @@ <h1>{{ self.title }}</h1>
             </div>
         </div>
     </div>
-    <nav aria-label="blog" class="row no-gutters d-lg-none">
+    <nav aria-label="blog" class="row g-0 d-lg-none">
         <div class="col-12 bg-primary p-4">
             <a class="text-white" href="{{ self.previous.url }}">
                 <p>

ietf/blog/templates/includes/blog_authors.html

@@ -3,15 +3,15 @@
         <li class="mb-3">
             <span class="d-inline-block">{{ author.author.name }}</span>
             {% if author.role %}
-                <span class="ml-3 pl-3 d-inline-block border-left">{{ author.role.name }}</span>
+                <span class="ms-3 ps-3 d-inline-block border-start">{{ author.role.name }}</span>
             {% endif %}
         </li>
     {% endfor %}
     {% if post.author_group.name %}
         <li class="mb-3">
             <span class="d-inline-block">{{ post.author_group.name }}</span>
             {% if post.author_group.role %}
-                <span class="ml-3 pl-3 d-inline-block border-left">{{ post.author_group.role.name }}</span>
+                <span class="ms-3 ps-3 d-inline-block border-start">{{ post.author_group.role.name }}</span>
             {% endif %}
         </li>
     {% endif %}

ietf/blog/templates/includes/blog_filters.html

@@ -2,8 +2,8 @@
 <button
     class="btn btn-outline-primary d-md-none w-100 mb-3"
     type="button"
-    data-toggle="collapse"
-    data-target="#filters-mobile"
+    data-bs-toggle="collapse"
+    data-bs-target="#filters-mobile"
     aria-expanded="false"
     aria-controls="collapseExample"
 >
@@ -13,7 +13,7 @@
 <form method="GET" action="{{ parent_url }}" id="filters-mobile" class="form-row mx-0 mb-3 d-md-none collapse">
     <h2 class="h6">Filter by topic and date</h2>
     <div class="col-12 form-group p-0 flex-shrink-1">
-        <label for="topic-input">Topic</label>
+        <label class="form-label" for="topic-input">Topic</label>
         <select aria-label="Topic" class="form-control bg-light" name="topic" id="topic-input">
             <option value="">All</option>
             {% for topic in topics %}
@@ -27,8 +27,8 @@ <h2 class="h6">Filter by topic and date</h2>
         </select>
     </div>
 
-    <div class="col-6 form-group flex-shrink-1 p-0 pr-1">
-        <label for="date_from-input" id="date_from-label">Date from</label>
+    <div class="col-6 form-group flex-shrink-1 p-0 pe-1">
+        <label class="form-label" for="date_from-input" id="date_from-label">Date from</label>
         <div class="input-group">
             <input
                 class="form-control"
@@ -43,8 +43,8 @@ <h2 class="h6">Filter by topic and date</h2>
         </div>
     </div>
     <div class="col-6 form-group flex-shrink-1 p-0">
-        <label for="date_to-input" id="date_to-label">Date to</label>
-        <div class="input-group mr-md-">
+        <label class="form-label" for="date_to-input" id="date_to-label">Date to</label>
+        <div class="input-group me-md-">
             <input
                 class="form-control"
                 placeholder="dd/mm/yyyy"
@@ -63,7 +63,7 @@ <h2 class="h6">Filter by topic and date</h2>
 <h2 class="h6 d-none d-md-block">Filter by topic and date</h2>
 <form method="GET" action="{{ parent_url }}" class="form-row mx-0 mb-3 flex-md-nowrap d-none d-md-flex">
     <div class="col-auto form-group p-0 flex-shrink-1">
-        <label for="topic-desktop-input">Topic</label>
+        <label class="form-label" for="topic-desktop-input">Topic</label>
         <select aria-label="Topic" class="form-control bg-light" name="topic" id="topic-desktop-input">
             <option value="">All</option>
             {% for topic in topics %}
@@ -78,7 +78,7 @@ <h2 class="h6 d-none d-md-block">Filter by topic and date</h2>
     </div>
 
     <div class="col-auto form-group flex-shrink-1 p-0 px-1">
-        <label for="date_from-desktop-input" id="date_from-desktop-label">Date from</label>
+        <label class="form-label" for="date_from-desktop-input" id="date_from-desktop-label">Date from</label>
         <div class="input-group">
             <input
                 class="form-control"
@@ -93,9 +93,9 @@ <h2 class="h6 d-none d-md-block">Filter by topic and date</h2>
         </div>
     </div>
     <div class="col-auto form-group flex-shrink-1 p-0">
-        <label for="date_to-desktop-input" id="date_to-desktop-label">Date to</label>
+        <label class="form-label" for="date_to-desktop-input" id="date_to-desktop-label">Date to</label>
         <div class="d-flex">
-            <div class="input-group mr-md-1">
+            <div class="input-group me-md-1">
                 <input
                     class="form-control"
                     placeholder="dd/mm/yyyy"

ietf/events/templates/events/event_listing_page.html

@@ -10,7 +10,7 @@
         <div class="container">
             <ul class="row py-4 mb-0 list-unstyled">
                 {% for promoted_event in self.promoted_events.all %}
-                    <li class="card mb-2 border-0 col-12 col-lg-6 row flex-md-row no-gutters align-items-stretch">
+                    <li class="card mb-2 border-0 col-12 col-lg-6 row flex-md-row g-0 align-items-stretch">
                         {% with promoted_event.promoted_event as event %}
                             <div class="col-md-4 h-md-auto">
                                 {% image event.main_image height-245 as event_image %}

ietf/events/templates/events/event_page.html

@@ -11,15 +11,15 @@
                 <h1>{{ self.title }}</h1>
 
                 {% if self.start_date %}
-                    <p class="h4 font-italic">{{ self.start_date }}{% if self.end_date %} - {{ self.end_date }}{% endif %}</p>
+                    <p class="h4 fst-italic">{{ self.start_date }}{% if self.end_date %} - {{ self.end_date }}{% endif %}</p>
                 {% endif %}
 
-                <p class="lead font-weight-normal u-max-text-width">{{ self.introduction }}</p>
+                <p class="lead fw-normal u-max-text-width">{{ self.introduction }}</p>
             </div>
         </div>
 
         <div class="container">
-            <div class="row no-gutters align-items-stretch justify-content-between">
+            <div class="row g-0 align-items-stretch justify-content-between">
 
                 <div class="col-12 col-lg-8 col-xl-9">
                 {% if self.body %}
@@ -63,37 +63,37 @@ <h2 class="h4">{{ self.venue_section_title }}</h2>
                         <dl class="row">
                             {% if self.venue %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Venue</dt>
+                                    <dt class="h5 fw-bolder">Venue</dt>
                                     <dd>{{ self.venue }}</dd>
                                 </div>
                             {% endif %}
                             {% if self.room_rates %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Room rates</dt>
+                                    <dt class="h5 fw-bolder">Room rates</dt>
                                     <dd>{{ self.room_rates }}</dd>
                                 </div>
                             {% endif %}
                             {% if self.extras %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Extras</dt>
+                                    <dt class="h5 fw-bolder">Extras</dt>
                                     <dd>{{ self.extras }}</dd>
                                 </div>
                             {% endif %}
                             {% if self.reservations_open %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Reservations open</dt>
+                                    <dt class="h5 fw-bolder">Reservations open</dt>
                                     <dd>{{ self.reservations_open }}</dd>
                                 </div>
                             {% endif %}
                             {% if self.reservation_name %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Reservation name</dt>
+                                    <dt class="h5 fw-bolder">Reservation name</dt>
                                     <dd>{{ self.reservation_name }}</dd>
                                 </div>
                             {% endif %}
                             {% if self.contact_details %}
                                 <div class="col-12 col-lg-6">
-                                    <dt class="h5 font-weight-bolder">Contact details</dt>
+                                    <dt class="h5 fw-bolder">Contact details</dt>
                                     <dd>{{ self.contact_details }}</dd>
                                 </div>
                             {% endif %}
@@ -103,15 +103,15 @@ <h2 class="h4">{{ self.venue_section_title }}</h2>
 
                 {% if self.hosts.exists or self.sponsors %}
                     <div class="bg-white py-3">
-                    <h2 class="h4 pl-3">Sponsors</h2>
+                    <h2 class="h4 ps-3">Sponsors</h2>
                         {% if self.hosts.exists %}
-                            <div class="pl-3 py-3">
+                            <div class="ps-3 py-3">
                                 <h3 class="h5 mb-3">Host{{ self.hosts.all|pluralize }}</h3>
 
                                 <ul class="list-unstyled">
                                     {% for h in self.hosts.all %}
                                         {% with h.host as host %}
-                                            <li class="d-inline-block mr-3">
+                                            <li class="d-inline-block me-3">
                                                 {% if host.link %}<a href="{{ host.link }}">{% endif %}
                                                     {% image host.logo max-200x149 as host_image %}
                                                     <img src="{{ host_image.url }}" width="{{ host_image.width }}"
@@ -124,11 +124,11 @@ <h3 class="h5 mb-3">Host{{ self.hosts.all|pluralize }}</h3>
                             </div>
                         {% endif %}
                         {% for sponsor_category in self.sponsors %}
-                            <div class="border-top pl-3 py-3">
+                            <div class="border-top ps-3 py-3">
                                 <h3 class="h5 mb-3">{{ sponsor_category.value.category_title }}</h3>
                                 <ul class="list-unstyled">
                                     {% for sponsor in sponsor_category.value.sponsor_group %}
-                                        <li class="d-inline-block mr-3">
+                                        <li class="d-inline-block me-3">
                                             {% if sponsor.value.link %}<a href="{{ sponsor.value.link }}">{% endif %}
 
                                             {% image sponsor.value.logo max-120x74 as sponsor_image %}

ietf/events/templates/includes/key_detail_section.html

@@ -1,8 +1,8 @@
 <div class="my-3">
     <button
-            class="d-block btn btn-link p-0 w-100 border-0 text-left"
-            data-toggle="collapse"
-            data-target="#{{ link_group.value.title|slugify }}"
+            class="d-block btn btn-link p-0 w-100 border-0 text-start"
+            data-bs-toggle="collapse"
+            data-bs-target="#{{ link_group.value.title|slugify }}"
             aria-expanded="{% if expanded %}true{% else %}false{% endif %}"
             aria-controls="{{ link_group.value.title|slugify }}"
             aria-label="{{ link_group.value.title }} - Click to toggle"
@@ -14,7 +14,7 @@ <h3 class="h5">
 
     <div class="collapse{% if expanded %} show{% endif %}" id="{{ link_group.value.title|slugify }}">
         {% for link in link_group.value.link_group %}
-        <span class="d-inline-block mb-2 {% if not forloop.last %}pr-2 mr-2 border-right{% endif %}">{{ link }}</span>
+        <span class="d-inline-block mb-2 {% if not forloop.last %}pe-2 me-2 border-end{% endif %}">{{ link }}</span>
         {% endfor %}
     </div>
 </div>