@backstage-community/plugin-rbac 1.33.6 → 1.35.0

package/dist/components/ConditionalAccess/ConditionsFormRowFields.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionsFormRowFields.esm.js","sources":["../../../src/components/ConditionalAccess/ConditionsFormRowFields.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { PermissionCondition } from '@backstage/plugin-permission-common';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport { Theme, useTheme } from '@mui/material/styles';\nimport TextField from '@mui/material/TextField';\nimport { makeStyles } from '@mui/styles';\nimport Form from '@rjsf/mui';\nimport {\n  RegistryFieldsType,\n  RJSFSchema,\n  RJSFValidationError,\n  UiSchema,\n} from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport {\n  getNestedRuleErrors,\n  getSimpleRuleErrors,\n  isSimpleRule,\n  setErrorMessage,\n} from '../../utils/conditional-access-utils';\nimport { criterias } from './const';\nimport { CustomArrayField } from './CustomArrayField';\nimport { RulesDropdownOption } from './RulesDropdownOption';\nimport {\n  AccessConditionsErrors,\n  ComplexErrors,\n  Condition,\n  ConditionsData,\n  NestedCriteriaErrors,\n  RulesData,\n} from './types';\n\ntype ConditionFormRowFieldsProps = {\n  oldCondition: Condition;\n  index?: number;\n  criteria: string;\n  onRuleChange: (newCondition: ConditionsData) => void;\n  conditionRow: ConditionsData | Condition;\n  conditionRulesData?: RulesData;\n  setErrors: React.Dispatch<\n    React.SetStateAction<AccessConditionsErrors | undefined>\n  >;\n  optionDisabled?: (ruleOption: string) => boolean;\n  setRemoveAllClicked: React.Dispatch<React.SetStateAction<boolean>>;\n  nestedConditionRow?: Condition[];\n  nestedConditionCriteria?: string;\n  nestedConditionIndex?: number;\n  nestedConditionRuleIndex?: number;\n  updateRules?: (newCondition: Condition[] | Condition) => void;\n};\n\ninterface StyleProps {\n  isNotSimpleCondition: boolean;\n}\n\nconst makeConditionsFormRowFieldsStyles = makeStyles<Theme, StyleProps>(() => ({\n  inputFieldContainer: {\n    display: 'flex',\n    flexFlow: 'row',\n    gap: '10px',\n    flexGrow: 1,\n    margin: ({ isNotSimpleCondition }) =>\n      isNotSimpleCondition ? '-1.5rem 0 0 1.85rem' : '0',\n  },\n}));\n\nexport const getTextFieldStyles = (theme: Theme) => ({\n  '& div[class*=\"MuiInputBase-root\"]': {\n    backgroundColor: theme.palette.background.paper,\n  },\n  '& span': {\n    color: theme.palette.textSubtle,\n  },\n  '& input': {\n    color: theme.palette.textContrast,\n  },\n  '& fieldset.MuiOutlinedInput-notchedOutline': {\n    borderColor: theme.palette.grey[500],\n  },\n  '& div.MuiOutlinedInput-root': {\n    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.primary.light,\n    },\n    '&.Mui-error .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.status.error,\n      '&:hover': {\n        borderColor: theme.palette.status.error,\n      },\n    },\n  },\n  '& label.MuiFormLabel-root.Mui-focused': {\n    color: theme.palette.primary.light,\n  },\n  '& label.MuiFormLabel-root.Mui-error': {\n    color: theme.palette.status.error,\n  },\n  '& div.MuiOutlinedInput-root:hover fieldset': {\n    borderColor:\n      theme.palette.mode === 'dark' ? theme.palette.textContrast : 'unset',\n  },\n  '& label': {\n    color: theme.palette.textSubtle,\n  },\n});\n\nexport const ConditionsFormRowFields = ({\n  oldCondition,\n  index,\n  criteria,\n  onRuleChange,\n  conditionRow,\n  conditionRulesData,\n  setErrors,\n  optionDisabled,\n  setRemoveAllClicked,\n  nestedConditionRow,\n  nestedConditionCriteria,\n  nestedConditionIndex,\n  nestedConditionRuleIndex,\n  updateRules,\n}: ConditionFormRowFieldsProps) => {\n  const isNotSimpleCondition =\n    criteria === criterias.not && !nestedConditionCriteria;\n  const theme = useTheme();\n  const classes = makeConditionsFormRowFieldsStyles({\n    isNotSimpleCondition,\n  });\n\n  const rules = conditionRulesData?.rules ?? [];\n  const paramsSchema =\n    conditionRulesData?.[(oldCondition as PermissionCondition).rule]?.schema;\n\n  const schema: RJSFSchema = paramsSchema;\n\n  const uiSchema: UiSchema = {\n    'ui:submitButtonOptions': {\n      norender: true,\n    },\n    'ui:classNames': `{\n      '& div[class*=\"MuiInputBase-root\"]': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& span': {\n        color: theme.palette.textSubtle,\n      },\n      '& input': {\n        color: theme.palette.textContrast,\n      },\n      '& fieldset.MuiOutlinedInput-notchedOutline': {\n        borderColor: theme.palette.grey[500],\n      },\n      '& div.MuiOutlinedInput-root': {\n        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n          borderColor: theme.palette.primary.light,\n        },\n        '&.Mui-error .MuiOutlinedInput-notchedOutline': {\n          borderColor: theme.palette.status.error,\n          '&:hover': {\n            borderColor: theme.palette.status.error,\n          },\n        },\n      },\n      '& label.MuiFormLabel-root.Mui-focused': {\n        color: theme.palette.primary.light,\n      },\n      '& label.MuiFormLabel-root.Mui-error': {\n        color: theme.palette.status.error,\n      },\n      '& div.MuiOutlinedInput-root:hover fieldset': {\n        borderColor:\n          theme.palette.mode === 'dark' ? theme.palette.textContrast : 'unset',\n      },\n      '& label': {\n        color: theme.palette.textSubtle,\n      },\n    }`,\n    'ui:field': 'array',\n  };\n\n  const customFields: RegistryFieldsType = { ArrayField: CustomArrayField };\n\n  const handleConditionChange = (newCondition: PermissionCondition) => {\n    setRemoveAllClicked(false);\n    switch (criteria) {\n      case criterias.condition: {\n        onRuleChange({ condition: newCondition });\n        break;\n      }\n      case criterias.allOf: {\n        const updatedCriteria = (conditionRow as ConditionsData).allOf ?? [];\n        updatedCriteria[index ?? 0] = newCondition;\n        onRuleChange({ allOf: updatedCriteria });\n        break;\n      }\n      case criterias.anyOf: {\n        const updatedCriteria = (conditionRow as ConditionsData).anyOf ?? [];\n        updatedCriteria[index ?? 0] = newCondition;\n        onRuleChange({ anyOf: updatedCriteria });\n        break;\n      }\n      case criterias.not: {\n        onRuleChange({ not: newCondition });\n        break;\n      }\n      default:\n    }\n  };\n\n  const handleNestedConditionChange = (newCondition: PermissionCondition) => {\n    if (\n      !nestedConditionRow ||\n      !nestedConditionCriteria ||\n      nestedConditionIndex === undefined ||\n      !updateRules\n    ) {\n      return;\n    }\n    const updatedNestedConditionRow: Condition[] = nestedConditionRow.map(\n      (c, i) => {\n        if (i === nestedConditionIndex) {\n          if (nestedConditionCriteria === criterias.not) {\n            return {\n              [nestedConditionCriteria]: newCondition,\n            };\n          }\n          const updatedNestedConditionRules = (\n            (c[\n              nestedConditionCriteria as keyof Condition\n            ] as PermissionCondition[]) || []\n          ).map((rule, rindex) => {\n            return rindex === nestedConditionRuleIndex ? newCondition : rule;\n          });\n\n          return {\n            [nestedConditionCriteria]: updatedNestedConditionRules,\n          };\n        }\n        return c;\n      },\n    );\n\n    updateRules(\n      criteria === criterias.not\n        ? updatedNestedConditionRow[0]\n        : updatedNestedConditionRow,\n    );\n  };\n\n  const handleTransformErrors = (errors: RJSFValidationError[]) => {\n    // criteria: condition or not simple-condition\n    if (\n      criteria === criterias.condition ||\n      (criteria === criterias.not &&\n        isSimpleRule(conditionRow[criteria as keyof Condition]))\n    ) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        updatedErrors[criteria] = setErrorMessage(errors);\n\n        return updatedErrors;\n      });\n    }\n\n    // criteria: not nested-condition\n    if (\n      criteria === criterias.not &&\n      nestedConditionCriteria &&\n      !isSimpleRule(conditionRow[criteria as keyof Condition])\n    ) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        const nestedErrors = (updatedErrors[criteria] as ComplexErrors)[\n          nestedConditionCriteria as keyof Condition\n        ] as NestedCriteriaErrors;\n\n        // nestedCriteria: allOf or anyOf\n        if (\n          Array.isArray(nestedErrors) &&\n          nestedConditionRuleIndex !== undefined\n        ) {\n          nestedErrors[nestedConditionRuleIndex] = setErrorMessage(errors);\n        } else {\n          // nestedCriteria: not\n          updatedErrors[criteria] = {\n            [nestedConditionCriteria]: setErrorMessage(errors),\n          };\n        }\n\n        return updatedErrors;\n      });\n    }\n\n    // criteria: allOf or anyOf\n    if (criteria === criterias.allOf || criteria === criterias.anyOf) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        const simpleRuleErrors = getSimpleRuleErrors(\n          updatedErrors[\n            criteria as keyof AccessConditionsErrors\n          ] as ComplexErrors[],\n        );\n        if (\n          Array.isArray(simpleRuleErrors) &&\n          simpleRuleErrors.length > 0 &&\n          index !== undefined\n        ) {\n          simpleRuleErrors[index] = setErrorMessage(errors);\n        }\n\n        const nestedRuleErrors = getNestedRuleErrors(\n          updatedErrors[\n            criteria as keyof AccessConditionsErrors\n          ] as ComplexErrors[],\n        );\n\n        // nestedCriteria: allOf or anyOf\n        if (\n          nestedConditionCriteria &&\n          nestedConditionIndex !== undefined &&\n          nestedConditionRuleIndex !== undefined\n        ) {\n          const nestedConditionRuleList =\n            nestedRuleErrors[nestedConditionIndex][nestedConditionCriteria];\n\n          if (Array.isArray(nestedConditionRuleList)) {\n            nestedConditionRuleList[nestedConditionRuleIndex] =\n              setErrorMessage(errors);\n          }\n        }\n\n        // nestedCriteria: not\n        if (\n          Array.isArray(nestedRuleErrors) &&\n          nestedRuleErrors.length > 0 &&\n          nestedConditionCriteria === criterias.not &&\n          nestedConditionIndex !== undefined\n        ) {\n          nestedRuleErrors[nestedConditionIndex][nestedConditionCriteria] =\n            setErrorMessage(errors);\n        }\n\n        updatedErrors[criteria] = [...simpleRuleErrors, ...nestedRuleErrors];\n        return updatedErrors;\n      });\n    }\n\n    return errors;\n  };\n\n  const onConditionChange = (newCondition: PermissionCondition) => {\n    if (nestedConditionRow) {\n      handleNestedConditionChange(newCondition);\n    } else {\n      handleConditionChange(newCondition);\n    }\n  };\n\n  return (\n    <Box className={classes.inputFieldContainer}>\n      <Autocomplete\n        style={{ width: '50%', marginTop: '26px' }}\n        sx={getTextFieldStyles(theme)}\n        options={rules ?? []}\n        value={(oldCondition as PermissionCondition)?.rule || null}\n        getOptionDisabled={option =>\n          optionDisabled ? optionDisabled(option) : false\n        }\n        onChange={(_event, ruleVal?: string | null) =>\n          onConditionChange({\n            ...oldCondition,\n            rule: ruleVal ?? '',\n            params: {},\n          } as PermissionCondition)\n        }\n        renderOption={(props, option) => (\n          <RulesDropdownOption\n            props={props}\n            label={option ?? ''}\n            rulesData={conditionRulesData}\n          />\n        )}\n        renderInput={(params: any) => (\n          <TextField\n            {...params}\n            label=\"Rule\"\n            variant=\"outlined\"\n            placeholder=\"Select a rule\"\n            required\n          />\n        )}\n      />\n      <Box style={{ width: '50%' }}>\n        {schema ? (\n          <Form\n            schema={paramsSchema}\n            formData={(oldCondition as PermissionCondition)?.params || {}}\n            validator={validator}\n            uiSchema={uiSchema}\n            fields={customFields}\n            onChange={data =>\n              onConditionChange({\n                ...oldCondition,\n                params: data.formData || {},\n              } as PermissionCondition)\n            }\n            transformErrors={handleTransformErrors}\n            showErrorList={false}\n            liveValidate\n          />\n        ) : (\n          <TextField\n            style={{ width: '100%', marginTop: '26px' }}\n            sx={getTextFieldStyles(theme)}\n            disabled\n            label=\"string, string\"\n            required\n            variant=\"outlined\"\n          />\n        )}\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0EA,MAAM,iCAAA,GAAoC,WAA8B,OAAO;AAAA,EAC7E,mBAAqB,EAAA;AAAA,IACnB,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,KAAA;AAAA,IACV,GAAK,EAAA,MAAA;AAAA,IACL,QAAU,EAAA,CAAA;AAAA,IACV,QAAQ,CAAC,EAAE,oBAAqB,EAAA,KAC9B,uBAAuB,qBAAwB,GAAA;AAAA;AAErD,CAAE,CAAA,CAAA;AAEW,MAAA,kBAAA,GAAqB,CAAC,KAAkB,MAAA;AAAA,EACnD,mCAAqC,EAAA;AAAA,IACnC,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA;AAAA,GAC5C;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAA,EAAO,MAAM,OAAQ,CAAA;AAAA,GACvB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,MAAM,OAAQ,CAAA;AAAA,GACvB;AAAA,EACA,4CAA8C,EAAA;AAAA,IAC5C,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,GAAG;AAAA,GACrC;AAAA,EACA,6BAA+B,EAAA;AAAA,IAC7B,gDAAkD,EAAA;AAAA,MAChD,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA,KACrC;AAAA,IACA,8CAAgD,EAAA;AAAA,MAC9C,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,MAClC,SAAW,EAAA;AAAA,QACT,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AACpC;AACF,GACF;AAAA,EACA,uCAAyC,EAAA;AAAA,IACvC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA,GAC/B;AAAA,EACA,qCAAuC,EAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA,GAC9B;AAAA,EACA,4CAA8C,EAAA;AAAA,IAC5C,aACE,KAAM,CAAA,OAAA,CAAQ,SAAS,MAAS,GAAA,KAAA,CAAM,QAAQ,YAAe,GAAA;AAAA,GACjE;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,MAAM,OAAQ,CAAA;AAAA;AAEzB,CAAA;AAEO,MAAM,0BAA0B,CAAC;AAAA,EACtC,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA;AAAA,EACA,uBAAA;AAAA,EACA,oBAAA;AAAA,EACA,wBAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,oBACJ,GAAA,QAAA,KAAa,SAAU,CAAA,GAAA,IAAO,CAAC,uBAAA;AACjC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,UAAU,iCAAkC,CAAA;AAAA,IAChD;AAAA,GACD,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,kBAAoB,EAAA,KAAA,IAAS,EAAC;AAC5C,EAAA,MAAM,YACJ,GAAA,kBAAA,GAAsB,YAAqC,CAAA,IAAI,CAAG,EAAA,MAAA;AAEpE,EAAA,MAAM,MAAqB,GAAA,YAAA;AAE3B,EAAA,MAAM,QAAqB,GAAA;AAAA,IACzB,wBAA0B,EAAA;AAAA,MACxB,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,eAAiB,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAA,CAAA;AAAA,IAsCjB,UAAY,EAAA;AAAA,GACd;AAEA,EAAM,MAAA,YAAA,GAAmC,EAAE,UAAA,EAAY,gBAAiB,EAAA;AAExE,EAAM,MAAA,qBAAA,GAAwB,CAAC,YAAsC,KAAA;AACnE,IAAA,mBAAA,CAAoB,KAAK,CAAA;AACzB,IAAA,QAAQ,QAAU;AAAA,MAChB,KAAK,UAAU,SAAW,EAAA;AACxB,QAAa,YAAA,CAAA,EAAE,SAAW,EAAA,YAAA,EAAc,CAAA;AACxC,QAAA;AAAA;AACF,MACA,KAAK,UAAU,KAAO,EAAA;AACpB,QAAM,MAAA,eAAA,GAAmB,YAAgC,CAAA,KAAA,IAAS,EAAC;AACnE,QAAgB,eAAA,CAAA,KAAA,IAAS,CAAC,CAAI,GAAA,YAAA;AAC9B,QAAa,YAAA,CAAA,EAAE,KAAO,EAAA,eAAA,EAAiB,CAAA;AACvC,QAAA;AAAA;AACF,MACA,KAAK,UAAU,KAAO,EAAA;AACpB,QAAM,MAAA,eAAA,GAAmB,YAAgC,CAAA,KAAA,IAAS,EAAC;AACnE,QAAgB,eAAA,CAAA,KAAA,IAAS,CAAC,CAAI,GAAA,YAAA;AAC9B,QAAa,YAAA,CAAA,EAAE,KAAO,EAAA,eAAA,EAAiB,CAAA;AACvC,QAAA;AAAA;AACF,MACA,KAAK,UAAU,GAAK,EAAA;AAClB,QAAa,YAAA,CAAA,EAAE,GAAK,EAAA,YAAA,EAAc,CAAA;AAClC,QAAA;AAAA;AAEF;AACF,GACF;AAEA,EAAM,MAAA,2BAAA,GAA8B,CAAC,YAAsC,KAAA;AACzE,IAAA,IACE,CAAC,kBACD,IAAA,CAAC,2BACD,oBAAyB,KAAA,KAAA,CAAA,IACzB,CAAC,WACD,EAAA;AACA,MAAA;AAAA;AAEF,IAAA,MAAM,4BAAyC,kBAAmB,CAAA,GAAA;AAAA,MAChE,CAAC,GAAG,CAAM,KAAA;AACR,QAAA,IAAI,MAAM,oBAAsB,EAAA;AAC9B,UAAI,IAAA,uBAAA,KAA4B,UAAU,GAAK,EAAA;AAC7C,YAAO,OAAA;AAAA,cACL,CAAC,uBAAuB,GAAG;AAAA,aAC7B;AAAA;AAEF,UAAM,MAAA,2BAAA,GAAA,CACH,EACC,uBACF,CAAA,IAA+B,EAC/B,EAAA,GAAA,CAAI,CAAC,IAAA,EAAM,MAAW,KAAA;AACtB,YAAO,OAAA,MAAA,KAAW,2BAA2B,YAAe,GAAA,IAAA;AAAA,WAC7D,CAAA;AAED,UAAO,OAAA;AAAA,YACL,CAAC,uBAAuB,GAAG;AAAA,WAC7B;AAAA;AAEF,QAAO,OAAA,CAAA;AAAA;AACT,KACF;AAEA,IAAA,WAAA;AAAA,MACE,QAAa,KAAA,SAAA,CAAU,GACnB,GAAA,yBAAA,CAA0B,CAAC,CAC3B,GAAA;AAAA,KACN;AAAA,GACF;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,MAAkC,KAAA;AAE/D,IACE,IAAA,QAAA,KAAa,SAAU,CAAA,SAAA,IACtB,QAAa,KAAA,SAAA,CAAU,OACtB,YAAa,CAAA,YAAA,CAAa,QAA2B,CAAC,CACxD,EAAA;AACA,MAAA,SAAA,CAAU,CAAc,UAAA,KAAA;AACtB,QAAM,MAAA,aAAA,GAAgB,EAAE,GAAG,UAAW,EAAA;AACtC,QAAc,aAAA,CAAA,QAAQ,CAAI,GAAA,eAAA,CAAgB,MAAM,CAAA;AAEhD,QAAO,OAAA,aAAA;AAAA,OACR,CAAA;AAAA;AAIH,IACE,IAAA,QAAA,KAAa,UAAU,GACvB,IAAA,uBAAA,IACA,CAAC,YAAa,CAAA,YAAA,CAAa,QAA2B,CAAC,CACvD,EAAA;AACA,MAAA,SAAA,CAAU,CAAc,UAAA,KAAA;AACtB,QAAM,MAAA,aAAA,GAAgB,EAAE,GAAG,UAAW,EAAA;AACtC,QAAA,MAAM,YAAgB,GAAA,aAAA,CAAc,QAAQ,CAAA,CAC1C,uBACF,CAAA;AAGA,QAAA,IACE,KAAM,CAAA,OAAA,CAAQ,YAAY,CAAA,IAC1B,6BAA6B,KAC7B,CAAA,EAAA;AACA,UAAa,YAAA,CAAA,wBAAwB,CAAI,GAAA,eAAA,CAAgB,MAAM,CAAA;AAAA,SAC1D,MAAA;AAEL,UAAA,aAAA,CAAc,QAAQ,CAAI,GAAA;AAAA,YACxB,CAAC,uBAAuB,GAAG,eAAA,CAAgB,MAAM;AAAA,WACnD;AAAA;AAGF,QAAO,OAAA,aAAA;AAAA,OACR,CAAA;AAAA;AAIH,IAAA,IAAI,QAAa,KAAA,SAAA,CAAU,KAAS,IAAA,QAAA,KAAa,UAAU,KAAO,EAAA;AAChE,MAAA,SAAA,CAAU,CAAc,UAAA,KAAA;AACtB,QAAM,MAAA,aAAA,GAAgB,EAAE,GAAG,UAAW,EAAA;AACtC,QAAA,MAAM,gBAAmB,GAAA,mBAAA;AAAA,UACvB,cACE,QACF;AAAA,SACF;AACA,QACE,IAAA,KAAA,CAAM,QAAQ,gBAAgB,CAAA,IAC9B,iBAAiB,MAAS,GAAA,CAAA,IAC1B,UAAU,KACV,CAAA,EAAA;AACA,UAAiB,gBAAA,CAAA,KAAK,CAAI,GAAA,eAAA,CAAgB,MAAM,CAAA;AAAA;AAGlD,QAAA,MAAM,gBAAmB,GAAA,mBAAA;AAAA,UACvB,cACE,QACF;AAAA,SACF;AAGA,QAAA,IACE,uBACA,IAAA,oBAAA,KAAyB,KACzB,CAAA,IAAA,wBAAA,KAA6B,KAC7B,CAAA,EAAA;AACA,UAAA,MAAM,uBACJ,GAAA,gBAAA,CAAiB,oBAAoB,CAAA,CAAE,uBAAuB,CAAA;AAEhE,UAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,uBAAuB,CAAG,EAAA;AAC1C,YAAwB,uBAAA,CAAA,wBAAwB,CAC9C,GAAA,eAAA,CAAgB,MAAM,CAAA;AAAA;AAC1B;AAIF,QACE,IAAA,KAAA,CAAM,OAAQ,CAAA,gBAAgB,CAC9B,IAAA,gBAAA,CAAiB,MAAS,GAAA,CAAA,IAC1B,uBAA4B,KAAA,SAAA,CAAU,GACtC,IAAA,oBAAA,KAAyB,KACzB,CAAA,EAAA;AACA,UAAA,gBAAA,CAAiB,oBAAoB,CAAA,CAAE,uBAAuB,CAAA,GAC5D,gBAAgB,MAAM,CAAA;AAAA;AAG1B,QAAA,aAAA,CAAc,QAAQ,CAAI,GAAA,CAAC,GAAG,gBAAA,EAAkB,GAAG,gBAAgB,CAAA;AACnE,QAAO,OAAA,aAAA;AAAA,OACR,CAAA;AAAA;AAGH,IAAO,OAAA,MAAA;AAAA,GACT;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,YAAsC,KAAA;AAC/D,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,2BAAA,CAA4B,YAAY,CAAA;AAAA,KACnC,MAAA;AACL,MAAA,qBAAA,CAAsB,YAAY,CAAA;AAAA;AACpC,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,mBACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,EAAE,KAAO,EAAA,KAAA,EAAO,WAAW,MAAO,EAAA;AAAA,MACzC,EAAA,EAAI,mBAAmB,KAAK,CAAA;AAAA,MAC5B,OAAA,EAAS,SAAS,EAAC;AAAA,MACnB,KAAA,EAAQ,cAAsC,IAAQ,IAAA,IAAA;AAAA,MACtD,iBAAmB,EAAA,CAAA,MAAA,KACjB,cAAiB,GAAA,cAAA,CAAe,MAAM,CAAI,GAAA,KAAA;AAAA,MAE5C,QAAU,EAAA,CAAC,MAAQ,EAAA,OAAA,KACjB,iBAAkB,CAAA;AAAA,QAChB,GAAG,YAAA;AAAA,QACH,MAAM,OAAW,IAAA,EAAA;AAAA,QACjB,QAAQ;AAAC,OACa,CAAA;AAAA,MAE1B,YAAA,EAAc,CAAC,KAAA,EAAO,MACpB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,OAAO,MAAU,IAAA,EAAA;AAAA,UACjB,SAAW,EAAA;AAAA;AAAA,OACb;AAAA,MAEF,WAAA,EAAa,CAAC,MACZ,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACE,GAAG,MAAA;AAAA,UACJ,KAAM,EAAA,MAAA;AAAA,UACN,OAAQ,EAAA,UAAA;AAAA,UACR,WAAY,EAAA,eAAA;AAAA,UACZ,QAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GAEJ,sCACC,GAAI,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,MAClB,MACC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,YAAA;AAAA,MACR,QAAA,EAAW,YAAsC,EAAA,MAAA,IAAU,EAAC;AAAA,MAC5D,SAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAQ,EAAA,YAAA;AAAA,MACR,QAAA,EAAU,UACR,iBAAkB,CAAA;AAAA,QAChB,GAAG,YAAA;AAAA,QACH,MAAA,EAAQ,IAAK,CAAA,QAAA,IAAY;AAAC,OACJ,CAAA;AAAA,MAE1B,eAAiB,EAAA,qBAAA;AAAA,MACjB,aAAe,EAAA,KAAA;AAAA,MACf,YAAY,EAAA;AAAA;AAAA,GAGd,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,WAAW,MAAO,EAAA;AAAA,MAC1C,EAAA,EAAI,mBAAmB,KAAK,CAAA;AAAA,MAC5B,QAAQ,EAAA,IAAA;AAAA,MACR,KAAM,EAAA,gBAAA;AAAA,MACN,QAAQ,EAAA,IAAA;AAAA,MACR,OAAQ,EAAA;AAAA;AAAA,GAGd,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConditionsFormRowFields.esm.js","sources":["../../../src/components/ConditionalAccess/ConditionsFormRowFields.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { PermissionCondition } from '@backstage/plugin-permission-common';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport { Theme, useTheme } from '@mui/material/styles';\nimport TextField from '@mui/material/TextField';\nimport { makeStyles } from '@mui/styles';\nimport Form from '@rjsf/mui';\nimport {\n  RegistryFieldsType,\n  RJSFSchema,\n  RJSFValidationError,\n  UiSchema,\n} from '@rjsf/utils';\nimport validator from '@rjsf/validator-ajv8';\n\nimport {\n  getNestedRuleErrors,\n  getSimpleRuleErrors,\n  isSimpleRule,\n  setErrorMessage,\n} from '../../utils/conditional-access-utils';\nimport { criterias } from './const';\nimport { CustomArrayField } from './CustomArrayField';\nimport { RulesDropdownOption } from './RulesDropdownOption';\nimport {\n  AccessConditionsErrors,\n  ComplexErrors,\n  Condition,\n  ConditionsData,\n  NestedCriteriaErrors,\n  RulesData,\n} from './types';\n\ntype ConditionFormRowFieldsProps = {\n  oldCondition: Condition;\n  index?: number;\n  criteria: string;\n  onRuleChange: (newCondition: ConditionsData) => void;\n  conditionRow: ConditionsData | Condition;\n  conditionRulesData?: RulesData;\n  setErrors: React.Dispatch<\n    React.SetStateAction<AccessConditionsErrors | undefined>\n  >;\n  optionDisabled?: (ruleOption: string) => boolean;\n  setRemoveAllClicked: React.Dispatch<React.SetStateAction<boolean>>;\n  nestedConditionRow?: Condition[];\n  nestedConditionCriteria?: string;\n  nestedConditionIndex?: number;\n  nestedConditionRuleIndex?: number;\n  updateRules?: (newCondition: Condition[] | Condition) => void;\n};\n\ninterface StyleProps {\n  isNotSimpleCondition: boolean;\n}\n\nconst makeConditionsFormRowFieldsStyles = makeStyles<Theme, StyleProps>(() => ({\n  inputFieldContainer: {\n    display: 'flex',\n    flexFlow: 'row',\n    gap: '10px',\n    flexGrow: 1,\n    margin: ({ isNotSimpleCondition }) =>\n      isNotSimpleCondition ? '-1.5rem 0 0 1.85rem' : '0',\n  },\n}));\n\nexport const getTextFieldStyles = (theme: Theme) => ({\n  '& div[class*=\"MuiInputBase-root\"]': {\n    backgroundColor: theme.palette.background.paper,\n  },\n  '& span': {\n    color: theme.palette.textSubtle,\n  },\n  '& input': {\n    color: theme.palette.textContrast,\n  },\n  '& fieldset.MuiOutlinedInput-notchedOutline': {\n    borderColor: theme.palette.grey[500],\n  },\n  '& div.MuiOutlinedInput-root': {\n    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.primary.light,\n    },\n    '&.Mui-error .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.status.error,\n      '&:hover': {\n        borderColor: theme.palette.status.error,\n      },\n    },\n  },\n  '& label.MuiFormLabel-root.Mui-focused': {\n    color: theme.palette.primary.light,\n  },\n  '& label.MuiFormLabel-root.Mui-error': {\n    color: theme.palette.status.error,\n  },\n  '& div.MuiOutlinedInput-root:hover fieldset': {\n    borderColor:\n      theme.palette.mode === 'dark' ? theme.palette.textContrast : 'unset',\n  },\n  '& label': {\n    color: theme.palette.textSubtle,\n  },\n});\n\nexport const ConditionsFormRowFields = ({\n  oldCondition,\n  index,\n  criteria,\n  onRuleChange,\n  conditionRow,\n  conditionRulesData,\n  setErrors,\n  optionDisabled,\n  setRemoveAllClicked,\n  nestedConditionRow,\n  nestedConditionCriteria,\n  nestedConditionIndex,\n  nestedConditionRuleIndex,\n  updateRules,\n}: ConditionFormRowFieldsProps) => {\n  const isNotSimpleCondition =\n    criteria === criterias.not && !nestedConditionCriteria;\n  const theme = useTheme();\n  const classes = makeConditionsFormRowFieldsStyles({\n    isNotSimpleCondition,\n  });\n\n  const rules = conditionRulesData?.rules ?? [];\n  const paramsSchema =\n    conditionRulesData?.[(oldCondition as PermissionCondition).rule]?.schema;\n\n  const schema: RJSFSchema = paramsSchema;\n\n  const uiSchema: UiSchema = {\n    'ui:submitButtonOptions': {\n      norender: true,\n    },\n    'ui:classNames': `{\n      '& div[class*=\"MuiInputBase-root\"]': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& span': {\n        color: theme.palette.textSubtle,\n      },\n      '& input': {\n        color: theme.palette.textContrast,\n      },\n      '& fieldset.MuiOutlinedInput-notchedOutline': {\n        borderColor: theme.palette.grey[500],\n      },\n      '& div.MuiOutlinedInput-root': {\n        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n          borderColor: theme.palette.primary.light,\n        },\n        '&.Mui-error .MuiOutlinedInput-notchedOutline': {\n          borderColor: theme.palette.status.error,\n          '&:hover': {\n            borderColor: theme.palette.status.error,\n          },\n        },\n      },\n      '& label.MuiFormLabel-root.Mui-focused': {\n        color: theme.palette.primary.light,\n      },\n      '& label.MuiFormLabel-root.Mui-error': {\n        color: theme.palette.status.error,\n      },\n      '& div.MuiOutlinedInput-root:hover fieldset': {\n        borderColor:\n          theme.palette.mode === 'dark' ? theme.palette.textContrast : 'unset',\n      },\n      '& label': {\n        color: theme.palette.textSubtle,\n      },\n    }`,\n    'ui:field': 'array',\n  };\n\n  const customFields: RegistryFieldsType = { ArrayField: CustomArrayField };\n\n  const handleConditionChange = (newCondition: PermissionCondition) => {\n    setRemoveAllClicked(false);\n    switch (criteria) {\n      case criterias.condition: {\n        onRuleChange({ condition: newCondition });\n        break;\n      }\n      case criterias.allOf: {\n        const updatedCriteria = (conditionRow as ConditionsData).allOf ?? [];\n        updatedCriteria[index ?? 0] = newCondition;\n        onRuleChange({ allOf: updatedCriteria });\n        break;\n      }\n      case criterias.anyOf: {\n        const updatedCriteria = (conditionRow as ConditionsData).anyOf ?? [];\n        updatedCriteria[index ?? 0] = newCondition;\n        onRuleChange({ anyOf: updatedCriteria });\n        break;\n      }\n      case criterias.not: {\n        onRuleChange({ not: newCondition });\n        break;\n      }\n      default:\n    }\n  };\n\n  const handleNestedConditionChange = (newCondition: PermissionCondition) => {\n    if (\n      !nestedConditionRow ||\n      !nestedConditionCriteria ||\n      nestedConditionIndex === undefined ||\n      !updateRules\n    ) {\n      return;\n    }\n    const updatedNestedConditionRow: Condition[] = nestedConditionRow.map(\n      (c, i) => {\n        if (i === nestedConditionIndex) {\n          if (nestedConditionCriteria === criterias.not) {\n            return {\n              [nestedConditionCriteria]: newCondition,\n            };\n          }\n          const updatedNestedConditionRules = (\n            (c[\n              nestedConditionCriteria as keyof Condition\n            ] as PermissionCondition[]) || []\n          ).map((rule, rindex) => {\n            return rindex === nestedConditionRuleIndex ? newCondition : rule;\n          });\n\n          return {\n            [nestedConditionCriteria]: updatedNestedConditionRules,\n          };\n        }\n        return c;\n      },\n    );\n\n    updateRules(\n      criteria === criterias.not\n        ? updatedNestedConditionRow[0]\n        : updatedNestedConditionRow,\n    );\n  };\n\n  const handleTransformErrors = (errors: RJSFValidationError[]) => {\n    // criteria: condition or not simple-condition\n    if (\n      criteria === criterias.condition ||\n      (criteria === criterias.not &&\n        isSimpleRule(conditionRow[criteria as keyof Condition]))\n    ) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        updatedErrors[criteria] = setErrorMessage(errors);\n\n        return updatedErrors;\n      });\n    }\n\n    // criteria: not nested-condition\n    if (\n      criteria === criterias.not &&\n      nestedConditionCriteria &&\n      !isSimpleRule(conditionRow[criteria as keyof Condition])\n    ) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        const nestedErrors = (updatedErrors[criteria] as ComplexErrors)[\n          nestedConditionCriteria as keyof Condition\n        ] as NestedCriteriaErrors;\n\n        // nestedCriteria: allOf or anyOf\n        if (\n          Array.isArray(nestedErrors) &&\n          nestedConditionRuleIndex !== undefined\n        ) {\n          nestedErrors[nestedConditionRuleIndex] = setErrorMessage(errors);\n        } else {\n          // nestedCriteria: not\n          updatedErrors[criteria] = {\n            [nestedConditionCriteria]: setErrorMessage(errors),\n          };\n        }\n\n        return updatedErrors;\n      });\n    }\n\n    // criteria: allOf or anyOf\n    if (criteria === criterias.allOf || criteria === criterias.anyOf) {\n      setErrors(prevErrors => {\n        const updatedErrors = { ...prevErrors };\n        const simpleRuleErrors = getSimpleRuleErrors(\n          updatedErrors[\n            criteria as keyof AccessConditionsErrors\n          ] as ComplexErrors[],\n        );\n        if (\n          Array.isArray(simpleRuleErrors) &&\n          simpleRuleErrors.length > 0 &&\n          index !== undefined\n        ) {\n          simpleRuleErrors[index] = setErrorMessage(errors);\n        }\n\n        const nestedRuleErrors = getNestedRuleErrors(\n          updatedErrors[\n            criteria as keyof AccessConditionsErrors\n          ] as ComplexErrors[],\n        );\n\n        // nestedCriteria: allOf or anyOf\n        if (\n          nestedConditionCriteria &&\n          nestedConditionIndex !== undefined &&\n          nestedConditionRuleIndex !== undefined\n        ) {\n          const nestedConditionRuleList =\n            nestedRuleErrors[nestedConditionIndex][nestedConditionCriteria];\n\n          if (Array.isArray(nestedConditionRuleList)) {\n            nestedConditionRuleList[nestedConditionRuleIndex] =\n              setErrorMessage(errors);\n          }\n        }\n\n        // nestedCriteria: not\n        if (\n          Array.isArray(nestedRuleErrors) &&\n          nestedRuleErrors.length > 0 &&\n          nestedConditionCriteria === criterias.not &&\n          nestedConditionIndex !== undefined\n        ) {\n          nestedRuleErrors[nestedConditionIndex][nestedConditionCriteria] =\n            setErrorMessage(errors);\n        }\n\n        updatedErrors[criteria] = [...simpleRuleErrors, ...nestedRuleErrors];\n        return updatedErrors;\n      });\n    }\n\n    return errors;\n  };\n\n  const onConditionChange = (newCondition: PermissionCondition) => {\n    if (nestedConditionRow) {\n      handleNestedConditionChange(newCondition);\n    } else {\n      handleConditionChange(newCondition);\n    }\n  };\n\n  return (\n    <Box className={classes.inputFieldContainer}>\n      <Autocomplete\n        style={{ width: '50%', marginTop: '26px' }}\n        sx={getTextFieldStyles(theme)}\n        options={rules ?? []}\n        value={(oldCondition as PermissionCondition)?.rule || null}\n        getOptionDisabled={option =>\n          optionDisabled ? optionDisabled(option) : false\n        }\n        onChange={(_event, ruleVal?: string | null) =>\n          onConditionChange({\n            ...oldCondition,\n            rule: ruleVal ?? '',\n            params: {},\n          } as PermissionCondition)\n        }\n        renderOption={(props, option) => (\n          <RulesDropdownOption\n            props={props}\n            label={option ?? ''}\n            rulesData={conditionRulesData}\n          />\n        )}\n        renderInput={(params: any) => (\n          <TextField\n            {...params}\n            label=\"Rule\"\n            variant=\"outlined\"\n            placeholder=\"Select a rule\"\n            required\n          />\n        )}\n      />\n      <Box style={{ width: '50%' }}>\n        {schema ? (\n          <Form\n            schema={paramsSchema}\n            formData={(oldCondition as PermissionCondition)?.params || {}}\n            validator={validator}\n            uiSchema={uiSchema}\n            fields={customFields}\n            onChange={data =>\n              onConditionChange({\n                ...oldCondition,\n                params: data.formData || {},\n              } as PermissionCondition)\n            }\n            transformErrors={handleTransformErrors}\n            showErrorList={false}\n            liveValidate\n          />\n        ) : (\n          <TextField\n            style={{ width: '100%', marginTop: '26px' }}\n            sx={getTextFieldStyles(theme)}\n            disabled\n            label=\"string, string\"\n            required\n            variant=\"outlined\"\n          />\n        )}\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CreateRole/AddMembersForm.esm.js

@@ -4,6 +4,8 @@ import Autocomplete from '@mui/material/Autocomplete';
 import FormHelperText from '@mui/material/FormHelperText';
 import LinearProgress from '@mui/material/LinearProgress';
 import TextField from '@mui/material/TextField';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import IconButton from '@mui/material/IconButton';
 import { getMembersCount, getParentGroupsCount, getChildGroupsCount } from '../../utils/create-role-utils.esm.js';
 import { MembersDropdownOption } from './MembersDropdownOption.esm.js';
 
@@ -14,17 +16,19 @@ const AddMembersForm = ({
   membersData
 }) => {
   const [search, setSearch] = React.useState("");
-  const [selectedMember, setSelectedMember] = React.useState({
-    label: "",
-    etag: "",
-    type: "",
-    ref: ""
-  });
+  const [selectedMember, setSelectedMember] = React.useState(selectedMembers);
+  React.useEffect(() => {
+    setSelectedMember(selectedMembers);
+  }, [selectedMembers]);
   const getDescription = (member) => {
     const memberCount = getMembersCount(member);
     const parentCount = getParentGroupsCount(member);
     const childCount = getChildGroupsCount(member);
-    return member.kind === "Group" ? `${memberCount} members, ${parentCount} parent group, ${childCount} child groups` : void 0;
+    return member.kind === "Group" ? [
+      memberCount > 0 ? `${memberCount} members` : "",
+      parentCount > 0 ? `${parentCount} parent group` : "",
+      childCount > 0 ? `${childCount} child groups` : ""
+    ].filter(Boolean).join(", ") : undefined;
   };
   const membersOptions = React.useMemo(() => {
     return membersData.members ? membersData.members.map((member, index) => {
@@ -49,10 +53,14 @@ const AddMembersForm = ({
     }
     return membersOptions.slice(0, 99);
   }, [membersOptions, search]);
-  const handleIsOptionEqualToValue = (option, value) => value.etag ? option.etag === value.etag : selectedMember.etag === value.etag;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormHelperText, null, "Search and select users and groups to be added. Selected users and groups will appear in the members table."), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(
+  const handleIsOptionEqualToValue = (option, value) => value.etag ? option.etag === value.etag : selectedMember?.[0].etag === value.etag;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormHelperText, null, "Search and select users and groups to be added. Selected users and groups will appear in the table below."), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
+      disableCloseOnSelect: true,
+      "data-testid": "users-and-groups-autocomplete",
+      sx: { width: "30%" },
+      multiple: true,
       options: filteredMembers || [],
       getOptionLabel: (option) => option.label ?? "",
       isOptionEqualToValue: handleIsOptionEqualToValue,
@@ -62,30 +70,40 @@ const AddMembersForm = ({
       value: selectedMember,
       onChange: (_e, value) => {
         setSelectedMember(value);
-        if (value) {
-          setSearch(value.label);
-          setFieldValue("selectedMembers", [...selectedMembers, value]);
-        }
+        setFieldValue("selectedMembers", value);
+        setSearch("");
       },
+      renderTags: () => "",
       inputValue: search,
       onInputChange: (_e, newSearch, reason) => reason === "input" && setSearch(newSearch),
-      getOptionDisabled: (option) => !!selectedMembers.find(
-        (sm) => sm.etag === option.etag
-      ),
       renderOption: (props, option, state) => /* @__PURE__ */ React.createElement(MembersDropdownOption, { props, option, state }),
       noOptionsText: "No users and groups found.",
       clearOnEscape: true,
       renderInput: (params) => /* @__PURE__ */ React.createElement(
         TextField,
         {
+          "data-testid": "users-and-groups-text-field",
           ...params,
           name: "add-users-and-groups",
           variant: "outlined",
-          label: "Users and groups",
-          placeholder: "Search by user name or group name",
+          label: "Select users and groups",
           error: !!selectedMembersError,
           helperText: selectedMembersError ?? "",
-          required: true
+          required: true,
+          InputProps: {
+            ...params.InputProps,
+            endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, search && /* @__PURE__ */ React.createElement(
+              IconButton,
+              {
+                size: "small",
+                onClick: () => {
+                  setSearch("");
+                },
+                "aria-label": "clear search"
+              },
+              /* @__PURE__ */ React.createElement(HighlightOffIcon, { fontSize: "small" })
+            ), params.InputProps.endAdornment)
+          }
         }
       )
     }

package/dist/components/CreateRole/AddMembersForm.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddMembersForm.esm.js","sources":["../../../src/components/CreateRole/AddMembersForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { stringifyEntityRef } from '@backstage/catalog-model';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport TextField from '@mui/material/TextField';\nimport { FormikErrors } from 'formik';\n\nimport { MemberEntity } from '../../types';\nimport {\n  getChildGroupsCount,\n  getMembersCount,\n  getParentGroupsCount,\n} from '../../utils/create-role-utils';\nimport { MembersDropdownOption } from './MembersDropdownOption';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddMembersFormProps = {\n  selectedMembers: SelectedMember[];\n  selectedMembersError?: string;\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddMembersForm = ({\n  selectedMembers,\n  selectedMembersError,\n  setFieldValue,\n  membersData,\n}: AddMembersFormProps) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [selectedMember, setSelectedMember] = React.useState<SelectedMember>({\n    label: '',\n    etag: '',\n    type: '',\n    ref: '',\n  } as SelectedMember);\n\n  const getDescription = (member: MemberEntity) => {\n    const memberCount = getMembersCount(member);\n    const parentCount = getParentGroupsCount(member);\n    const childCount = getChildGroupsCount(member);\n\n    return member.kind === 'Group'\n      ? `${memberCount} members, ${parentCount} parent group, ${childCount} child groups`\n      : undefined;\n  };\n\n  const membersOptions: SelectedMember[] = React.useMemo(() => {\n    return membersData.members\n      ? membersData.members.map((member: MemberEntity, index: number) => {\n          const tag =\n            member.metadata.etag ??\n            `${member.metadata.name}-${member.kind}-${index}`;\n          return {\n            id: tag,\n            label: member.spec?.profile?.displayName ?? member.metadata.name,\n            description: getDescription(member),\n            etag: tag,\n            type: member.kind,\n            namespace: member.metadata.namespace,\n            members: getMembersCount(member),\n            ref: stringifyEntityRef(member),\n          };\n        })\n      : ([] as SelectedMember[]);\n  }, [membersData.members]);\n\n  const filteredMembers = React.useMemo(() => {\n    if (search) {\n      return membersOptions\n        .filter(m =>\n          m.label\n            .toLocaleLowerCase('en-US')\n            .includes(search.toLocaleLowerCase('en-US')),\n        )\n        .slice(0, 99);\n    }\n\n    return membersOptions.slice(0, 99);\n  }, [membersOptions, search]);\n\n  const handleIsOptionEqualToValue = (\n    option: SelectedMember,\n    value: SelectedMember,\n  ) =>\n    value.etag\n      ? option.etag === value.etag\n      : selectedMember.etag === value.etag;\n\n  return (\n    <>\n      <FormHelperText>\n        Search and select users and groups to be added. Selected users and\n        groups will appear in the members table.\n      </FormHelperText>\n      <br />\n      <Autocomplete\n        options={filteredMembers || []}\n        getOptionLabel={(option: SelectedMember) => option.label ?? ''}\n        isOptionEqualToValue={handleIsOptionEqualToValue}\n        loading={membersData.loading}\n        loadingText={<LinearProgress />}\n        disableClearable\n        value={selectedMember}\n        onChange={(_e, value: SelectedMember) => {\n          setSelectedMember(value);\n          if (value) {\n            setSearch(value.label);\n            setFieldValue('selectedMembers', [...selectedMembers, value]);\n          }\n        }}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        getOptionDisabled={(option: SelectedMember) =>\n          !!selectedMembers.find(\n            (sm: SelectedMember) => sm.etag === option.etag,\n          )\n        }\n        renderOption={(props, option: SelectedMember, state) => (\n          <MembersDropdownOption props={props} option={option} state={state} />\n        )}\n        noOptionsText=\"No users and groups found.\"\n        clearOnEscape\n        renderInput={params => (\n          <TextField\n            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Users and groups\"\n            placeholder=\"Search by user name or group name\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\n          />\n        )}\n      />\n      <br />\n      {membersData.error?.message && (\n        <FormHelperText error={!!membersData.error}>\n          {`Error fetching user and groups: ${membersData.error.message}`}\n        </FormHelperText>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AddMembersForm.esm.js","sources":["../../../src/components/CreateRole/AddMembersForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { stringifyEntityRef } from '@backstage/catalog-model';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport TextField from '@mui/material/TextField';\nimport HighlightOffIcon from '@mui/icons-material/HighlightOff';\nimport IconButton from '@mui/material/IconButton';\nimport { FormikErrors } from 'formik';\n\nimport { MemberEntity } from '../../types';\nimport {\n  getChildGroupsCount,\n  getMembersCount,\n  getParentGroupsCount,\n} from '../../utils/create-role-utils';\nimport { MembersDropdownOption } from './MembersDropdownOption';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddMembersFormProps = {\n  selectedMembers: SelectedMember[];\n  selectedMembersError?: string;\n  membersData: { members: MemberEntity[]; loading: boolean; error: Error };\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddMembersForm = ({\n  selectedMembers,\n  selectedMembersError,\n  setFieldValue,\n  membersData,\n}: AddMembersFormProps) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [selectedMember, setSelectedMember] =\n    React.useState<SelectedMember[]>(selectedMembers);\n  React.useEffect(() => {\n    setSelectedMember(selectedMembers);\n  }, [selectedMembers]);\n\n  const getDescription = (member: MemberEntity) => {\n    const memberCount = getMembersCount(member);\n    const parentCount = getParentGroupsCount(member);\n    const childCount = getChildGroupsCount(member);\n\n    return member.kind === 'Group'\n      ? [\n          memberCount > 0 ? `${memberCount} members` : '',\n          parentCount > 0 ? `${parentCount} parent group` : '',\n          childCount > 0 ? `${childCount} child groups` : '',\n        ]\n          .filter(Boolean) // Remove any empty strings\n          .join(', ')\n      : undefined;\n  };\n\n  const membersOptions: SelectedMember[] = React.useMemo(() => {\n    return membersData.members\n      ? membersData.members.map((member: MemberEntity, index: number) => {\n          const tag =\n            member.metadata.etag ??\n            `${member.metadata.name}-${member.kind}-${index}`;\n          return {\n            id: tag,\n            label: member.spec?.profile?.displayName ?? member.metadata.name,\n            description: getDescription(member),\n            etag: tag,\n            type: member.kind,\n            namespace: member.metadata.namespace,\n            members: getMembersCount(member),\n            ref: stringifyEntityRef(member),\n          };\n        })\n      : ([] as SelectedMember[]);\n  }, [membersData.members]);\n\n  const filteredMembers = React.useMemo(() => {\n    if (search) {\n      return membersOptions\n        .filter(m =>\n          m.label\n            .toLocaleLowerCase('en-US')\n            .includes(search.toLocaleLowerCase('en-US')),\n        )\n        .slice(0, 99);\n    }\n\n    return membersOptions.slice(0, 99);\n  }, [membersOptions, search]);\n\n  const handleIsOptionEqualToValue = (\n    option: SelectedMember,\n    value: SelectedMember,\n  ) =>\n    value.etag\n      ? option.etag === value.etag\n      : selectedMember?.[0].etag === value.etag;\n\n  return (\n    <>\n      <FormHelperText>\n        Search and select users and groups to be added. Selected users and\n        groups will appear in the table below.\n      </FormHelperText>\n      <br />\n      <Autocomplete\n        disableCloseOnSelect\n        data-testid=\"users-and-groups-autocomplete\"\n        sx={{ width: '30%' }}\n        multiple\n        options={filteredMembers || []}\n        getOptionLabel={(option: SelectedMember) => option.label ?? ''}\n        isOptionEqualToValue={handleIsOptionEqualToValue}\n        loading={membersData.loading}\n        loadingText={<LinearProgress />}\n        disableClearable\n        value={selectedMember}\n        onChange={(_e, value: SelectedMember[]) => {\n          setSelectedMember(value);\n          setFieldValue('selectedMembers', value);\n          setSearch('');\n        }}\n        renderTags={() => ''}\n        inputValue={search}\n        onInputChange={(_e, newSearch: string, reason) =>\n          reason === 'input' && setSearch(newSearch)\n        }\n        renderOption={(props, option: SelectedMember, state) => (\n          <MembersDropdownOption props={props} option={option} state={state} />\n        )}\n        noOptionsText=\"No users and groups found.\"\n        clearOnEscape\n        renderInput={params => (\n          <TextField\n            data-testid=\"users-and-groups-text-field\"\n            {...params}\n            name=\"add-users-and-groups\"\n            variant=\"outlined\"\n            label=\"Select users and groups\"\n            error={!!selectedMembersError}\n            helperText={selectedMembersError ?? ''}\n            required\n            InputProps={{\n              ...params.InputProps,\n              endAdornment: (\n                <>\n                  {search && (\n                    <IconButton\n                      size=\"small\"\n                      onClick={() => {\n                        setSearch('');\n                      }}\n                      aria-label=\"clear search\"\n                    >\n                      <HighlightOffIcon fontSize=\"small\" />\n                    </IconButton>\n                  )}\n                  {params.InputProps.endAdornment}\n                </>\n              ),\n            }}\n          />\n        )}\n      />\n      <br />\n      {membersData.error?.message && (\n        <FormHelperText error={!!membersData.error}>\n          {`Error fetching user and groups: ${membersData.error.message}`}\n        </FormHelperText>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CreateRole/AddedMembersTable.esm.js

@@ -11,10 +11,10 @@ const AddedMembersTable = ({
   return /* @__PURE__ */ React.createElement(
     Table,
     {
-      title: selectedMembers.length > 0 ? `Users and groups (${getMembers(selectedMembers)})` : "Users and groups",
+      title: selectedMembers.length > 0 ? `${getMembers(selectedMembers)}` : "No users and groups selected",
       data: selectedMembers,
       columns: selectedMembersColumns(selectedMembers, setFieldValue),
-      emptyContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", p: 2 } }, "No records. Selected users and groups appear here.")
+      emptyContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", p: 2 } }, "Selected users and groups appear here.")
     }
   );
 };

package/dist/components/CreateRole/AddedMembersTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddedMembersTable.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTable.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Table } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport { FormikErrors } from 'formik';\n\nimport { getMembers } from '../../utils/rbac-utils';\nimport { selectedMembersColumns } from './AddedMembersTableColumn';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddedMembersTableProps = {\n  selectedMembers: SelectedMember[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddedMembersTable = ({\n  selectedMembers,\n  setFieldValue,\n}: AddedMembersTableProps) => {\n  return (\n    <Table\n      title={\n        selectedMembers.length > 0\n          ? `Users and groups (${getMembers(selectedMembers)})`\n          : 'Users and groups'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n          No records. Selected users and groups appear here.\n        </Box>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAmCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,gBAAgB,MAAS,GAAA,CAAA,GACrB,qBAAqB,UAAW,CAAA,eAAe,CAAC,CAChD,CAAA,CAAA,GAAA,kBAAA;AAAA,MAEN,IAAM,EAAA,eAAA;AAAA,MACN,OAAA,EAAS,sBAAuB,CAAA,eAAA,EAAiB,aAAa,CAAA;AAAA,MAC9D,YACE,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,CAAA,EAAG,CAAE,EAAA,EAAA,EAAG,oDAE9D;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"AddedMembersTable.esm.js","sources":["../../../src/components/CreateRole/AddedMembersTable.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Table } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport { FormikErrors } from 'formik';\n\nimport { getMembers } from '../../utils/rbac-utils';\nimport { selectedMembersColumns } from './AddedMembersTableColumn';\nimport { RoleFormValues, SelectedMember } from './types';\n\ntype AddedMembersTableProps = {\n  selectedMembers: SelectedMember[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n};\n\nexport const AddedMembersTable = ({\n  selectedMembers,\n  setFieldValue,\n}: AddedMembersTableProps) => {\n  return (\n    <Table\n      title={\n        selectedMembers.length > 0\n          ? `${getMembers(selectedMembers)}`\n          : 'No users and groups selected'\n      }\n      data={selectedMembers}\n      columns={selectedMembersColumns(selectedMembers, setFieldValue)}\n      emptyContent={\n        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n          Selected users and groups appear here.\n        </Box>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAmCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,gBAAgB,MAAS,GAAA,CAAA,GACrB,GAAG,UAAW,CAAA,eAAe,CAAC,CAC9B,CAAA,GAAA,8BAAA;AAAA,MAEN,IAAM,EAAA,eAAA;AAAA,MACN,OAAA,EAAS,sBAAuB,CAAA,eAAA,EAAiB,aAAa,CAAA;AAAA,MAC9D,YACE,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,CAAA,EAAG,CAAE,EAAA,EAAA,EAAG,wCAE9D;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/CreateRole/MembersDropdownOption.esm.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 
@@ -20,24 +22,32 @@ const MembersDropdownOption = ({
       style: {
         display: "flex",
         flexDirection: "column",
-        alignItems: "flex-start"
+        alignItems: "flex-start",
+        width: "auto"
       }
     },
-    /* @__PURE__ */ React.createElement(Typography, { component: "span" }, parts.map((part) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Checkbox, { style: { marginRight: 8 }, checked: state.selected })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { component: "span", sx: { marginTop: "0.5rem" } }, parts.map((part) => /* @__PURE__ */ React.createElement(
       Typography,
       {
         key: `${part.text}-${etag}`,
         component: "span",
         sx: {
-          fontWeight: part.highlight ? 400 : 700,
+          fontWeight: !state.inputValue || part.highlight ? 400 : 700,
           color: (theme) => theme.palette.text.primary
         },
         "data-testid": option.label
       },
       part.text
-    ))),
-    /* @__PURE__ */ React.createElement(Typography, { sx: { color: (theme) => theme.palette.text.secondary } }, option.description),
-    " "
+    )))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        sx: {
+          color: (theme) => theme.palette.text.secondary,
+          whiteSpace: "nowrap"
+        }
+      },
+      option.description
+    ), " ")))
   );
 };
 

package/dist/components/CreateRole/MembersDropdownOption.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersDropdownOption.esm.js","sources":["../../../src/components/CreateRole/MembersDropdownOption.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';\nimport Typography from '@mui/material/Typography';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\n\nimport { SelectedMember } from './types';\n\ntype MembersDropdownOptionProps = {\n  option: SelectedMember;\n  state: AutocompleteRenderOptionState;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const MembersDropdownOption = ({\n  props,\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, etag } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${etag}`}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n      }}\n    >\n      <Typography component=\"span\">\n        {parts.map(part => (\n          <Typography\n            key={`${part.text}-${etag}`}\n            component=\"span\"\n            sx={{\n              fontWeight: part.highlight ? 400 : 700,\n              color: theme => theme.palette.text.primary,\n            }}\n            data-testid={option.label}\n          >\n            {part.text}\n          </Typography>\n        ))}\n      </Typography>\n      <Typography sx={{ color: theme => theme.palette.text.secondary }}>\n        {option.description}\n      </Typography>{' '}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,wBAAwB,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,MAAA;AACxB,EAAA,MAAM,UAAU,KAAM,CAAA,KAAA,EAAO,YAAY,EAAE,WAAA,EAAa,MAAM,CAAA;AAC9D,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,EAAO,OAAO,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,GAAG,IAAI,CAAA,CAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA;AAAA;AACd,KAAA;AAAA,wCAEC,UAAW,EAAA,EAAA,SAAA,EAAU,MACnB,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,QACzB,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,UAAA,EAAY,IAAK,CAAA,SAAA,GAAY,GAAM,GAAA,GAAA;AAAA,UACnC,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,SACrC;AAAA,QACA,eAAa,MAAO,CAAA;AAAA,OAAA;AAAA,MAEnB,IAAK,CAAA;AAAA,KAET,CACH,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA,EAClD,EAAA,EAAA,MAAA,CAAO,WACV,CAAA;AAAA,IAAc;AAAA,GAChB;AAEJ;;;;"}
+{"version":3,"file":"MembersDropdownOption.esm.js","sources":["../../../src/components/CreateRole/MembersDropdownOption.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';\nimport Typography from '@mui/material/Typography';\nimport Checkbox from '@mui/material/Checkbox';\nimport Box from '@mui/material/Box';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\n\nimport { SelectedMember } from './types';\n\ntype MembersDropdownOptionProps = {\n  option: SelectedMember;\n  state: AutocompleteRenderOptionState;\n  props: React.HTMLAttributes<HTMLLIElement>;\n};\n\nexport const MembersDropdownOption = ({\n  props,\n  option,\n  state,\n}: MembersDropdownOptionProps) => {\n  const { inputValue } = state;\n  const { label, etag } = option;\n  const matches = match(label, inputValue, { insideWords: true });\n  const parts = parse(label, matches);\n\n  return (\n    <li\n      {...props}\n      key={`${etag}`}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        width: 'auto',\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <div>\n          <Checkbox style={{ marginRight: 8 }} checked={state.selected} />\n        </div>\n        <div>\n          <div>\n            <Typography component=\"span\" sx={{ marginTop: '0.5rem' }}>\n              {parts.map(part => (\n                <Typography\n                  key={`${part.text}-${etag}`}\n                  component=\"span\"\n                  sx={{\n                    fontWeight: !state.inputValue || part.highlight ? 400 : 700,\n                    color: theme => theme.palette.text.primary,\n                  }}\n                  data-testid={option.label}\n                >\n                  {part.text}\n                </Typography>\n              ))}\n            </Typography>\n          </div>\n          <div>\n            <Typography\n              sx={{\n                color: theme => theme.palette.text.secondary,\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {option.description}\n            </Typography>{' '}\n          </div>\n        </div>\n      </Box>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,wBAAwB,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,MAAA;AACxB,EAAA,MAAM,UAAU,KAAM,CAAA,KAAA,EAAO,YAAY,EAAE,WAAA,EAAa,MAAM,CAAA;AAC9D,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,EAAO,OAAO,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,GAAG,IAAI,CAAA,CAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,wCAEC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAE,WAAA,EAAa,GAAK,EAAA,OAAA,EAAS,KAAM,CAAA,QAAA,EAAU,CAChE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,IAAI,EAAE,SAAA,EAAW,UAC3C,EAAA,EAAA,KAAA,CAAM,IAAI,CACT,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,CAAA,EAAG,IAAK,CAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,QACzB,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA;AAAA,UACF,YAAY,CAAC,KAAA,CAAM,UAAc,IAAA,IAAA,CAAK,YAAY,GAAM,GAAA,GAAA;AAAA,UACxD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,SACrC;AAAA,QACA,eAAa,MAAO,CAAA;AAAA,OAAA;AAAA,MAEnB,IAAK,CAAA;AAAA,KAET,CACH,CACF,CAAA,sCACC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UACnC,UAAY,EAAA;AAAA;AACd,OAAA;AAAA,MAEC,MAAO,CAAA;AAAA,KACV,EAAc,GAChB,CACF,CACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/CreateRole/PermissionPoliciesForm.esm.js

@@ -40,14 +40,14 @@ const PermissionPoliciesForm = ({
   } = useAsync(async () => {
     return await rbacApi.listPermissions();
   });
-  const permissionPoliciesData = !permissionPoliciesLoading && Array.isArray(permissionPolicies) ? getPluginsPermissionPoliciesData(permissionPolicies) : void 0;
+  const permissionPoliciesData = !permissionPoliciesLoading && Array.isArray(permissionPolicies) ? getPluginsPermissionPoliciesData(permissionPolicies) : undefined;
   const onChangePlugin = (plugin, index) => {
     setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);
     setFieldValue(`permissionPoliciesRows[${index}].permission`, "", false);
     setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);
     setFieldValue(
       `permissionPoliciesRows[${index}].conditions`,
-      void 0,
+      undefined,
       false
     );
     setFieldValue(
@@ -69,7 +69,7 @@ const PermissionPoliciesForm = ({
     );
     setFieldValue(
       `permissionPoliciesRows[${index}].conditions`,
-      void 0,
+      undefined,
       false
     );
     setFieldValue(
@@ -88,13 +88,13 @@ const PermissionPoliciesForm = ({
   const onAddConditions = (index, conditions) => {
     setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);
     if (!conditions)
-      setFieldValue(`permissionPoliciesRows[${index}].id`, void 0);
+      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);
   };
   const onRowRemove = (index) => {
     const finalPps = permissionPoliciesRows.filter(
       (_pp, ppIndex) => index !== ppIndex
     );
-    setFieldError(`permissionPoliciesRows[${index}]`, void 0);
+    setFieldError(`permissionPoliciesRows[${index}]`, undefined);
     setFieldValue("permissionPoliciesRows", finalPps, false);
   };
   const onRowAdd = () => setFieldValue(

package/dist/components/CreateRole/PermissionPoliciesForm.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionPoliciesForm.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport AddIcon from '@mui/icons-material/Add';\nimport Button from '@mui/material/Button';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport { styled, Theme } from '@mui/material/styles';\nimport { FormikErrors } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { useConditionRules } from '../../hooks/useConditionRules';\nimport { PermissionsData } from '../../types';\nimport { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils';\nimport { ConditionsData } from '../ConditionalAccess/types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';\nimport { RoleFormValues } from './types';\n\nconst classes = {\n  permissionPoliciesForm: 'permission-policies-form',\n};\n\nconst PermissionPoliciesFormContainer = styled('div')(\n  ({ theme }: { theme: Theme }) => ({\n    [`&.${classes.permissionPoliciesForm}`]: {\n      padding: '20px',\n      border: `2px solid ${theme.palette.border}`,\n      borderRadius: '5px',\n    },\n  }),\n);\n\ntype PermissionPoliciesFormProps = {\n  permissionPoliciesRows: PermissionsData[];\n  permissionPoliciesRowsError: FormikErrors<PermissionsData>[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n  setFieldError: (field: string, value: string | undefined) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n};\n\nexport const PermissionPoliciesForm = ({\n  permissionPoliciesRows,\n  permissionPoliciesRowsError,\n  setFieldValue,\n  setFieldError,\n  handleBlur,\n}: PermissionPoliciesFormProps) => {\n  const rbacApi = useApi(rbacApiRef);\n  const conditionRules = useConditionRules();\n\n  const {\n    value: permissionPolicies,\n    loading: permissionPoliciesLoading,\n    error: permissionPoliciesErr,\n  } = useAsync(async () => {\n    return await rbacApi.listPermissions();\n  });\n\n  const permissionPoliciesData =\n    !permissionPoliciesLoading && Array.isArray(permissionPolicies)\n      ? getPluginsPermissionPoliciesData(permissionPolicies)\n      : undefined;\n\n  const onChangePlugin = (plugin: string, index: number) => {\n    setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);\n    setFieldValue(`permissionPoliciesRows[${index}].permission`, '', false);\n    setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePermission = (\n    permission: string,\n    index: number,\n    isResourced: boolean,\n    policies?: string[],\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].permission`,\n      permission,\n      true,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].isResourced`,\n      isResourced,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      policies\n        ? policies.map(p => ({ policy: p, effect: 'allow' }))\n        : initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePolicy = (\n    isChecked: boolean,\n    policyIndex: number,\n    index: number,\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies[${policyIndex}].effect`,\n      isChecked ? 'allow' : 'deny',\n      true,\n    );\n  };\n\n  const onAddConditions = (index: number, conditions?: ConditionsData) => {\n    setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);\n    if (!conditions)\n      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);\n  };\n\n  const onRowRemove = (index: number) => {\n    const finalPps = permissionPoliciesRows.filter(\n      (_pp, ppIndex) => index !== ppIndex,\n    );\n    setFieldError(`permissionPoliciesRows[${index}]`, undefined);\n    setFieldValue('permissionPoliciesRows', finalPps, false);\n  };\n\n  const onRowAdd = () =>\n    setFieldValue(\n      'permissionPoliciesRows',\n      [...permissionPoliciesRows, initialPermissionPolicyRowValue],\n      false,\n    );\n\n  return (\n    <div>\n      <FormHelperText>\n        Permission policies can be selected for each plugin. You can add\n        multiple permission policies using +Add option.\n      </FormHelperText>\n      <br />\n      {permissionPoliciesLoading ? (\n        <Progress />\n      ) : (\n        <PermissionPoliciesFormContainer\n          className={classes.permissionPoliciesForm}\n        >\n          {permissionPoliciesRows.map((pp, index) => (\n            <PermissionPoliciesFormRow\n              key={index}\n              permissionPoliciesRowError={\n                permissionPoliciesRowsError?.[index] ?? {}\n              }\n              rowName={`permissionPoliciesRows[${index}]`}\n              permissionPoliciesRowData={pp}\n              permissionPoliciesData={permissionPoliciesData}\n              rowCount={permissionPoliciesRows.length}\n              conditionRules={conditionRules}\n              onChangePlugin={(plugin: string) => onChangePlugin(plugin, index)}\n              onChangePermission={(\n                permission: string,\n                isResourced: boolean,\n                policies?: string[],\n              ) => onChangePermission(permission, index, isResourced, policies)}\n              onChangePolicy={(isChecked: boolean, policyIndex: number) =>\n                onChangePolicy(isChecked, policyIndex, index)\n              }\n              onAddConditions={(conditions?: ConditionsData) =>\n                onAddConditions(index, conditions)\n              }\n              onRemove={() => onRowRemove(index)}\n              handleBlur={handleBlur}\n              getPermissionDisabled={(permission: string) => {\n                const pluginPermissionPolicies = permissionPoliciesRows.filter(\n                  ppr => ppr.plugin === pp.plugin,\n                );\n                const previouslySelectedPermission =\n                  !!pluginPermissionPolicies.find(\n                    ppp => ppp.permission === permission,\n                  );\n                return (\n                  previouslySelectedPermission &&\n                  !permissionPoliciesData?.pluginsPermissions[pp.plugin]\n                    ?.policies[permission ?? '']?.isResourced\n                );\n              }}\n            />\n          ))}\n          <Button\n            sx={{\n              color: theme => theme.palette.primary.light,\n            }}\n            size=\"small\"\n            onClick={onRowAdd}\n            name=\"add-permission-policy\"\n          >\n            <AddIcon />\n            Add\n          </Button>\n        </PermissionPoliciesFormContainer>\n      )}\n      {!permissionPoliciesLoading &&\n        (permissionPoliciesErr?.message ||\n          !Array.isArray(permissionPolicies)) && (\n          <>\n            <br />\n            <FormHelperText error>\n              {`Error fetching the permission policies: ${\n                permissionPoliciesErr?.message ||\n                (permissionPolicies as Response)?.statusText\n              }`}\n            </FormHelperText>\n          </>\n        )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionPoliciesForm.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesForm.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport AddIcon from '@mui/icons-material/Add';\nimport Button from '@mui/material/Button';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport { styled, Theme } from '@mui/material/styles';\nimport { FormikErrors } from 'formik';\n\nimport { rbacApiRef } from '../../api/RBACBackendClient';\nimport { useConditionRules } from '../../hooks/useConditionRules';\nimport { PermissionsData } from '../../types';\nimport { getPluginsPermissionPoliciesData } from '../../utils/create-role-utils';\nimport { ConditionsData } from '../ConditionalAccess/types';\nimport { initialPermissionPolicyRowValue } from './const';\nimport { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';\nimport { RoleFormValues } from './types';\n\nconst classes = {\n  permissionPoliciesForm: 'permission-policies-form',\n};\n\nconst PermissionPoliciesFormContainer = styled('div')(\n  ({ theme }: { theme: Theme }) => ({\n    [`&.${classes.permissionPoliciesForm}`]: {\n      padding: '20px',\n      border: `2px solid ${theme.palette.border}`,\n      borderRadius: '5px',\n    },\n  }),\n);\n\ntype PermissionPoliciesFormProps = {\n  permissionPoliciesRows: PermissionsData[];\n  permissionPoliciesRowsError: FormikErrors<PermissionsData>[];\n  setFieldValue: (\n    field: string,\n    value: any,\n    shouldValidate?: boolean,\n  ) => Promise<FormikErrors<RoleFormValues>> | Promise<void>;\n  setFieldError: (field: string, value: string | undefined) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n};\n\nexport const PermissionPoliciesForm = ({\n  permissionPoliciesRows,\n  permissionPoliciesRowsError,\n  setFieldValue,\n  setFieldError,\n  handleBlur,\n}: PermissionPoliciesFormProps) => {\n  const rbacApi = useApi(rbacApiRef);\n  const conditionRules = useConditionRules();\n\n  const {\n    value: permissionPolicies,\n    loading: permissionPoliciesLoading,\n    error: permissionPoliciesErr,\n  } = useAsync(async () => {\n    return await rbacApi.listPermissions();\n  });\n\n  const permissionPoliciesData =\n    !permissionPoliciesLoading && Array.isArray(permissionPolicies)\n      ? getPluginsPermissionPoliciesData(permissionPolicies)\n      : undefined;\n\n  const onChangePlugin = (plugin: string, index: number) => {\n    setFieldValue(`permissionPoliciesRows[${index}].plugin`, plugin, true);\n    setFieldValue(`permissionPoliciesRows[${index}].permission`, '', false);\n    setFieldValue(`permissionPoliciesRows[${index}].isResourced`, false, false);\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePermission = (\n    permission: string,\n    index: number,\n    isResourced: boolean,\n    policies?: string[],\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].permission`,\n      permission,\n      true,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].isResourced`,\n      isResourced,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].conditions`,\n      undefined,\n      false,\n    );\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies`,\n      policies\n        ? policies.map(p => ({ policy: p, effect: 'allow' }))\n        : initialPermissionPolicyRowValue.policies,\n      false,\n    );\n  };\n\n  const onChangePolicy = (\n    isChecked: boolean,\n    policyIndex: number,\n    index: number,\n  ) => {\n    setFieldValue(\n      `permissionPoliciesRows[${index}].policies[${policyIndex}].effect`,\n      isChecked ? 'allow' : 'deny',\n      true,\n    );\n  };\n\n  const onAddConditions = (index: number, conditions?: ConditionsData) => {\n    setFieldValue(`permissionPoliciesRows[${index}].conditions`, conditions);\n    if (!conditions)\n      setFieldValue(`permissionPoliciesRows[${index}].id`, undefined);\n  };\n\n  const onRowRemove = (index: number) => {\n    const finalPps = permissionPoliciesRows.filter(\n      (_pp, ppIndex) => index !== ppIndex,\n    );\n    setFieldError(`permissionPoliciesRows[${index}]`, undefined);\n    setFieldValue('permissionPoliciesRows', finalPps, false);\n  };\n\n  const onRowAdd = () =>\n    setFieldValue(\n      'permissionPoliciesRows',\n      [...permissionPoliciesRows, initialPermissionPolicyRowValue],\n      false,\n    );\n\n  return (\n    <div>\n      <FormHelperText>\n        Permission policies can be selected for each plugin. You can add\n        multiple permission policies using +Add option.\n      </FormHelperText>\n      <br />\n      {permissionPoliciesLoading ? (\n        <Progress />\n      ) : (\n        <PermissionPoliciesFormContainer\n          className={classes.permissionPoliciesForm}\n        >\n          {permissionPoliciesRows.map((pp, index) => (\n            <PermissionPoliciesFormRow\n              key={index}\n              permissionPoliciesRowError={\n                permissionPoliciesRowsError?.[index] ?? {}\n              }\n              rowName={`permissionPoliciesRows[${index}]`}\n              permissionPoliciesRowData={pp}\n              permissionPoliciesData={permissionPoliciesData}\n              rowCount={permissionPoliciesRows.length}\n              conditionRules={conditionRules}\n              onChangePlugin={(plugin: string) => onChangePlugin(plugin, index)}\n              onChangePermission={(\n                permission: string,\n                isResourced: boolean,\n                policies?: string[],\n              ) => onChangePermission(permission, index, isResourced, policies)}\n              onChangePolicy={(isChecked: boolean, policyIndex: number) =>\n                onChangePolicy(isChecked, policyIndex, index)\n              }\n              onAddConditions={(conditions?: ConditionsData) =>\n                onAddConditions(index, conditions)\n              }\n              onRemove={() => onRowRemove(index)}\n              handleBlur={handleBlur}\n              getPermissionDisabled={(permission: string) => {\n                const pluginPermissionPolicies = permissionPoliciesRows.filter(\n                  ppr => ppr.plugin === pp.plugin,\n                );\n                const previouslySelectedPermission =\n                  !!pluginPermissionPolicies.find(\n                    ppp => ppp.permission === permission,\n                  );\n                return (\n                  previouslySelectedPermission &&\n                  !permissionPoliciesData?.pluginsPermissions[pp.plugin]\n                    ?.policies[permission ?? '']?.isResourced\n                );\n              }}\n            />\n          ))}\n          <Button\n            sx={{\n              color: theme => theme.palette.primary.light,\n            }}\n            size=\"small\"\n            onClick={onRowAdd}\n            name=\"add-permission-policy\"\n          >\n            <AddIcon />\n            Add\n          </Button>\n        </PermissionPoliciesFormContainer>\n      )}\n      {!permissionPoliciesLoading &&\n        (permissionPoliciesErr?.message ||\n          !Array.isArray(permissionPolicies)) && (\n          <>\n            <br />\n            <FormHelperText error>\n              {`Error fetching the permission policies: ${\n                permissionPoliciesErr?.message ||\n                (permissionPolicies as Response)?.statusText\n              }`}\n            </FormHelperText>\n          </>\n        )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CreateRole/PermissionPoliciesFormRow.esm.js

@@ -92,7 +92,7 @@ const PermissionPoliciesFormRow = ({
         onChange: (_e, value) => onChangePermission(
           value ?? "",
           permissionPoliciesData?.pluginsPermissions?.[permissionPoliciesRowData.plugin]?.policies[value ?? ""]?.isResourced ?? false,
-          value ? permissionPoliciesData?.pluginsPermissions?.[permissionPoliciesRowData.plugin]?.policies?.[value].policies : void 0
+          value ? permissionPoliciesData?.pluginsPermissions?.[permissionPoliciesRowData.plugin]?.policies?.[value].policies : undefined
         ),
         getOptionDisabled: getPermissionDisabled,
         getOptionLabel: (option) => option || "",

package/dist/components/CreateRole/PermissionPoliciesFormRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionPoliciesFormRow.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesFormRow.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormLabel from '@mui/material/FormLabel';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport { FormikErrors } from 'formik';\n\nimport { PermissionsData } from '../../types';\nimport { getRulesNumber } from '../../utils/create-role-utils';\nimport { ConditionalAccessSidebar } from '../ConditionalAccess/ConditionalAccessSidebar';\nimport { ConditionRules, ConditionsData } from '../ConditionalAccess/types';\nimport { PoliciesCheckboxGroup } from './PoliciesCheckboxGroup';\nimport { PluginsPermissionPoliciesData } from './types';\n\ntype PermissionPoliciesFormRowProps = {\n  permissionPoliciesRowData: PermissionsData;\n  permissionPoliciesData?: PluginsPermissionPoliciesData;\n  permissionPoliciesRowError: FormikErrors<PermissionsData>;\n  rowCount: number;\n  rowName: string;\n  conditionRules: ConditionRules;\n  onRemove: () => void;\n  onChangePlugin: (plugin: string) => void;\n  onChangePermission: (\n    permission: string,\n    isResourced: boolean,\n    policies?: string[],\n  ) => void;\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  getPermissionDisabled: (permission: string) => boolean;\n  onAddConditions: (conditions?: ConditionsData) => void;\n};\n\nexport const PermissionPoliciesFormRow = ({\n  permissionPoliciesRowData,\n  permissionPoliciesData,\n  permissionPoliciesRowError,\n  rowCount,\n  rowName,\n  conditionRules,\n  onRemove,\n  onChangePermission,\n  onChangePolicy,\n  onChangePlugin,\n  handleBlur,\n  getPermissionDisabled,\n  onAddConditions,\n}: PermissionPoliciesFormRowProps) => {\n  const { plugin: pluginError, permission: permissionError } =\n    permissionPoliciesRowError;\n  const { data: conditionRulesData, error: conditionRulesError } =\n    conditionRules;\n  const totalRules = getRulesNumber(permissionPoliciesRowData.conditions);\n\n  const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);\n\n  const tooltipTitle = () => (\n    <div>\n      <Typography component=\"p\" align=\"center\">\n        Define access conditions for the selected resource type using Rules.\n        Rules vary by resource type.{' '}\n        <b>Users have access to the resource type content by default</b> unless\n        configured otherwise.\n      </Typography>\n    </div>\n  );\n\n  const getTotalRules = (): string => {\n    let accessMessage = 'Configure access';\n\n    if (totalRules > 0) {\n      accessMessage += ` (${totalRules} ${totalRules > 1 ? 'rules' : 'rule'})`;\n    }\n    return accessMessage;\n  };\n\n  return (\n    <div>\n      <div style={{ display: 'flex', flexFlow: 'column', gap: '15px' }}>\n        <FormLabel\n          style={{\n            fontWeight: 800,\n            fontSize: '0.8rem',\n          }}\n        >\n          What can users/groups access?\n        </FormLabel>\n        <div\n          style={{\n            display: 'flex',\n            gap: '20px',\n            marginBottom: '15px',\n          }}\n        >\n          <Autocomplete\n            options={permissionPoliciesData?.plugins ?? []}\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.plugin || null}\n            onChange={(_e, value) => {\n              onChangePlugin(value ?? '');\n            }}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Plugin\"\n                name={`${rowName}.plugin`}\n                variant=\"outlined\"\n                placeholder=\"Select a plugin\"\n                error={!!pluginError}\n                helperText={pluginError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <Autocomplete\n            disabled={!permissionPoliciesRowData.plugin}\n            options={\n              permissionPoliciesData?.pluginsPermissions?.[\n                permissionPoliciesRowData.plugin\n              ]?.permissions ?? []\n            }\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.permission || null}\n            onChange={(_e, value) =>\n              onChangePermission(\n                value ?? '',\n                permissionPoliciesData?.pluginsPermissions?.[\n                  permissionPoliciesRowData.plugin\n                ]?.policies[value ?? '']?.isResourced ?? false,\n                value\n                  ? permissionPoliciesData?.pluginsPermissions?.[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies?.[value].policies\n                  : undefined,\n              )\n            }\n            getOptionDisabled={getPermissionDisabled}\n            getOptionLabel={option => option || ''}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Resource type\"\n                name={`${rowName}.permission`}\n                variant=\"outlined\"\n                placeholder=\"Select a resource type\"\n                error={!!permissionError}\n                helperText={permissionError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <div style={{ width: '23%', alignSelf: 'center', flexGrow: 1 }}>\n            {permissionPoliciesRowData.isResourced &&\n              !!conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n                `${permissionPoliciesRowData.permission}`\n              ]?.rules.length && (\n                <IconButton\n                  title=\"\"\n                  color=\"primary\"\n                  hidden={\n                    !permissionPoliciesData?.pluginsPermissions[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies[permissionPoliciesRowData.permission]\n                      ?.isResourced\n                  }\n                  aria-label=\"configure-access\"\n                  sx={{\n                    fontSize: theme => theme.typography.fontSize,\n                  }}\n                  onClick={() => setSidebarOpen(true)}\n                  disabled={!!conditionRulesError}\n                >\n                  <ChecklistRtlIcon fontSize=\"small\" />\n                  {getTotalRules()}\n                  &nbsp;\n                  <Tooltip title={tooltipTitle()} placement=\"top\">\n                    <HelpOutlineIcon fontSize=\"inherit\" />\n                  </Tooltip>\n                </IconButton>\n              )}\n          </div>\n          <IconButton\n            title=\"Remove\"\n            sx={{\n              color: theme => theme.palette.grey[500],\n              flexGrow: 0,\n              alignSelf: 'center',\n            }}\n            onClick={() => onRemove()}\n            disabled={rowCount === 1}\n            data-testid={`${rowName}-remove`}\n          >\n            <RemoveIcon id={`${rowName}-remove`} />\n          </IconButton>\n        </div>\n      </div>\n      <PoliciesCheckboxGroup\n        permissionPoliciesRowData={permissionPoliciesRowData}\n        onChangePolicy={onChangePolicy}\n        rowName={rowName}\n      />\n      <ConditionalAccessSidebar\n        open={sidebarOpen}\n        onClose={() => {\n          setSidebarOpen(false);\n        }}\n        onSave={(conditions?: ConditionsData) => {\n          onAddConditions(conditions);\n          setSidebarOpen(false);\n        }}\n        conditionsFormVal={permissionPoliciesRowData.conditions}\n        selPluginResourceType={permissionPoliciesRowData.permission}\n        conditionRulesData={\n          conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n            `${permissionPoliciesRowData.permission}`\n          ]\n        }\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionPoliciesFormRow.esm.js","sources":["../../../src/components/CreateRole/PermissionPoliciesFormRow.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport FormLabel from '@mui/material/FormLabel';\nimport IconButton from '@mui/material/IconButton';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport { FormikErrors } from 'formik';\n\nimport { PermissionsData } from '../../types';\nimport { getRulesNumber } from '../../utils/create-role-utils';\nimport { ConditionalAccessSidebar } from '../ConditionalAccess/ConditionalAccessSidebar';\nimport { ConditionRules, ConditionsData } from '../ConditionalAccess/types';\nimport { PoliciesCheckboxGroup } from './PoliciesCheckboxGroup';\nimport { PluginsPermissionPoliciesData } from './types';\n\ntype PermissionPoliciesFormRowProps = {\n  permissionPoliciesRowData: PermissionsData;\n  permissionPoliciesData?: PluginsPermissionPoliciesData;\n  permissionPoliciesRowError: FormikErrors<PermissionsData>;\n  rowCount: number;\n  rowName: string;\n  conditionRules: ConditionRules;\n  onRemove: () => void;\n  onChangePlugin: (plugin: string) => void;\n  onChangePermission: (\n    permission: string,\n    isResourced: boolean,\n    policies?: string[],\n  ) => void;\n  onChangePolicy: (isChecked: boolean, policyIndex: number) => void;\n  handleBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  getPermissionDisabled: (permission: string) => boolean;\n  onAddConditions: (conditions?: ConditionsData) => void;\n};\n\nexport const PermissionPoliciesFormRow = ({\n  permissionPoliciesRowData,\n  permissionPoliciesData,\n  permissionPoliciesRowError,\n  rowCount,\n  rowName,\n  conditionRules,\n  onRemove,\n  onChangePermission,\n  onChangePolicy,\n  onChangePlugin,\n  handleBlur,\n  getPermissionDisabled,\n  onAddConditions,\n}: PermissionPoliciesFormRowProps) => {\n  const { plugin: pluginError, permission: permissionError } =\n    permissionPoliciesRowError;\n  const { data: conditionRulesData, error: conditionRulesError } =\n    conditionRules;\n  const totalRules = getRulesNumber(permissionPoliciesRowData.conditions);\n\n  const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);\n\n  const tooltipTitle = () => (\n    <div>\n      <Typography component=\"p\" align=\"center\">\n        Define access conditions for the selected resource type using Rules.\n        Rules vary by resource type.{' '}\n        <b>Users have access to the resource type content by default</b> unless\n        configured otherwise.\n      </Typography>\n    </div>\n  );\n\n  const getTotalRules = (): string => {\n    let accessMessage = 'Configure access';\n\n    if (totalRules > 0) {\n      accessMessage += ` (${totalRules} ${totalRules > 1 ? 'rules' : 'rule'})`;\n    }\n    return accessMessage;\n  };\n\n  return (\n    <div>\n      <div style={{ display: 'flex', flexFlow: 'column', gap: '15px' }}>\n        <FormLabel\n          style={{\n            fontWeight: 800,\n            fontSize: '0.8rem',\n          }}\n        >\n          What can users/groups access?\n        </FormLabel>\n        <div\n          style={{\n            display: 'flex',\n            gap: '20px',\n            marginBottom: '15px',\n          }}\n        >\n          <Autocomplete\n            options={permissionPoliciesData?.plugins ?? []}\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.plugin || null}\n            onChange={(_e, value) => {\n              onChangePlugin(value ?? '');\n            }}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Plugin\"\n                name={`${rowName}.plugin`}\n                variant=\"outlined\"\n                placeholder=\"Select a plugin\"\n                error={!!pluginError}\n                helperText={pluginError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <Autocomplete\n            disabled={!permissionPoliciesRowData.plugin}\n            options={\n              permissionPoliciesData?.pluginsPermissions?.[\n                permissionPoliciesRowData.plugin\n              ]?.permissions ?? []\n            }\n            style={{ width: '35%', flexGrow: '1' }}\n            value={permissionPoliciesRowData.permission || null}\n            onChange={(_e, value) =>\n              onChangePermission(\n                value ?? '',\n                permissionPoliciesData?.pluginsPermissions?.[\n                  permissionPoliciesRowData.plugin\n                ]?.policies[value ?? '']?.isResourced ?? false,\n                value\n                  ? permissionPoliciesData?.pluginsPermissions?.[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies?.[value].policies\n                  : undefined,\n              )\n            }\n            getOptionDisabled={getPermissionDisabled}\n            getOptionLabel={option => option || ''}\n            renderInput={(params: any) => (\n              <TextField\n                {...params}\n                label=\"Resource type\"\n                name={`${rowName}.permission`}\n                variant=\"outlined\"\n                placeholder=\"Select a resource type\"\n                error={!!permissionError}\n                helperText={permissionError ?? ''}\n                onBlur={handleBlur}\n                required\n              />\n            )}\n          />\n          <div style={{ width: '23%', alignSelf: 'center', flexGrow: 1 }}>\n            {permissionPoliciesRowData.isResourced &&\n              !!conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n                `${permissionPoliciesRowData.permission}`\n              ]?.rules.length && (\n                <IconButton\n                  title=\"\"\n                  color=\"primary\"\n                  hidden={\n                    !permissionPoliciesData?.pluginsPermissions[\n                      permissionPoliciesRowData.plugin\n                    ]?.policies[permissionPoliciesRowData.permission]\n                      ?.isResourced\n                  }\n                  aria-label=\"configure-access\"\n                  sx={{\n                    fontSize: theme => theme.typography.fontSize,\n                  }}\n                  onClick={() => setSidebarOpen(true)}\n                  disabled={!!conditionRulesError}\n                >\n                  <ChecklistRtlIcon fontSize=\"small\" />\n                  {getTotalRules()}\n                  &nbsp;\n                  <Tooltip title={tooltipTitle()} placement=\"top\">\n                    <HelpOutlineIcon fontSize=\"inherit\" />\n                  </Tooltip>\n                </IconButton>\n              )}\n          </div>\n          <IconButton\n            title=\"Remove\"\n            sx={{\n              color: theme => theme.palette.grey[500],\n              flexGrow: 0,\n              alignSelf: 'center',\n            }}\n            onClick={() => onRemove()}\n            disabled={rowCount === 1}\n            data-testid={`${rowName}-remove`}\n          >\n            <RemoveIcon id={`${rowName}-remove`} />\n          </IconButton>\n        </div>\n      </div>\n      <PoliciesCheckboxGroup\n        permissionPoliciesRowData={permissionPoliciesRowData}\n        onChangePolicy={onChangePolicy}\n        rowName={rowName}\n      />\n      <ConditionalAccessSidebar\n        open={sidebarOpen}\n        onClose={() => {\n          setSidebarOpen(false);\n        }}\n        onSave={(conditions?: ConditionsData) => {\n          onAddConditions(conditions);\n          setSidebarOpen(false);\n        }}\n        conditionsFormVal={permissionPoliciesRowData.conditions}\n        selPluginResourceType={permissionPoliciesRowData.permission}\n        conditionRulesData={\n          conditionRulesData?.[`${permissionPoliciesRowData.plugin}`]?.[\n            `${permissionPoliciesRowData.permission}`\n          ]\n        }\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CreateRole/RoleForm.esm.js

@@ -39,7 +39,7 @@ const RoleForm = ({
       state: {
         toastMessage: `Role ${currentRoleName} ${action} successfully`
       }
-    } : void 0;
+    } : undefined;
     if (step && currentRoleName) {
       const { kind, namespace, name } = parseEntityRef(currentRoleName);
       navigate(`../roles/${kind}/${namespace}/${name}`, stateProp);
@@ -146,7 +146,7 @@ const RoleForm = ({
         return formik.errors.permissionPoliciesRows;
       }
       default:
-        return void 0;
+        return undefined;
     }
   };
   const handleNext = (fieldName) => {