fix(orchestrator): various fixes for mixed v4 and v5 material UI (#989)

* fix(orchestrator):various fixes for mixed v4 and v5 material UI

Signed-off-by: Marek Libra <marek.libra@gmail.com>

* yarn.lock

---------

Signed-off-by: Marek Libra <marek.libra@gmail.com>

Author: mareklibra

workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json

@@ -61,6 +61,7 @@
     "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^",
     "@rjsf/material-ui": "^5.21.2",
     "@rjsf/utils": "^5.21.2",
+    "clsx": "^2.1.1",
     "json-schema": "^0.4.0",
     "jsonata": "^2.0.6",
     "lodash": "^4.17.21",

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/index.ts

@@ -13,13 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
 
 export {
   orchestratorFormWidgetsPlugin,

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveDropdown.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
 import { Widget } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';
@@ -34,11 +35,23 @@ import {
 import { UiProps } from '../uiPropTypes';
 import { ErrorText } from './ErrorText';
 
+const useStyles = makeStyles()(_ => ({
+  menuItem: {
+    // Workaround, we still have mix of Material 4 and 5 CSS in production, conflict with MuiButtonBase-root
+    display: 'flex !important',
+    justifyContent: 'flex-start !important',
+    paddingTop: '8px !important',
+    paddingBottom: '8px !important',
+    paddingLeft: '16px !important',
+  },
+}));
+
 export const ActiveDropdown: Widget<
   JsonObject,
   JSONSchema7,
   OrchestratorFormContextProps
 > = props => {
+  const { classes } = useStyles();
   const templateUnitEvaluator = useTemplateUnitEvaluator();
 
   const { id, label, value, onChange, formContext } = props;
@@ -130,6 +143,7 @@ export const ActiveDropdown: Widget<
             key={values[idx]}
             value={values[idx]}
             data-testid={`${id}-menuitem-${values[idx]}`}
+            className={classes.menuItem}
           >
             {itemLabel}
           </MenuItem>

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveMultiSelect.tsx

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 import React, { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
 
 import { makeStyles } from 'tss-react/mui';
+import { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Autocomplete, { AutocompleteValue } from '@mui/material/Autocomplete';
 import FormControl from '@mui/material/FormControl';
@@ -37,14 +39,15 @@ import {
 import { UiProps } from '../uiPropTypes';
 import { ErrorText } from './ErrorText';
 
-const useStyles = makeStyles()(_ => ({
-  chipBox: {
-    '& > div': {
-      // not referencing the chip's <div> directly to avoid interference with getTagProps()
-      'margin-bottom': 0,
+const useStyles = makeStyles()(
+  (theme: Theme & { rhdh?: { cardBorderColor: string } }) => ({
+    chip: {
+      // Workaround, we still have mix of Material 4 and 5 CSS in production, conflict with MuiButtonBase-root
+      borderRadius: `16px !important` /* theme.shape.borderRadius is ugly 8px */,
+      outline: `1px solid ${theme.rhdh?.cardBorderColor ?? '#A3A3A3'} !important`,
     },
-  },
-}));
+  }),
+);
 
 export const ActiveMultiSelect: Widget<
   JsonObject,
@@ -147,16 +150,20 @@ export const ActiveMultiSelect: Widget<
               />
             )}
             renderTags={(values, getTagProps) =>
-              values.map((item, index) => (
-                <Box key={item} title={item} className={classes.chipBox}>
-                  <Chip
-                    data-testid={`${id}-chip-${item}`}
-                    variant="outlined"
-                    label={item}
-                    {...getTagProps({ index })}
-                  />
-                </Box>
-              ))
+              values.map((item, index) => {
+                const tagProps = getTagProps({ index });
+                tagProps.className = clsx(tagProps.className, classes.chip);
+                return (
+                  <Box key={item} title={item}>
+                    <Chip
+                      data-testid={`${id}-chip-${item}`}
+                      variant="outlined"
+                      label={item}
+                      {...tagProps}
+                    />
+                  </Box>
+                );
+              })
             }
           />
         </FormControl>

workspaces/orchestrator/plugins/orchestrator/src/components/InfoDialog.tsx

@@ -40,9 +40,7 @@ export type ParentComponentRef = HTMLDivElement;
 
 const useStyles = makeStyles()(theme => ({
   closeBtn: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
+    flexShrink: 0,
   },
   dialogActions: {
     justifyContent: 'flex-start',
@@ -51,7 +49,9 @@ const useStyles = makeStyles()(theme => ({
   },
   titleContainer: {
     display: 'flex',
-    alignItems: 'center',
+  },
+  title: {
+    width: '100%',
   },
   titleIcon: {
     marginRight: theme.spacing(1),
@@ -86,9 +86,11 @@ export const RefForwardingInfoDialog: ForwardRefRenderFunction<
       <DialogTitle>
         <Box className={classes.titleContainer}>
           {titleIcon && <Box className={classes.titleIcon}>{titleIcon}</Box>}
-          <Typography variant="h4">
+
+          <Typography variant="h4" className={classes.title}>
             <b>{title}</b>
           </Typography>
+
           <IconButton
             className={classes.closeBtn}
             aria-label="close"

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowInstancePageContent.tsx

@@ -71,6 +71,9 @@ const useStyles = makeStyles()(() => ({
   topRowCard: {
     height: '24rem',
     overflow: 'auto',
+    '& > div:nth-child(2)': {
+      overflow: 'auto',
+    },
   },
   bottomRowCard: {
     height: '42rem',

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowRunDetails.tsx

@@ -23,7 +23,6 @@ import { AboutField } from '@backstage/plugin-catalog';
 
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from 'tss-react/mui';
 
 import {
   capitalize,
@@ -44,17 +43,10 @@ type WorkflowDetailsCardProps = {
   details: WorkflowRunDetail;
 };
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    overflowY: 'auto',
-  },
-}));
-
 export const WorkflowRunDetails: React.FC<WorkflowDetailsCardProps> = ({
   assessedBy,
   details,
 }) => {
-  const { classes } = useStyles();
   const orchestratorApi = useApi(orchestratorApiRef);
   const { value, loading, error } =
     useAsync(async (): Promise<WorkflowOverviewDTO> => {
@@ -67,7 +59,7 @@ export const WorkflowRunDetails: React.FC<WorkflowDetailsCardProps> = ({
   const workflowPageLink = useRouteRef(workflowRouteRef);
 
   return (
-    <Grid container className={classes.root} alignContent="flex-start">
+    <Grid container alignContent="flex-start">
       <Grid item md={7} key="Workflow">
         <AboutField label="Workflow">
           <Link to={workflowPageLink({ workflowId: details.workflowId })}>

workspaces/orchestrator/plugins/orchestrator/src/index.ts

@@ -14,13 +14,5 @@
  * limitations under the License.
  */
 
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export { orchestratorPlugin, OrchestratorPage } from './plugin';
 export { default as OrchestratorIcon } from './components/OrchestratorIcon';

workspaces/orchestrator/yarn.lock

@@ -11534,6 +11534,7 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.0.0
+    clsx: ^2.1.1
     express: ^5.1.0
     json-schema: ^0.4.0
     jsonata: ^2.0.6