Merge pull request #435 from UoA-eResearch/IDS-608-fix-webpack-problems

Ids 608 Fix user menu not working

assets/css/custom.css

@@ -0,0 +1,21 @@
+/*
+University of Auckland-specific styling here. Replace with your own styling.
+*/
+
+
+@font-face{font-family:'NationalBold';src:url("../uoa//NationalWeb-Bold.eot");src:url("../uoa//NationalWeb-Bold.woff2") format("woff2"),url("../uoa//NationalWeb-Bold.woff") format("woff")}
+@font-face{font-family:'NationalBoldItalic';src:url("../uoa//NationalWeb-BoldItalic.eot");src:url("../uoa//NationalWeb-BoldItalic.woff2") format("woff2"),url("../uoa//NationalWeb-BoldItalic.woff") format("woff")}
+@font-face{font-family:'NationalBook';src:url("../uoa//NationalWeb-Book.eot");src:url("../uoa//NationalWeb-Book.woff2") format("woff2"),url("../uoa//NationalWeb-Book.woff") format("woff")}
+@font-face{font-family:'NationalBookItalic';src:url("../uoa//NationalWeb-BookItalic.eot");src:url("../uoa//NationalWeb-BookItalic.woff2") format("woff2"),url("../uoa//NationalWeb-BookItalic.woff") format("woff")}
+
+:root {
+    --bs-font-sans-serif: "NationalBook";
+    --bs-body-font-family: var(--bs-font-sans-serif);
+    --bs-body-font-size: 18px;
+    --bs-body-font-weight: 400;
+}
+
+/*Headings use bold text.*/
+h1, h2, h3, h4, h5, .navbar-brand {
+    font-family: "NationalBold"
+}

assets/css/default.css

@@ -1,10 +1,20 @@
+:root {
+    /*Remove padding as the institution logo already has margin.*/
+    --bs-navbar-brand-padding-y: 0;
+}
+
 html{
   height: 100%;
 }
 body {
   min-height: 100%;
 }
 
+img.institution-logo {
+    height: 60px;
+    margin: 0.75rem 1.25rem;
+}
+
 /* Icons */
 i.o-6 {
   opacity: 0.6;

assets/js/apps/badges/components/DatasetViewPageBadges.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { fetchDatasetData } from './utils/FetchData';
 import Spinner from './utils/Spinner';
 import DatasetSizeBadge from './DatasetSizeBadge';

assets/js/apps/badges/components/ExperimentViewPageBadges.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ExperimentLastUpdatedBadge from './ExperimentLastUpdateBadge';
 import PublicAccessBadge from './PublicAccessBadge';
 import DatasetCountBadge from './DatasetCountBadge';

assets/js/apps/badges/components/IndexPageBadges.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ExperimentLastUpdatedBadge from './ExperimentLastUpdateBadge';
 import PublicAccessBadge from './PublicAccessBadge';
 import DatasetCountBadge from './DatasetCountBadge';

assets/js/apps/badges/components/ProjectBadges.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PublicAccessBadge from './PublicAccessBadge';
 import ExperimentCountBadge from './ExperimentCountBadge';
 import DatasetCountBadge from './DatasetCountBadge';

assets/js/apps/badges/components/ShareTabBadge.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react';
 
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PublicAccessBadge from './PublicAccessBadge';
 import { fetchExperimentData } from './utils/FetchData';
 import Spinner from './utils/Spinner';

assets/js/apps/choose_rights/CurrentLicense.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import { fetchExperimentData } from '../badges/components/utils/FetchData';
 import Spinner from '../badges/components/utils/Spinner';

assets/js/apps/tiles/components/DatasetTilesLists.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Cookies from 'js-cookie';
 import {
   fetchDatasetsForExperiment,

assets/js/apps/tree_view/components/Download.jsx

@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Spinner from '../../badges/components/utils/Spinner';
 
 const FileDownloadButton = ({ isDisabled, onClick, isDownloading }) => {

assets/js/index.js

@@ -25,3 +25,4 @@ require("../css/facility-overview.css");
 require("blueimp-file-upload/css/jquery.fileupload.css");
 require("select2/dist/css/select2.css");
 require("select2/dist/js/select2.js");
+require("../css/custom.css")

package.json

@@ -12,7 +12,7 @@
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@reduxjs/toolkit": "^1.9.7",
-    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.0.0",
     "@testing-library/react": "12.1.5",
     "angular": "1.8.3",
     "angular-resource": "1.8.3",

tardis/tardis_portal/templates/tardis_portal/index.html

@@ -11,7 +11,7 @@
 {% block content %}
 <div id="content" class="container-fluid">
   <div class="page-header">
-    <h1 class="mb-1">{{site_title|default:'MyTardis'}} Data Store</h1>
+    <h1 class="mb-1">Home</h1>
   </div>
   {% if not is_authenticated %}
     <p>

tardis/tardis_portal/templates/tardis_portal/portal_template.html

@@ -28,12 +28,6 @@
     {% render_bundle 'lib' %}
     {% block script %}
     {% endblock script %}
-    <style>
-      body {
-        /* 60px to make the container go all the way to the bottom of the topbar */
-        padding-top: 60px;
-      }
-    </style>
     <script type="text/javascript">
     // Set active nav button
     $(function() {
@@ -82,9 +76,10 @@
     {% endblock %}
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
       {% block site_brand %}
-        <a class="navbar-brand" href="{% url 'tardis.tardis_portal.views.index' %}">
+      <a href="{% url 'tardis.tardis_portal.views.index' %}"><img src="{{ STATIC_URL }}/logo.png" alt="Logo for institution" class="institution-logo"></a>
+      <a class="navbar-brand" href="{% url 'tardis.tardis_portal.views.index' %}">
           {{ site_title|default:'MyTardis' }}
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
@@ -93,7 +88,7 @@
         </button>
       {% endblock %}
       <div class="collapse navbar-collapse">
-        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <ul class="navbar-nav ms-3 mt-2 mt-lg-0">
           <li class="nav-item">
             <a class="nav-link" href="{% url 'tardis.tardis_portal.views.index' %}">Home</a>
           </li>
@@ -134,26 +129,27 @@
             </a>
           </li>
         </ul>
-        <ul class="navbar-nav ml-auto">
+        <ul class="navbar-nav ms-auto me-3">
           {% if search_form %}
             <form id="searchbox" method="get"
                 class="form-inline my-2 my-lg-0"
                 action="{% url 'search' %}">
                 <div class="form-group">
                   <input id="id_q" autocomplete="off" name="q"
-                       type="text" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
+                       type="text" class="form-control ms-sm-2" type="search" placeholder="Search" aria-label="Search"
                        {% if query %} value="{{ query }}" {% endif %}/>
                 </div>
             </form>
           {% endif %}
           {% if is_authenticated %}
-            <li id="user-menu" class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#user-menu">
+            <li id="user-menu" class="ms-2 nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#user-menu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 {{ username }}
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="user-menu">
                 {% for menu_item in user_menu %}
                   {% if not menu_item.divider %}
+                  <li>
                     <a class="dropdown-item" href="{{ menu_item.url }}">
                       <i class="{{menu_item.icon}}"
                          {% if menu_item.style %}
@@ -163,11 +159,12 @@
                       </i>
                       {{menu_item.label}}
                     </a>
+                  </li>
                   {% else %}
-                    <div class="dropdown-divider"></div>
+                    <li><hr class="dropdown-divider"></li>
                   {% endif %}
                 {% endfor %}
-              </div>
+              </ul>
             </li>
           {% else %}
             {% if registration_enabled %}
@@ -196,7 +193,7 @@
       </div>
     </nav>
 
-    <div class="container-fluid">
+    <div class="container-fluid mt-2">
       {% if subtitle %}
       <!-- Subtitle: {{ subtitle }} -->
       {% endif %}

webpack.config.js

@@ -106,26 +106,15 @@ module.exports = {
         rules: [
             {test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"},
             {
-                test: /\.css$/,
+                test: /\.(sa|sc|c)ss$/i,
                 use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            publicPath: "../static/bundles/"
-                        }
-                    }, "css-loader"
-                ]
-            },
+                  MiniCssExtractPlugin.loader,
+                  "css-loader",
+                ],
+              },
             {
                 test: /\.(woff|woff2|)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                loader: "url-loader",
-                options: {
-                    limit: 10000,
-                    mimetype:"application/font-woff",
-                    name: "[name].[ext]",
-                    outputPath: "static/bundles/",
-                    publicPath: "../static/bundles/"
-                }
+                type: 'asset/resource',
             },
             {
                 test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,