MMT-3436: PR Feedback

static/src/css/index.scss

@@ -1,3 +1 @@
-@layer framework, components;
-
 @import 'vendor';

static/src/css/vendor/bootstrap/_variables.scss

@@ -0,0 +1,83 @@
+
+/*
+ * This file pulls in all the Bootstrap variables and customizations. This file is
+ * separated so it can can be imported into a component SASS file to make the variables
+ * available in the component scope.
+ *
+ * See https://getbootstrap.com/docs/5.0/customize/sass/ for more info.
+*/
+
+/*
+ * Bootstrap utils
+*/
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+/*
+ * Theme customizations
+ *
+ * Included after `variables` and before `maps` as noted in the Bootstrap documentation
+*/
+
+/*
+ * Color
+*/
+
+$custom-colors: (
+ "blue": #2276ac,
+ "blue-light": #2c93d5,
+ "indigo": #2c3e50,
+ "purple": #673285,
+ "pink": #e74c3c,
+ "red": #b3241c,
+ "orange": #f28429,
+ "yellow": #f2d029,
+ "green": #189c54,
+ "teal": #20ce6f,
+ "cyan": #7ab5da,
+ "white": #fff,
+ "gray": #6c757d,
+ "gray-dark": #343a40,
+ "primary": #2276ac,
+ "secondary": #6c757d,
+ "success": #189c54,
+ "info": #7ab5da,
+ "warning": #f2d029,
+ "danger": #b3241c,
+ "light": #f8f9fa,
+ "dark": #212529
+);
+
+/* stylelint-disable-next-line function-no-unknown */
+$theme-colors: map-merge($theme-colors, $custom-colors);
+$gradient: linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 0%));
+
+/*
+ * Text
+*/
+
+$font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+/*
+ * Badge
+*/
+
+$badge-border-radius: 0.25rem;
+
+/*
+ * Navbar
+*/
+
+$navbar-padding-y: 0.75rem;
+$navbar-brand-padding-y: 0.75rem;
+$navbar-brand-font-size: calc(1.285rem + 0.42vw);
+
+/*
+ * Bootstrap utilities
+*/
+
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";

static/src/css/vendor/bootstrap/index.scss

@@ -1,85 +1,17 @@
-
 /*
  * This file pulls in all the necessary pieces of Bootstrap and sets some customizations.
  *
  * See https://getbootstrap.com/docs/5.0/customize/sass/ for more info.
 */
 
+/**
+* Import Bootstrap variables and customizations
+**/
+@import 'variables';
 
-/*
- * Bootstrap utils
-*/
-
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-
-/*
- * Theme customizations
- *
- * Included after `variables` and before `maps` as noted in the Bootstrap documentation
-*/
-
-/*
- * Color
-*/
-
-$custom-colors: (
- "blue": #2276ac,
- "blue-light": #2c93d5,
- "indigo": #2c3e50,
- "purple": #673285,
- "pink": #e74c3c,
- "red": #b3241c,
- "orange": #f28429,
- "yellow": #f2d029,
- "green": #189c54,
- "teal": #20ce6f,
- "cyan": #7ab5da,
- "white": #fff,
- "gray": #6c757d,
- "gray-dark": #343a40,
- "primary": #2276ac,
- "secondary": #6c757d,
- "success": #189c54,
- "info": #7ab5da,
- "warning": #f2d029,
- "danger": #b3241c,
- "light": #f8f9fa,
- "dark": #212529
-);
-
-/* stylelint-disable-next-line function-no-unknown */
-$theme-colors: map-merge($theme-colors, $custom-colors);
-$gradient: linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 0%));
-
-/*
- * Text
-*/
-
-$font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-/*
- * Badge
-*/
-
-$badge-border-radius: 0.25rem;
-
-/*
- * Navbar
-*/
-
-$navbar-padding-y: 0.75rem;
-$navbar-brand-padding-y: 0.75rem;
-$navbar-brand-font-size: calc(1.285rem + 0.42vw);
-
-/*
- * Bootstrap utilities
-*/
-
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
+/**
+* Import Bootstrap classes
+**/
 @import "bootstrap/scss/utilities";
 @import "bootstrap/scss/utilities/api";
 
@@ -103,7 +35,7 @@ $navbar-brand-font-size: calc(1.285rem + 0.42vw);
 @import "bootstrap/scss/type";
 // @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
-// @import "bootstrap/scss/grid";
+@import "bootstrap/scss/grid";
 // @import "bootstrap/scss/tables";
 @import "bootstrap/scss/forms";
 @import "bootstrap/scss/buttons";

static/src/css/vendor/bootstrap/overrides/_navbar.scss

@@ -25,6 +25,3 @@
  --bs-navbar-brand-font-size: 1.6rem;
  }
 }
-
-
-

static/src/js/App.jsx

@@ -15,11 +15,36 @@ import ManageCollectionsPage from './pages/ManageCollectionsPage/ManageCollectio
 import ManageServicesPage from './pages/ManageServicesPage/ManageServicesPage'
 import ManageToolsPage from './pages/ManageToolsPage/ManageToolsPage'
 import ManageVariablesPage from './pages/ManageVariablesPage/ManageVariablesPage'
+import REDIRECTS from './constants/redirectsMap/redirectsMap'
 
 import '../css/index.scss'
 
 const { graphQlHost } = config
 
+const redirectKeys = Object.keys(REDIRECTS)
+
+// Create an array of the redirect `Route`s
+const Redirects = redirectKeys.map(
+ (redirectKey) => (
+ <Route
+ key={redirectKey}
+ path={redirectKey}
+ element={(
+ <Navigate replace to={`/${REDIRECTS[redirectKey]}`} />
+ )}
+ />
+ )
+)
+
+/**
+ * Renders the `App` component
+ *
+ * @component
+ * @example <caption>Renders a `App` component</caption>
+ * return (
+ * <App />
+ * )
+ */
 const App = () => {
  const client = new ApolloClient({
  uri: graphQlHost,
@@ -31,7 +56,7 @@ const App = () => {
  <BrowserRouter>
  <Routes>
  <Route path="/" element={<Layout />}>
- <Route path="/" element={<Navigate replace to="/manage-collections" />} />
+ {Redirects}
  <Route
  element={<ManageCollectionsPage />}
  index

static/src/js/__tests__/App.test.js

@@ -1,5 +1,9 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import {
+ render,
+ screen,
+ waitFor
+} from '@testing-library/react'
 import { ApolloClient } from '@apollo/client'
 
 import App from '../App'
@@ -148,4 +152,124 @@ describe('App component', () => {
  expect(screen.getByTestId('mock-manage-cmr-page')).toBeInTheDocument()
  })
  })
+
+ describe('when visiting /', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-collections', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-collections')
+ })
+ })
+ })
+
+ describe('when visiting /manage_collections', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/manage_collections')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-collections', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-collections')
+ })
+ })
+ })
+
+ describe('when visiting /manage_variable', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/manage_variable')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-variable', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-variable')
+ })
+ })
+ })
+
+ describe('when visiting /manage_services', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/manage_services')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-services', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-services')
+ })
+ })
+ })
+
+ describe('when visiting /manage_tools', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/manage_tools')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-tools', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-tools')
+ })
+ })
+ })
+
+ describe('when visiting /manage_cmr', () => {
+ beforeEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/manage_cmr')
+ })
+
+ afterEach(() => {
+ delete window.location
+ window.location = new URL('http://localhost/')
+ })
+
+ test('redirects to /manage-cmr', () => {
+ render(<App />)
+
+ waitFor(() => {
+ expect(window.location.href).toEqual('http://localhost/manage-cmr')
+ })
+ })
+ })
 })