Merge branch 'release-146' into martha/a11y55-click-to-show-2

.eslintrc.js

@@ -23,6 +23,13 @@ module.exports = {
     sourceType: 'module',
   },
   overrides: [
+    {
+      // storybook files
+      files: ['*.stories.tsx'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
     {
       files: ['*.ts', '*.tsx'],
       extends: [

.github/workflows/build-image.yml

@@ -79,7 +79,10 @@ jobs:
       - name: Run vulnerability scan for PR
         if: github.event_name == 'pull_request'
         id: vuln_scan
-        uses: aquasecurity/[email protected]
+        uses: aquasecurity/[email protected]
+        env:
+          TRIVY_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-db:2"
+          TRIVY_JAVA_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-java-db:1"
         with:
           image-ref: ${{ secrets.IMAGE_NAME }}:${{ steps.env.outputs.image_tag }}
           format: 'table'
@@ -113,7 +116,10 @@ jobs:
       - name: Run scan for medium vulnerabilities
         if: github.event_name != 'pull_request'
         id: scan_medium
-        uses: aquasecurity/[email protected]
+        uses: aquasecurity/[email protected]
+        env:
+          TRIVY_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-db:2"
+          TRIVY_JAVA_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-java-db:1"
         continue-on-error: true
         with:
           image-ref: ${{ secrets.IMAGE_NAME }}:${{ steps.env.outputs.image_tag }}
@@ -126,7 +132,10 @@ jobs:
       - name: Run scan for critical and high vulnerabilities
         if: github.event_name != 'pull_request'
         id: scan_crit
-        uses: aquasecurity/[email protected]
+        uses: aquasecurity/[email protected]
+        env:
+          TRIVY_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-db:2"
+          TRIVY_JAVA_DB_REPOSITORY: "public.ecr.aws/aquasecurity/trivy-java-db:1"
         with:
           image-ref: ${{ secrets.IMAGE_NAME }}:${{ steps.env.outputs.image_tag }}
           format: 'table'

.storybook/main.ts

@@ -27,7 +27,14 @@ const config = {
       },
     });
   },
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    // Use implicit paths for all stories
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.mdx',
+    // For a better structure, need to reorganize some things. Should first confirm approach that "src" has comment element components and "modules" have components for specific pages or modules, which is the vague pattern right now.
+    // - Move src/components/clientDashboard components into module(s)
+    // - Move src/components/pages into modules too?
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -49,6 +56,10 @@ const config = {
     checkOptions: {},
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
+      // Makes union prop types like variant and size appear as select controls
+      shouldExtractLiteralValuesFromEnum: true,
+      // Makes string and boolean types that can be undefined appear as inputs and switches
+      shouldRemoveUndefinedFromOptional: true,
       propFilter: (prop: any) => {
         return prop.parent
           ? prop.parent.name !== 'DOMAttributes' &&

.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import { ClientDashboardContext } from '@/components/pages/ClientDashboard';
 import { EnrollmentDashboardContext } from '@/components/pages/EnrollmentDashboard';
 import { MockedProvider } from '@apollo/client/testing';
-import { ThemeProvider } from '@mui/material/styles';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import en from 'date-fns/locale/en-US';
@@ -11,6 +10,8 @@ import theme from '../src/config/theme';
 import '../src/index.css';
 import { fakeEnrollment, RITA_ACKROYD } from '../src/test/__mocks__/requests';
 import { RenderRouteWithOutletContext } from './components/RenderRouteWithOutletContext';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 export const parameters = {
   layout: 'padded',
@@ -63,10 +64,18 @@ export const decorators = [
     }
   },
   (Story) => (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={en}>
-        {Story()}
-      </LocalizationProvider>
-    </ThemeProvider>
+    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={en}>
+      {Story()}
+    </LocalizationProvider>
   ),
+  withThemeFromJSXProvider({
+    themes: {
+      // If we provide more than one theme here, a toolbar menu will appear in
+      // the Storybook UI to select among them
+      default: theme,
+    },
+    defaultTheme: 'default',
+    Provider: ThemeProvider,
+    GlobalStyles: CssBaseline,
+  }),
 ];

README.md

@@ -173,3 +173,55 @@ rails driver:hmis:dump_graphql_schema
 ```
 
 To pick up the local schema changes on the frontend, run the `graphql:codegen` script (see above).
+
+## Project Structure
+
+This project uses a module or feature-based structure which is inspired by the [bulletproof-react](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md) structure.
+
+```
+src
+|
++-- api               # graphql queries/mutations/fragments
+|
++-- components        # shared components used across the entire application
+|
++-- modules           # feature-based modules
+|
++-- hooks             # shared hooks used across the entire application
+|
++-- test              # test utilities and mocks
+|
++-- types             # shared types used across the application (auto-generated from the graphql schema)
+|
++-- utils             # shared utility functions
+```
+
+
+Inner structure of a module:
+
+```
+src/modules/awesomeModule
+|
++-- components  # components scoped to a specific feature
+|
++-- hooks       # hooks scoped to a specific feature
+|
++-- myTypes.ts  # typescript types used within the feature, with appropriate filename
+|
++-- myUtils.ts  # utility functions for a specific feature, with appropriate filename
+
+```
+
+#### Guidelines for categorization
+* Prefer to co-locate code that deals with the same type of thing into a shared `module`, even if the components are rendered in different parts of the application. For example, the Project Services table and Client Services table can live in the same "service" module.
+* A `module` should typically contain more than just a couple of files, but not so many that it becomes difficult to navigate or understand.
+* If two potential features are highly interdependent and frequently change together, consider combining them into a single `module`.
+* The top-level `components` folder should contain generic components that are used across the application. For the most part, they should not be domain-specific.
+* Components in the top-level `components` dir should not have dependencies on `module` code.
+* It should be clear what the purpose of a module is and how to use it. An engineer should be able to quickly understand what the module's entry-points are without needing to understand the internals of the module. If this is not obvious from code structure or storybook, include a brief README.md in the module dir with examples/explanation.
+
+#### Examples of modules
+* `modules/service` - includes the service table components, and service-related pages (e.g. ProjectServicesPage, EnrollmentServicesPage)
+* `modules/bulkServices` - includes components to support the bulk service assignment feature. This is separated out from the `services` module to keep the size manageable, and because they are relatively independent implementations.
+* `modules/scanCards` - components to support the Scan Card feature
+

docker/templates/non_proxy_headers.conf.template

@@ -3,6 +3,7 @@
 add_header Content-Security-Policy "default-src 'none'; connect-src 'self' *.sentry.io *.s3.amazonaws.com; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; img-src 'self' data: blob: *.s3.amazonaws.com; font-src 'self' fonts.gstatic.com; object-src 'none';" always;
 
 add_header Referrer-Policy "strict-origin-when-cross-origin";
+add_header Strict-Transport-Security "max-age=63072000; includeSubdomains;" always;
 add_header X-Frame-Options "SAMEORIGIN" always;
 add_header X-XSS-Protection "1; mode=block" always;
 add_header X-Content-Type-Options "nosniff" always;