Research: upgrade react router

.babelrc

@@ -5,9 +5,17 @@
         "@babel/preset-typescript",
     ],
     "plugins": [
-        // Reuse babel"s injected headers
+        // Reuse babel's injected headers
         "@babel/plugin-transform-runtime",
 
+        // Polyfill
+        ["polyfill-corejs3", {
+            "method": "usage-global",
+        }],
+        ["polyfill-regenerator", {
+            "method": "usage-global",
+        }],
+
         // Handle absolute imports
         ["babel-plugin-module-resolver", {
             "root": ["."],
@@ -27,21 +35,12 @@
 
         // Extends javascript support
         "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-proposal-do-expressions",
 
         // Extends react support
         "@babel/plugin-transform-react-constant-elements",
-        "@babel/plugin-transform-react-inline-elements",
+        // "@babel/plugin-transform-react-inline-elements",
 
         // Extends graphql support
         'babel-plugin-graphql-tag',
-
-        // Polyfill
-        ["polyfill-corejs3", {
-            "method": "usage-global",
-        }],
-        ["polyfill-regenerator", {
-            "method": "usage-global",
-        }],
     ],
 }

.eslintrc.js

@@ -38,6 +38,7 @@ const config = {
     },
     rules: {
         strict: 1,
+        'default-param-last': 0,
 
         'no-unused-vars': 0,
         '@typescript-eslint/no-unused-vars': 1,
@@ -76,6 +77,12 @@ const config = {
         'react/jsx-indent': [2, 4],
         'react/jsx-indent-props': [2, 4],
         'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+        'react/jsx-props-no-spreading': 0,
+        'react/jsx-key': ['warn', {
+            checkFragmentShorthand: true,
+            checkKeyMustBeforeSpread: true,
+        }],
+
         'react/prop-types': [1, { ignore: [], customValidators: [], skipUndeclared: false }],
         'react/forbid-prop-types': [1],
         'react/destructuring-assignment': [1, 'always', { ignoreClassFields: true }],
@@ -89,12 +96,16 @@ const config = {
             ],
         }],
         'react/no-unused-state': 'warn',
-        'react/jsx-props-no-spreading': 0,
         'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
         'react/default-props-match-prop-types': ['warn', {
             allowRequiredDefaults: true,
         }],
 
+
+        'react/function-component-definition': [2, {
+            'namedComponents': 'function-declaration',
+            'unnamedComponents': 'function-expression',
+        }],
         'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'warn',
 

Dockerfile

@@ -1,13 +1,13 @@
-FROM node:12.20-alpine
+FROM node:lts-alpine
 
 MAINTAINER togglecorp [email protected]
 
 RUN apk update\
-    && apk add --no-cache git bash
+    && apk add --no-cache git bash python3 g++ make
 
 WORKDIR /code
 
 COPY ./package.json ./yarn.lock /code/
-RUN yarn install --network-concurrency 1
+RUN yarn install --frozen-lockfile
 
 COPY . /code/

app/Base/components/AuthPopup/index.tsx

@@ -19,6 +19,8 @@ function AuthPopup() {
     return (
         <Modal
             heading="Invalid Session"
+            size="extraSmall"
+            freeHeight
             onCloseButtonClick={onCancel}
             footerClassName={styles.actionButtonsRow}
             footer={(

app/Base/components/Navbar/index.tsx

@@ -1,32 +1,41 @@
 import React, { useContext } from 'react';
 import { _cs } from '@togglecorp/fujs';
-import { gql, useMutation } from '@apollo/client';
+import { Link } from 'react-router-dom';
+import { useQuery, gql, useMutation } from '@apollo/client';
 import {
-    ButtonLikeLink,
     QuickActionLink,
     QuickActionDropdownMenu,
     DropdownMenu,
     DropdownMenuItem,
     useConfirmation,
+    useAlert,
+    Svg,
 } from '@the-deep/deep-ui';
 import {
     IoHelp,
     IoCompassOutline,
     IoNotificationsOutline,
+    IoLogInOutline,
     IoLogOutOutline,
 } from 'react-icons/io5';
 
-import Svg from '#components/Svg';
 import Notifications from '#components/Notifications';
 import SmartNavLink from '#base/components/SmartNavLink';
+import SmartButtonLikeLink from '#base/components/SmartButtonLikeLink';
 import Avatar from '#components/Avatar';
 import { UserContext } from '#base/context/UserContext';
 import route from '#base/configs/routes';
-import { LogoutMutation } from '#generated/types';
+import {
+    LogoutMutation,
+    UserNotificationsCountQuery,
+    UserNotificationsCountQueryVariables,
+} from '#generated/types';
 import deepLogo from '#resources/img/deep-logo-new.svg';
 
 import styles from './styles.css';
 
+const NOTIFICATION_POLL_INTERVAL = 60000;
+
 const LOGOUT = gql`
     mutation Logout {
         logout {
@@ -35,29 +44,58 @@ const LOGOUT = gql`
     }
 `;
 
+export const USER_NOTIFICATIONS_COUNT = gql`
+    query UserNotificationsCount {
+        notifications(
+            status: UNSEEN,
+        ) {
+            totalCount
+        }
+    }
+`;
+
 interface Props {
     className?: string;
 }
 
 function Navbar(props: Props) {
     const { className } = props;
+    const alert = useAlert();
 
     const {
         authenticated,
         user,
         setUser,
     } = useContext(UserContext);
 
+    const {
+        data: notifications,
+    } = useQuery<UserNotificationsCountQuery, UserNotificationsCountQueryVariables>(
+        USER_NOTIFICATIONS_COUNT,
+        {
+            pollInterval: NOTIFICATION_POLL_INTERVAL,
+        },
+    );
+
     const [logout] = useMutation<LogoutMutation>(
         LOGOUT,
         {
             onCompleted: (data) => {
                 if (data.logout?.ok) {
                     setUser(undefined);
+                } else {
+                    alert.show(
+                        'Failed to logout.',
+                        { variant: 'error' },
+                    );
                 }
-                // FIXME: handle failure
             },
-            // FIXME: handle failure
+            onError: () => {
+                alert.show(
+                    'Failed to logout.',
+                    { variant: 'error' },
+                );
+            },
         },
     );
 
@@ -70,18 +108,22 @@ function Navbar(props: Props) {
         message: 'Are you sure you want to logout?',
     });
 
+    const notificationsCount = notifications?.notifications?.totalCount;
+
     return (
         <nav className={_cs(className, styles.navbar)}>
-            <div className={styles.appBrand}>
+            <Link
+                to={route.home.path}
+                className={styles.appBrand}
+            >
                 <Svg
                     className={styles.logo}
                     src={deepLogo}
                 />
-            </div>
+            </Link>
             <div className={styles.main}>
                 <div className={styles.navLinks}>
                     <SmartNavLink
-                        exact
                         route={route.home}
                         className={styles.link}
                     />
@@ -95,25 +137,40 @@ function Navbar(props: Props) {
                     />
                 </div>
                 <div className={styles.actions}>
-                    <ButtonLikeLink
-                        to={route.explore.path}
+                    <SmartButtonLikeLink
+                        route={route.explore}
                         variant="tertiary"
                         icons={<IoCompassOutline />}
                     >
                         Explore DEEP
-                    </ButtonLikeLink>
+                    </SmartButtonLikeLink>
+                    <SmartButtonLikeLink
+                        route={route.login}
+                        variant="tertiary"
+                        icons={(
+                            <IoLogInOutline />
+                        )}
+                    >
+                        Login
+                    </SmartButtonLikeLink>
                     <QuickActionLink
+                        title="DEEP Support"
                         to="https://deephelp.zendesk.com/hc/en-us"
                     >
                         <IoHelp />
                     </QuickActionLink>
-                    <QuickActionDropdownMenu
-                        label={<IoNotificationsOutline />}
-                        popupClassName={styles.popup}
-                        persistent
-                    >
-                        <Notifications />
-                    </QuickActionDropdownMenu>
+                    {authenticated && (
+                        <QuickActionDropdownMenu
+                            label={(<IoNotificationsOutline />)}
+                            className={styles.notificationButton}
+                            actions={notificationsCount !== 0 ? notificationsCount : undefined}
+                            popupClassName={styles.popup}
+                            actionsContainerClassName={styles.notificationCount}
+                            persistent
+                        >
+                            <Notifications />
+                        </QuickActionDropdownMenu>
+                    )}
                 </div>
             </div>
             {authenticated && user && (

app/Base/components/Navbar/styles.css

@@ -44,10 +44,29 @@
         display: flex;
         align-items: center;
         flex-shrink: 0;
-        padding: 0 calc(var(--dui-spacing-large) - var(--dui-spacing-small));
+        padding: var(--dui-spacing-large);
+        gap: var(--dui-spacing-small);
 
-        >* {
-            margin: 0 var(--dui-spacing-small);
+        .notification-button {
+            position: relative;
+            overflow: visible;
+
+            .notification-count {
+                display: flex;
+                position: absolute;
+                top: -0.5em;
+                right: -0.5em;
+                align-items: center;
+                justify-content: center;
+                /* NOTE: Want to move this a bit up */
+                border-radius: 1em;
+                background-color: var(--dui-color-danger);
+                padding: 2px;
+                min-width: 1.4em;
+                min-height: 1.4em;
+                color: var(--dui-color-text-on-dark);
+                font-size: var(--dui-font-size-extra-small);
+            }
         }
     }
 

app/Base/components/Page/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useContext } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
+import { isDefined } from '@togglecorp/fujs';
 
 import FullPageErrorMessage from '#views/FullPageErrorMessage';
 import { UserContext } from '#base/context/UserContext';
@@ -8,7 +9,6 @@ import { ProjectContext } from '#base/context/ProjectContext';
 import PageTitle from '#base/components/PageTitle';
 import { Project } from '#base/types/project';
 import ErrorBoundary from '#base/components/ErrorBoundary';
-import divingKraken from '#resources/img/diving-kraken.png';
 
 import styles from './styles.css';
 
@@ -25,7 +25,7 @@ export interface Props<T extends { className?: string }> {
         project: Project | undefined,
         skipProjectPermissionCheck: boolean,
     ) => boolean | undefined,
-    navbarVisibility: boolean;
+    navbarVisibility: boolean | undefined;
 
     path: string;
     loginPage?: string;
@@ -65,7 +65,9 @@ function Page<T extends { className?: string }>(props: Props<T>) {
         () => {
             // NOTE: should not set visibility for redirection or, navbar will
             // flash
-            if (!redirect) {
+            // NOTE: if navbarVisibility do not change navbar state
+            // useful for parent routes
+            if (!redirect && isDefined(navbarVisibility)) {
                 setNavbarVisibility(navbarVisibility);
             }
         },
@@ -78,14 +80,14 @@ function Page<T extends { className?: string }>(props: Props<T>) {
     if (redirectToSignIn) {
         // console.warn('Redirecting to sign-in');
         return (
-            <Redirect to={loginPage} />
+            <Navigate to={loginPage} />
         );
     }
 
     if (redirectToHome) {
         // console.warn('Redirecting to dashboard');
         return (
-            <Redirect to={defaultPage} />
+            <Navigate to={defaultPage} />
         );
     }
 
@@ -99,7 +101,7 @@ function Page<T extends { className?: string }>(props: Props<T>) {
                 <FullPageErrorMessage
                     errorTitle="403"
                     errorMessage="You do not have permission to access this page"
-                    errorImage={divingKraken}
+                    krakenVariant="hi"
                 />
             </>
         );