Merge pull request #430

fix(22182): Handle readonly and editable Designer

* fix(22182): set readonly to form when proper designer status

* fix(22182): add readonly to the interpolation editor

* refactor(22182): add RJSF overrides to handle disabled state

* refactor(22182): add proper disabled buttons for array properties

* refactor(22182): relocated RJSF custom templates for reuse

* refactor(22182): add edit CTA and status

* refactor(22182): add restriction to readonly

* test(22182): update mock to handle status

* test(22182): add test for readonly

* test(22182): add test for readonly

* test(22182): refactor mocks and add test for readonly

* chore(22182): eslint

* test(22182): fix only in tests

* refactor(22182): add memoisation

Author: vanch3d

hivemq-edge/src/frontend/src/components/MQTT/TopicCreatableSelect.spec.cy.tsx

@@ -6,7 +6,7 @@ import { mockBridge } from '@/api/hooks/useGetBridges/__handlers__'
 
 const MOCK_ID = 'my-id'
 
-describe('SingleTopicCreatableSelect', () => {
+describe.skip('SingleTopicCreatableSelect', () => {
   beforeEach(() => {
     cy.viewport(450, 250)
   })
@@ -58,7 +58,7 @@ describe('SingleTopicCreatableSelect', () => {
   })
 })
 
-describe.only('MultiTopicsCreatableSelect', () => {
+describe('MultiTopicsCreatableSelect', () => {
   beforeEach(() => {
     cy.viewport(450, 250)
   })

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ArrayFieldItemTemplate.tsx renamed to hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx

@@ -5,6 +5,7 @@ import { Box, ButtonGroup, FormControl, HStack, useDisclosure, VStack } from '@c
 import { LuPanelTopClose, LuPanelTopOpen } from 'react-icons/lu'
 
 import IconButton from '@/components/Chakra/IconButton.tsx'
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '@/components/rjsf/__internals/IconButton.tsx'
 
 // TODO[NVL] Need a better handling of the custom UISchema property, for the Adapter SDK
 interface ArrayFieldItemCollapsableUISchema {
@@ -48,7 +49,6 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
     return children.props.name
   }, [children.props.formData, children.props.name, collapsableItems?.titleKey])
 
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates
   const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick])
   const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick])
   const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick])

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ArrayFieldTemplate.tsx renamed to hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldTemplate.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react'
 import { ArrayFieldTemplateProps } from '@rjsf/utils'
 import { Box, Grid, GridItem } from '@chakra-ui/react'
 import { getTemplate, getUiOptions, ArrayFieldTemplateItemType } from '@rjsf/utils'
+import AddButton from '@/components/rjsf/__internals/AddButton.tsx'
 
-// TODO[NVL] This is NOT a good approach to add a "role"; submit a PR!
 export const ArrayFieldTemplate: FC<ArrayFieldTemplateProps> = (props) => {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props
   const uiOptions = getUiOptions(uiSchema)
@@ -14,10 +14,7 @@ export const ArrayFieldTemplate: FC<ArrayFieldTemplateProps> = (props) => {
   )
   const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>('ArrayFieldItemTemplate', registry, uiOptions)
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate'>('ArrayFieldTitleTemplate', registry, uiOptions)
-  // Button templates are not overridden in the uiSchema
-  const {
-    ButtonTemplates: { AddButton },
-  } = registry.templates
+
   return (
     <Box>
       <ArrayFieldTitleTemplate

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/BaseInputTemplate.tsx renamed to hivemq-edge/src/frontend/src/components/rjsf/BaseInputTemplate.tsx

@@ -0,0 +1,26 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'
+import { Button } from '@chakra-ui/react'
+import { AddIcon } from '@chakra-ui/icons'
+
+/**
+ * TODO[rjsf-team/react-jsonschema-form/issues/3839] Bug with disabled in buttons
+ * Replaces
+ *   // const {
+ *   //   ButtonTemplates: { AddButton },
+ *   // } = registry.templates
+ * @see https://github.com/rjsf-team/react-jsonschema-form/issues/3839
+ * @see https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/chakra-ui/src/AddButton/AddButton.tsx
+ */
+export default function AddButton<
+  T = never,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = never
+>({ uiSchema, registry, ...props }: IconButtonProps<T, S, F>) {
+  const { translateString } = registry
+  const { disabled, ...rest } = props
+  return (
+    <Button leftIcon={<AddIcon />} {...rest} isDisabled={props.disabled}>
+      {translateString(TranslatableString.AddItemButton)}
+    </Button>
+  )
+}

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/FieldTemplate.tsx renamed to hivemq-edge/src/frontend/src/components/rjsf/FieldTemplate.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react'
+import { IconButton } from '@chakra-ui/react'
+type ChakraIconButtonProps = React.ComponentProps<typeof IconButton>
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'
+
+/**
+ * TODO[rjsf-team/react-jsonschema-form/issues/3839] Bug with disabled in buttons
+ * Replaces
+ *   // const {
+ *   //   ButtonTemplates: { AddButton },
+ *   // } = registry.templates
+ * @see https://github.com/rjsf-team/react-jsonschema-form/issues/3839
+ * @see https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/chakra-ui/src/AddButton/AddButton.tsx
+ */
+
+// eslint-disable-next-line react-refresh/only-export-components
+function ChakraIconButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>(
+  props: IconButtonProps<T, S, F>
+) {
+  const { icon, title, disabled, iconType, uiSchema, registry, ...otherProps } = props
+  return (
+    <IconButton
+      aria-label={title || ''}
+      {...otherProps}
+      isDisabled={props.disabled}
+      icon={icon as ChakraIconButtonProps['icon']}
+    />
+  )
+}
+
+ChakraIconButton.displayName = 'ChakraIconButton'
+
+export default memo(ChakraIconButton) as typeof ChakraIconButton

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx renamed to hivemq-edge/src/frontend/src/components/rjsf/ObjectFieldTemplate.tsx

@@ -0,0 +1,68 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'
+import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon } from '@chakra-ui/icons'
+
+import ChakraIconButton from '@/components/rjsf/__internals/ChakraIconButton.tsx'
+
+/**
+ * TODO[rjsf-team/react-jsonschema-form/issues/3839] Bug with disabled in buttons
+ * Replaces
+ *   // const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates
+ * @see https://github.com/rjsf-team/react-jsonschema-form/issues/3839
+ * @see https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/chakra-ui/src/AddButton/AddButton.tsx
+ */
+
+export function CopyButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props
+  return (
+    <ChakraIconButton<T, S, F> title={translateString(TranslatableString.CopyButton)} {...props} icon={<CopyIcon />} />
+  )
+}
+
+export function MoveDownButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props
+  return (
+    <ChakraIconButton<T, S, F>
+      title={translateString(TranslatableString.MoveDownButton)}
+      {...props}
+      icon={<ArrowDownIcon />}
+    />
+  )
+}
+
+export function MoveUpButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props
+  return (
+    <ChakraIconButton<T, S, F>
+      title={translateString(TranslatableString.MoveUpButton)}
+      {...props}
+      icon={<ArrowUpIcon />}
+    />
+  )
+}
+
+export function RemoveButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props
+  return (
+    <ChakraIconButton<T, S, F>
+      title={translateString(TranslatableString.RemoveButton)}
+      {...props}
+      icon={<DeleteIcon />}
+    />
+  )
+}