Merge branch 'main' into lp-layout-2

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 0.4.19
+* FI-2053: Fix inputs dialog overflow by @AlyssaWang in
+  https://github.com/inferno-framework/inferno-core/pull/382
+* FI-2038: Prevent modal close on edit by @AlyssaWang in
+  https://github.com/inferno-framework/inferno-core/pull/383
+* FI-2094: Improve tooltip a11y by @AlyssaWang in
+  https://github.com/inferno-framework/inferno-core/pull/386
+* FI-2035: Improve error handling for validator errors by @dehall in
+  https://github.com/inferno-framework/inferno-core/pull/379
+* FI-2070: Inferno Framework Documentation Advanced Test Features Information
+  Fix by @emichaud998 in
+  https://github.com/inferno-framework/inferno-core/pull/385
+* FI-2041: Custom suites with no ids now throw standard error by @alisawallace
+  in https://github.com/inferno-framework/inferno-core/pull/387
+* FI-2156: Dependabot updates by @Jammjammjamm in
+  https://github.com/inferno-framework/inferno-core/pull/390
+* FI-2086: fix errors on webpack shutdown by @alisawallace in
+  https://github.com/inferno-framework/inferno-core/pull/389
+
 # 0.4.18
 * Fix a bug which could prevent some test results from appearing until the page
   is reloaded.

Gemfile.lock

@@ -1,8 +1,8 @@
 PATH
   remote: .
   specs:
-    inferno_core (0.4.18)
-      activesupport (~> 6.1)
+    inferno_core (0.4.19)
+      activesupport (~> 6.1.7.5)
       base62-rb (= 0.3.1)
       blueprinter (= 0.25.2)
       dotenv (~> 2.7)
@@ -19,7 +19,7 @@ PATH
       oj (= 3.11.0)
       pry
       pry-byebug
-      puma (~> 5.3)
+      puma (~> 5.6.7)
       rake (~> 13.0)
       sequel (~> 5.42.0)
       sidekiq (~> 6.5.6)
@@ -30,7 +30,7 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.1.7.3)
+    activesupport (6.1.7.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -178,7 +178,7 @@ GEM
     kramdown (2.4.0)
       rexml
     method_source (1.0.0)
-    mime-types (3.5.0)
+    mime-types (3.5.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0808)
     minitest (5.18.0)
@@ -192,11 +192,11 @@ GEM
       mustermann (= 1.1.2)
     netrc (0.11.0)
     nio4r (2.5.9)
-    nokogiri (1.15.3-arm64-darwin)
+    nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-darwin)
+    nokogiri (1.15.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     oauth2 (1.4.11)
       faraday (>= 0.17.3, < 3.0)
@@ -217,7 +217,7 @@ GEM
       byebug (~> 11.0)
       pry (~> 0.13.0)
     public_suffix (4.0.7)
-    puma (5.6.6)
+    puma (5.6.7)
       nio4r (~> 2.0)
     racc (1.7.1)
     rack (2.2.6.4)
@@ -282,9 +282,9 @@ GEM
       simplecov (~> 0.19)
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.3)
-    sqlite3 (1.6.3-arm64-darwin)
-    sqlite3 (1.6.3-x86_64-darwin)
-    sqlite3 (1.6.3-x86_64-linux)
+    sqlite3 (1.6.5-arm64-darwin)
+    sqlite3 (1.6.5-x86_64-darwin)
+    sqlite3 (1.6.5-x86_64-linux)
     strings (0.2.1)
       strings-ansi (~> 0.2)
       unicode-display_width (>= 1.5, < 3.0)
@@ -325,6 +325,7 @@ PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
   x86_64-darwin-20
+  x86_64-darwin-22
   x86_64-linux
 
 DEPENDENCIES

Procfile

@@ -1,3 +1,3 @@
 web: bundle exec puma
 worker: bundle exec sidekiq -r ./worker.rb
-webpack: npm run start
+webpack: ./node_modules/.bin/webpack serve --config ./webpack.config.js --mode=development

client/src/components/App/App.tsx

@@ -1,13 +1,21 @@
-import { SnackbarProvider } from 'notistack';
 import React, { FC, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
+import { Theme } from '@mui/material/styles';
+import { SnackbarProvider } from 'notistack';
 import { getTestSuites } from '~/api/TestSuitesApi';
 import { router } from '~/components/App/Router';
 import { TestSuite } from '~/models/testSuiteModels';
 import { useAppStore } from '~/store/app';
 import { useTestSessionStore } from '~/store/testSession';
 import SnackbarCloseButton from 'components/_common/SnackbarCloseButton';
-import lightTheme from '~/styles/theme';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles<{ height: string }>()((theme: Theme, { height }) => ({
+  container: {
+    marginBottom: height,
+    zIndex: `${theme.zIndex.snackbar} !important`,
+  },
+}));
 
 const App: FC<unknown> = () => {
   const footerHeight = useAppStore((state) => state.footerHeight);
@@ -18,6 +26,10 @@ const App: FC<unknown> = () => {
   const setWindowIsSmall = useAppStore((state) => state.setWindowIsSmall);
   const testRunInProgress = useTestSessionStore((state) => state.testRunInProgress);
 
+  const { classes } = useStyles({
+    height: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`,
+  });
+
   // Update UI on window resize
   useEffect(() => {
     window.addEventListener('resize', handleResize);
@@ -57,9 +69,8 @@ const App: FC<unknown> = () => {
         horizontal: 'right',
       }}
       action={(id) => <SnackbarCloseButton id={id} />}
-      style={{
-        marginBottom: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`,
-        zIndex: lightTheme.zIndex.snackbar,
+      classes={{
+        containerAnchorOriginBottomRight: classes.container,
       }}
     >
       <RouterProvider router={router(testSuites)} />

client/src/components/Header/Header.tsx

@@ -8,6 +8,7 @@ import { useAppStore } from '~/store/app';
 import useStyles from './styles';
 import icon from '~/images/inferno_icon.png';
 import lightTheme from '~/styles/theme';
+import CustomTooltip from '../_common/CustomTooltip';
 
 export interface HeaderProps {
   suiteId?: string;
@@ -63,7 +64,13 @@ const Header: FC<HeaderProps> = ({
           </IconButton>
         ) : (
           <Link to="/" aria-label="Inferno Home">
-            <img src={getStaticPath(icon as string)} alt="Inferno logo" className={classes.logo} />
+            <CustomTooltip title="Return to Suite Selection">
+              <img
+                src={getStaticPath(icon as string)}
+                alt="Inferno logo"
+                className={classes.logo}
+              />
+            </CustomTooltip>
           </Link>
         )}
 

client/src/components/InputsModal/InputCheckboxGroup.tsx

@@ -108,6 +108,7 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
               control={
                 <Checkbox
                   size="small"
+                  color="secondary"
                   name={option.value}
                   checked={values[option.value as keyof CheckboxValues] || false}
                   onChange={handleChange}

client/src/components/InputsModal/InputOAuthCredentials.tsx

@@ -107,6 +107,7 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
           value={oAuthCredentials[field.name as keyof OAuthCredentials]}
           className={classes.inputField}
           variant="standard"
+          color="secondary"
           fullWidth
           onChange={(event) => {
             const value = event.target.value;

client/src/components/InputsModal/InputRadioGroup.tsx

@@ -66,7 +66,7 @@ const InputRadioGroup: FC<InputRadioGroupProps> = ({
           {requirement.options?.list_options?.map((option, i) => (
             <FormControlLabel
               value={option.value}
-              control={<Radio size="small" />}
+              control={<Radio size="small" color="secondary" />}
               label={option.label}
               key={`radio-button-${i}`}
             />

client/src/components/InputsModal/InputTextArea.tsx

@@ -25,6 +25,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap,
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
+        color="secondary"
         fullWidth
         label={<FieldLabel requirement={requirement} />}
         helperText={requirement.description}

client/src/components/InputsModal/InputTextField.tsx

@@ -30,6 +30,7 @@ const InputTextField: FC<InputTextFieldProps> = ({
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
+        color="secondary"
         fullWidth
         label={<FieldLabel requirement={requirement} />}
         helperText={requirement.description}

client/src/components/InputsModal/InputsModal.tsx

@@ -349,6 +349,7 @@ const InputsModal: FC<InputsModalProps> = ({
                   input: classes.serialInput,
                 },
               }}
+              color="secondary"
               fullWidth
               multiline
               data-testid="serial-input"
@@ -399,7 +400,7 @@ const InputsModal: FC<InputsModalProps> = ({
             color="secondary"
             data-testid="cancel-button"
             onClick={() => closeModal()}
-            sx={{ mr: 1 }}
+            sx={{ mr: 1, fontWeight: 'bold' }}
           >
             Cancel
           </Button>
@@ -409,6 +410,7 @@ const InputsModal: FC<InputsModalProps> = ({
             disableElevation
             onClick={submitClicked}
             disabled={missingRequiredInput || invalidInput}
+            sx={{ fontWeight: 'bold' }}
           >
             Submit
           </Button>

client/src/components/InputsModal/styles.tsx

@@ -13,7 +13,7 @@ export default makeStyles()((theme: Theme) => ({
       color: theme.palette.common.grayDarkest,
     },
     '& label.Mui-focused': {
-      color: theme.palette.common.orangeDarkest,
+      color: theme.palette.secondary.main,
     },
     '& label.Mui-disabled': {
       color: theme.palette.common.gray,
@@ -36,7 +36,7 @@ export default makeStyles()((theme: Theme) => ({
     margin: '8px 0',
     borderColor: theme.palette.common.grayLight,
     '&:focus-within': {
-      borderColor: theme.palette.primary.main,
+      borderColor: theme.palette.secondary.main,
     },
   },
   serialInput: {

client/src/components/PresetsSelector/PresetsSelector.tsx

@@ -109,7 +109,7 @@ const PresetsSelector: FC<PresetsModalProps> = ({ presets, testSessionId, getSes
         <DialogActions>
           <Button
             data-testid="preset-cancel-button"
-            sx={{ color: theme.palette.primary.dark }}
+            sx={{ color: theme.palette.primary.dark, fontWeight: 'bold' }}
             onClick={() => {
               setSelectedPreset(formerPreset);
               setModalVisible(false);
@@ -119,7 +119,7 @@ const PresetsSelector: FC<PresetsModalProps> = ({ presets, testSessionId, getSes
           </Button>
           <Button
             data-testid="preset-apply-button"
-            sx={{ color: theme.palette.primary.dark }}
+            sx={{ color: theme.palette.primary.dark, fontWeight: 'bold' }}
             onClick={() => {
               applyPresetToSession(presetTitleToIdMap[selectedPreset]);
               setFormerPreset(selectedPreset);

client/src/components/RequestDetailModal/RequestDetailModal.tsx

@@ -65,7 +65,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             {request?.url}
           </Box>
           {request?.url && (
-            <CustomTooltip open={copySuccess} title="Text copied!">
+            <CustomTooltip title={copySuccess ? 'Text copied!' : 'Copy text'}>
               <Box pr={1}>
                 <IconButton color="secondary" onClick={() => void copyTextClick(request.url)}>
                   <ContentCopy fontSize="inherit" />
@@ -121,6 +121,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             variant="contained"
             data-testid="cancel-button"
             onClick={hideModal}
+            sx={{ fontWeight: 'bold' }}
           >
             Close
           </Button>