Merge pull request ietf-tools#3596 from painless-security/personal/jennifer/7.45.1.dev0.bootstrap-merge

feat: updated boostrap5 work

Author: NGPixel

.eslintrc.js

@@ -1,19 +1,24 @@
 module.exports = {
+    extends: ["eslint:recommended"],
     rules: {
-        indent: [2, 4],
-        camelcase: 0,
-        "require-jsdoc": 0,
-        quotes: [2, "double"],
-        "no-multiple-empty-lines": [2, {max: 2}],
-        "quote-props": [2, "as-needed"],
-        "brace-style": [2, "1tbs", {allowSingleLine: true}]
+        indent: ["error", 4],
+        quotes: "off",
+        "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 0 }],
+        "quote-props": ["error", "as-needed"],
+        "brace-style": ["error", "1tbs", { allowSingleLine: true }],
+        semi: ["error", "always"],
+        "newline-per-chained-call": ["error"]
     },
     env: {
         browser: true,
-        jquery: true
+        jquery: true,
+        node: true
     },
     globals: {
         d3: true
     },
-    extends: "google"
-};
+    parserOptions: {
+        sourceType: "module",
+        ecmaVersion: 2015
+    }
+};

.gitignore

@@ -16,17 +16,18 @@
 .DS_store
 # Simulated Subversion default ignores end here
 /.coverage
+/.factoryboy_random_state
 /.mypy_cache
+/.parcel-cache
 /.project
 /.pydevproject
 /.Python
 /.settings
 /.tmp
-/.factoryboy_random_state
 /attic
 /bin
-/etc
 /env
+/etc
 /ghostdriver.log
 /htmlcov
 /include
@@ -38,6 +39,7 @@
 /mergelog
 /mergequeue
 /minimum-requirements.txt
+/node_modules
 /pip-selfcheck.json
 /selenium
 /settings_local.py

LICENSE

@@ -0,0 +1,27 @@
+Copyright (c) 2008, 2018, The IETF Trust
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software without
+   specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

LICENSE.md

@@ -26,6 +26,7 @@
 - [Docker Dev Environment](docker/README.md)
 - [Continuous Integration](#continuous-integration)
 - [Database & Assets](#database--assets)
+- [Bootstrap 5 Upgrade](#bootstrap-5-upgrade)
 
 ---
 
@@ -154,3 +155,139 @@ Additional data files used by the datatracker (e.g. instance drafts, charters, r
 https://www.ietf.org/standards/ids/internet-draft-mirror-sites/
 
 > A script is available at `docker/scripts/app-rsync-extras.sh` to automatically fetch these resources via rsync.
+
+---
+
+# Bootstrap 5 Update
+
+An update of the UI to use Bootstrap 5 is under way. The following notes describe this work-in-progress and should
+be integrated with the rest of the document as the details and processes become final.
+
+## Intro
+
+We now use `npm` to manage assets for the Datatracker, and `parcel` to
+package them. `npm` maintains its `node` packages under `node_modules`.
+
+The Datatracker includes these packages from the various Javascript and
+CSS files in `ietf/static/js` and `ietf/static/css`, respectively.
+Static images are likewise in `ietf/static/images`.
+
+Whenever changes are made to the files under `ietf/static`, you must
+re-run `parcel` to package them:
+
+``` shell
+npx parcel build
+```
+
+This will create packages under `ietf/static/dist/ietf`, which are then
+served by the Django development server, and which must be uploaded to
+the CDN.
+
+## Use Bootstrap Whenever You Can
+
+The "new" datatracker uses Twitter Bootstrap for the UI.
+
+Get familiar with <https://getbootstrap.com/getting-started/> and use
+those UI elements, CSS classes, etc. instead of cooking up your own.
+
+Some ground rules:
+
+-   Think hard before tweaking the bootstrap CSS, it will make it harder
+    to upgrade to future releases.
+-   No `<style>` tags in the HTML! Put CSS into the "morecss" block of
+    a template instead.
+-   CSS that is used by multiple templates goes into static/css/ietf.css
+    or a new CSS file.
+-   Javascript that is only used on one template goes into the "js"
+    block of that template.
+-   Javascript that is used by multiple templates goes into
+    static/js/ietf.js or a new js file.
+-   Every template includes jquery, so write jquery code and not plain
+    Javascript. It's shorter and often faster.
+-   Avoid CSS, HTML styling or Javascript in the python code!
+
+## Serving Static Files via CDN
+
+### Production Mode
+
+If resources served over a CDN and/or with a high max-age don't have
+different URLs for different versions, then any component upgrade which
+is accompanied by a change in template functionality will have a long
+transition time during which the new pages are served with old
+components, with possible breakage. We want to avoid this.
+
+The intention is that after a release has been checked out, but before
+it is deployed, the standard django `collectstatic` management command
+will be run, resulting in all static files being collected from their
+working directory location and placed in an appropriate location for
+serving via CDN. This location will have the datatracker release version
+as part of its URL, so that after the deployment of a new release, the
+CDN will be forced to fetch the appropriate static files for that
+release.
+
+An important part of this is to set up the `STATIC_ROOT` and
+`STATIC_URL` settings appropriately. In 6.4.0, the setting is as follows
+in production mode:
+
+```
+STATIC_URL = "https://www.ietf.org/lib/dt/%s/"%__version__
+STATIC_ROOT = CDN_ROOT + "/a/www/www6s/lib/dt/%s/"%__version__
+```
+
+The result is that all static files collected via the `collectstatic`
+command will be placed in a location served via CDN, with the release
+version being part of the URL.
+
+### Development Mode
+
+In development mode, `STATIC_URL` is set to `/static/`, and Django's
+`staticfiles` infrastructure makes the static files available under that
+local URL root (unless you set
+`settings.SERVE_CDN_FILES_LOCALLY_IN_DEV_MODE` to `False`). It is not
+necessary to actually populate the `static/` directory by running
+`collectstatic` in order for static files to be served when running
+`ietf/manage.py runserver` -- the `runserver` command has extra support
+for finding and serving static files without running collectstatic.
+
+In order to work backwards from a file served in development mode to the
+location from which it is served, the mapping is as follows:
+
+| Development URL | Working copy location |
+| --------------- | --------------------- |
+| localhost:8000/static/ietf/*  |  ietf/static/ietf/* |
+| localhost:8000/static/secr/*  |  ietf/secr/static/secr/*|
+
+## Handling of External Javascript and CSS Components
+
+In order to make it easy to keep track of and upgrade external
+components, these are now handled by a tool called `npm` via the
+configuration in `package.json`.
+
+## Handling of Internal Static Files
+
+Previous to this release, internal static files were located under
+`static/`, mixed together with the external components. They are now
+located under `ietf/static/ietf/` and `ietf/secr/static/secr`, and will
+be collected for serving via CDN by the `collectstatic` command. Any
+static files associated with a particular app will be handled the same
+way (which means that all `admin/` static files automatically will be
+handled correctly, too).
+
+## Changes to Template Files
+
+In order to make the template files refer to the correct versioned CDN
+URL (as given by the STATIC_URL root) all references to static files in
+the templates have been updated to use the `static` template tag when
+referring to static files. This will automatically result in both
+serving static files from the right place in development mode, and
+referring to the correct versioned URL in production mode and the
+simpler `/static/` URLs in development mode.
+
+## Deployment
+
+During deployment, it is now necessary to run the management command:
+
+``` shell
+ietf/manage.py collectstatic
+````
+before activating a new release.

README.md

@@ -123,11 +123,6 @@ while true ; do
     shift
 done
 
-# ----------------------------------------------------------------------
-# Check some requirements
-
-check bower "It is required to update web resources.  Install with npm."
-
 # ----------------------------------------------------------------------
 # The program itself
 
@@ -218,19 +213,15 @@ if [ -z "$PERMIT_MIGR_MIX" ]; then
 fi
 
 if [ -z "$IGNORE_RESOURCES" ]; then
-    note "Updating bower assets ..."
-    $do ietf/manage.py bower_install > .mkrelease-bower-install.log
-    $do rm .mkrelease-bower-install.log	# This happens at once unless the previous command returns error
-    $do svn st ietf/externals/static | grep -v '^\?' || true
-    $do svn commit ietf/externals/static -m "Updated bower-managed static web assets"
-    # Get rid of bower-installed files which we don't use:
-    $do rm -rf ietf/externals/static/datatracker/
-    $do rm -rf ietf/externals/static/jquery.cookie/
-    $do rm -f $(svn st ietf/externals/ | grep '^\?' | awk '{print $2}')
+    note "Updating assets ..."
+    $do npm install > .mkrelease-npm-install.log
+    $do rm .mkrelease-npm-install.log	# This happens at once unless the previous command returns error
+    $do npx parcel build > .mkrelease-parcel-build.log
+    $do rm .mkrelease-parcel-build.log   # This happens at once unless the previous command returns error
 fi
 
 note "Collecting static files ..."
-$do ietf/manage.py collectstatic --noinput --ignore=bower.json --ignore='README.*' --ignore=rev | grep -v "Found another file with the destination path"
+$do ietf/manage.py collectstatic --noinput --ignore='README.*' --ignore=rev | grep -v "Found another file with the destination path"
 #$do svn commit static/lib/ -m "Updated static files under static/lib/"
 
 # note "Checking that there's a recent test-crawler log"
@@ -344,5 +335,4 @@ cat ~/src/db/mail/release-mail-v$VER.txt | $do mail "${SEND_ARGS}" -s "New datat
 
 # Removed at Henrik's suggestion
 #$do toolsfeed control changelog /www/tools.ietf.org/tools/atomfeed.xml
-#$do toolpush /www/tools.ietf.org/tools/atomfeed.xml
-
+#$do toolpush /www/tools.ietf.org/tools/atomfeed.xml