fix(orchestrator): align widget dropdown L&F with common (#1069)

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

Author: mareklibra

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormStepper.tsx

@@ -59,12 +59,13 @@ const OrchestratorFormStepper = ({
 }: {
   steps: OrchestratorFormStep[];
 }) => {
+  const { classes } = useStyles();
   const { activeStep, reviewStep } = useStepperContext();
   const stepsWithReview = [
     ...steps,
     { content: reviewStep, title: 'Review', key: 'review' },
   ];
-  const { classes } = useStyles();
+
   return (
     <>
       <Stepper

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 clsx from 'clsx';
 import { makeStyles } from 'tss-react/mui';
 import { Widget } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
@@ -35,7 +36,7 @@ import {
 import { UiProps } from '../uiPropTypes';
 import { ErrorText } from './ErrorText';
 
-const useStyles = makeStyles()(_ => ({
+const useStyles = makeStyles()(theme => ({
   menuItem: {
     // Workaround, we still have mix of Material 4 and 5 CSS in production, conflict with MuiButtonBase-root
     display: 'flex !important',
@@ -44,6 +45,9 @@ const useStyles = makeStyles()(_ => ({
     paddingBottom: '8px !important',
     paddingLeft: '16px !important',
   },
+  menuItemSelected: {
+    backgroundColor: `${theme.palette.action.selected} !important`,
+  },
 }));
 
 export const ActiveDropdown: Widget<
@@ -143,7 +147,10 @@ export const ActiveDropdown: Widget<
             key={values[idx]}
             value={values[idx]}
             data-testid={`${id}-menuitem-${values[idx]}`}
-            className={classes.menuItem}
+            className={clsx(
+              classes.menuItem,
+              value === values[idx] && classes.menuItemSelected,
+            )}
           >
             {itemLabel}
           </MenuItem>

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

@@ -15,7 +15,6 @@
  */
 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';

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

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
 import { JsonObject } from '@backstage/types';
 import { Widget } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
 
+import { Theme } from '@mui/material/styles';
+import { makeStyles } from 'tss-react/mui';
 import CircularProgress from '@mui/material/CircularProgress';
 import FormControl from '@mui/material/FormControl';
 import TextField from '@mui/material/TextField';
@@ -37,11 +40,18 @@ import {
 import { ErrorText } from './ErrorText';
 import { UiProps } from '../uiPropTypes';
 
+const useStyles = makeStyles()((theme: Theme) => ({
+  autocompleteOptionSelected: {
+    backgroundColor: `${theme.palette.action.selected} !important`,
+  },
+}));
+
 export const ActiveTextInput: Widget<
   JsonObject,
   JSONSchema7,
   OrchestratorFormContextProps
 > = props => {
+  const { classes } = useStyles();
   const templateUnitEvaluator = useTemplateUnitEvaluator();
 
   const { id, label, value, onChange, formContext } = props;
@@ -139,6 +149,21 @@ export const ActiveTextInput: Widget<
           value={value}
           onChange={(_, v) => handleChange(v)}
           renderInput={renderInput}
+          renderOption={(liProps, item, state) => {
+            return (
+              <li
+                {...liProps}
+                key={item}
+                data-testid={`${id}-autocomplete-option-${item}`}
+                className={clsx(
+                  state.selected && classes.autocompleteOptionSelected,
+                  liProps.className,
+                )}
+              >
+                {item}
+              </li>
+            );
+          }}
         />
       </FormControl>
     );