Merge pull request #370

refactor(19824): Fix the UX flow in the designer toolbox

* refactor(19824): move the selection listener up the DOM tree

* fix(19824): keep the node selected

* fix(19824): improve iconography

* feat(19824): add conditional wrapper

* feat(19824): add support for stepper control

* feat(19824): add link to the publish stepper

* refactor(19824): update props

* refactor(19824): redirect to the check stepper after publishing

* refactor(19824): update translations

* refactor(19824): relocating the "new draft" CTA

* refactor(19824): remove empty footer from the table

* test(19824): fix the test with hidden footer

* fix(19824): hide CTA is licence not in place

* fix(21009): Add navigation to the error node's panel (#376)

Author: vanch3d

hivemq-edge/src/frontend/.nvmrc

@@ -1 +1 @@
-v16.20.1
+v18.16.0

hivemq-edge/src/frontend/package.json

@@ -128,5 +128,9 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "engines": {
+    "node": "18",
+    "pnpm": "8"
   }
 }

hivemq-edge/src/frontend/src/components/ConditionalWrapper.spec.cy.tsx

@@ -0,0 +1,27 @@
+import { ConditionalWrapper } from '@/components/ConditonalWrapper.tsx'
+import { Button, Text } from '@chakra-ui/react'
+
+describe('ConditionalWrapper', () => {
+  beforeEach(() => {
+    cy.viewport(800, 250)
+  })
+  it('should renders', () => {
+    cy.mountWithProviders(
+      <ConditionalWrapper condition={true} wrapper={(children) => <Button data-testid="wrapper">{children}</Button>}>
+        <Text data-testid="content">Test</Text>
+      </ConditionalWrapper>
+    )
+    cy.getByTestId('content').should('be.visible')
+    cy.getByTestId('wrapper').should('be.visible')
+  })
+
+  it('should renders', () => {
+    cy.mountWithProviders(
+      <ConditionalWrapper condition={false} wrapper={(children) => <Button data-testid="wrapper">{children}</Button>}>
+        <Text data-testid="content">Test</Text>
+      </ConditionalWrapper>
+    )
+    cy.getByTestId('content').should('be.visible')
+    cy.getByTestId('wrapper').should('not.exist')
+  })
+})

hivemq-edge/src/frontend/src/components/ConditonalWrapper.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react'
+
+interface ConditionalWrapperProps {
+  children: React.ReactElement
+  condition: boolean
+  wrapper: (children: React.ReactElement) => JSX.Element
+}
+
+export const ConditionalWrapper: FC<ConditionalWrapperProps> = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children

hivemq-edge/src/frontend/src/components/PaginatedTable/PaginatedTable.spec.cy.tsx

@@ -43,7 +43,7 @@ describe('PaginatedTable', () => {
     cy.get('th').should('have.length', 2)
     cy.get('th').eq(0).should('contain.text', 'item')
     cy.get('th').eq(1).should('contain.text', 'value')
-    cy.get('tr').should('have.length', 10 + 2)
+    cy.get('tr').should('have.length', 10 + 1)
 
     cy.get('[aria-label="Go to the first page"]').should('be.visible')
   })

hivemq-edge/src/frontend/src/components/PaginatedTable/PaginatedTable.tsx

@@ -86,6 +86,14 @@ const PaginatedTable = <T,>({
     getFacetedMinMaxValues: getFacetedMinMaxValues(),
   })
 
+  const hasFooters =
+    table
+      .getFooterGroups()
+      .map((group) => group.headers.map((header) => header.column.columnDef.footer))
+      .flat()
+      .filter(Boolean).length > 0
+
+  console.log('XXXXX', hasFooters)
   return (
     <>
       <TableContainer overflowY="auto" overflowX="auto" whiteSpace="normal">
@@ -167,17 +175,19 @@ const PaginatedTable = <T,>({
                 )
               })}
           </Tbody>
-          <Tfoot>
-            {table.getFooterGroups().map((footerGroup) => (
-              <Tr key={footerGroup.id}>
-                {footerGroup.headers.map((header) => (
-                  <Td key={header.id}>
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}
-                  </Td>
-                ))}
-              </Tr>
-            ))}
-          </Tfoot>
+          {hasFooters && (
+            <Tfoot>
+              {table.getFooterGroups().map((footerGroup) => (
+                <Tr key={footerGroup.id}>
+                  {footerGroup.headers.map((header) => (
+                    <Td key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tfoot>
+          )}
         </Table>
       </TableContainer>
       {enablePagination && <PaginationBar table={table} pageSizes={pageSizes} />}

hivemq-edge/src/frontend/src/extensions/datahub/__test-utils__/MockStoreWrapper.tsx

@@ -46,13 +46,17 @@ interface MockChecksStoreWrapperProps {
 
 export const MockChecksStoreWrapper: FC<MockChecksStoreWrapperProps> = ({ config, children }) => {
   const { setNode, setReport } = usePolicyChecksStore()
+  const { onAddNodes } = useDataHubDraftStore()
 
   useEffect(() => {
     const { node, report } = config
-    if (node) setNode(node)
+    if (node) {
+      onAddNodes([{ item: node, type: 'add' }])
+      setNode(node)
+    }
 
     if (report) setReport(report)
-  }, [config, setNode, setReport])
+  }, [config, onAddNodes, setNode, setReport])
 
   return (
     <>

hivemq-edge/src/frontend/src/extensions/datahub/components/DataHubPage.tsx

@@ -1,18 +1,33 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Outlet } from 'react-router-dom'
-import { Box } from '@chakra-ui/react'
+import { Outlet, useLocation } from 'react-router-dom'
+import { Box, Flex } from '@chakra-ui/react'
 
 import PageContainer from '@/components/PageContainer.tsx'
 import { CAPABILITY, useGetCapability } from '@/api/hooks/useFrontendServices/useGetCapability.tsx'
 import LicenseWarning from '@datahub/components/helpers/LicenseWarning.tsx'
+import DraftCTA from '@datahub/components/helpers/DraftCTA.tsx'
 
 const DataHubPage: FC = () => {
   const { t } = useTranslation('datahub')
   const hasDataHub = useGetCapability(CAPABILITY.DATAHUB)
+  const { pathname } = useLocation()
+
+  const isMainPage = pathname === '/datahub'
 
   return (
-    <PageContainer title={t('page.title') as string} subtitle={t('page.description') as string}>
+    <PageContainer
+      title={t('page.title') as string}
+      subtitle={t('page.description') as string}
+      cta={
+        isMainPage &&
+        hasDataHub && (
+          <Flex height="100%" justifyContent="flex-end" alignItems="flex-end" pb={6}>
+            <DraftCTA />
+          </Flex>
+        )
+      }
+    >
       {hasDataHub && <Outlet />}
       {!hasDataHub && (
         <Box width="100%" mt={20}>

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/DesignerToolbox.tsx

@@ -1,5 +1,6 @@
 import { FC, useState } from 'react'
-import { Panel } from 'reactflow'
+import { Panel, useReactFlow } from 'reactflow'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { motion } from 'framer-motion'
 import {
@@ -20,25 +21,46 @@ import {
   useSteps,
   VStack,
 } from '@chakra-ui/react'
-import { FaAngleLeft, FaAngleRight, FaTools } from 'react-icons/fa'
-import { MdSkipNext, MdSkipPrevious } from 'react-icons/md'
+import { FaTools } from 'react-icons/fa'
+import { LuPanelLeftOpen, LuPanelRightOpen, LuSkipBack, LuSkipForward } from 'react-icons/lu'
 
 import { ToolboxNodes } from '@datahub/components/controls/ToolboxNodes.tsx'
 import { ToolboxDryRun } from '@datahub/components/controls/ToolboxDryRun.tsx'
 import { ToolboxPublish } from '@datahub/components/controls/ToolboxPublish.tsx'
 import DraftStatus from '@datahub/components/helpers/DraftStatus.tsx'
+import { ANIMATION } from '@datahub/utils/datahub.utils.ts'
 
 const stepKeys = ['build', 'check', 'publish']
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace DesignerToolBoxProps {
+  export enum Steps {
+    TOOLBOX_NODES = 0,
+    TOOLBOX_CHECK = 1,
+    TOOLBOX_PUBLISH = 2,
+  }
+}
+
+export interface DesignerToolBoxProps {
+  onActiveStep?: (step: DesignerToolBoxProps.Steps) => void
+}
+
 const DesignerToolbox: FC = () => {
   const { t } = useTranslation('datahub')
+  const { fitView } = useReactFlow()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
   const { getButtonProps, getDisclosureProps, isOpen } = useDisclosure()
   const [hidden, setHidden] = useState(!isOpen)
   const { activeStep, setActiveStep } = useSteps({
-    index: 0,
+    index: DesignerToolBoxProps.Steps.TOOLBOX_NODES,
     count: stepKeys.length,
   })
 
+  const onActiveStep = (step: number) => {
+    setActiveStep(step)
+  }
+
   const steps = stepKeys.map((key) => ({
     key: key,
     title: t(`workspace.toolbox.panel.${key}.title`),
@@ -55,7 +77,7 @@ const DesignerToolbox: FC = () => {
             icon={
               <>
                 <Icon as={FaTools} />
-                <Icon as={isOpen ? FaAngleLeft : FaAngleRight} />
+                <Icon as={isOpen ? LuPanelRightOpen : LuPanelLeftOpen} ml={2} boxSize="24px" />
               </>
             }
             {...getButtonProps()}
@@ -109,15 +131,15 @@ const DesignerToolbox: FC = () => {
                           <IconButton
                             data-testid="toolbox-navigation-prev"
                             aria-label={t('workspace.toolbox.navigation.previous')}
-                            icon={<MdSkipPrevious />}
-                            isDisabled={activeStep === 0}
+                            icon={<LuSkipBack />}
+                            isDisabled={activeStep === DesignerToolBoxProps.Steps.TOOLBOX_NODES}
                             onClick={() => setActiveStep((s) => s - 1)}
                           />
                           <IconButton
                             data-testid="toolbox-navigation-next"
                             aria-label={t('workspace.toolbox.navigation.next')}
-                            icon={<MdSkipNext />}
-                            isDisabled={activeStep === 2}
+                            icon={<LuSkipForward />}
+                            isDisabled={activeStep === DesignerToolBoxProps.Steps.TOOLBOX_PUBLISH}
                             onClick={() => setActiveStep((s) => s + 1)}
                           />
                         </ButtonGroup>
@@ -129,9 +151,21 @@ const DesignerToolbox: FC = () => {
                   {activeStep === index && (
                     <>
                       <Box pt={5} h="100%">
-                        {activeStep === 0 && <ToolboxNodes />}
-                        {activeStep === 1 && <ToolboxDryRun />}
-                        {activeStep === 2 && <ToolboxPublish />}
+                        {activeStep === DesignerToolBoxProps.Steps.TOOLBOX_NODES && <ToolboxNodes />}
+                        {activeStep === DesignerToolBoxProps.Steps.TOOLBOX_CHECK && (
+                          <ToolboxDryRun
+                            onActiveStep={onActiveStep}
+                            onShowNode={(node) =>
+                              fitView({ nodes: [node], padding: 3, duration: ANIMATION.FIT_VIEW_DURATION_MS })
+                            }
+                            onShowEditor={(node) =>
+                              navigate(`node/${node.type}/${node.id}`, { state: { origin: pathname } })
+                            }
+                          />
+                        )}
+                        {activeStep === DesignerToolBoxProps.Steps.TOOLBOX_PUBLISH && (
+                          <ToolboxPublish onActiveStep={onActiveStep} />
+                        )}
                       </Box>
                     </>
                   )}

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/ToolboxDryRun.spec.cy.tsx

@@ -46,11 +46,35 @@ describe('ToolboxDryRun', () => {
     cy.getByAriaLabel('Close').click()
   })
 
+  it('should allow access to node', () => {
+    cy.mountWithProviders(
+      <ToolboxDryRun onShowNode={cy.stub().as('onShowNode')} onShowEditor={cy.stub().as('onShowEditor')} />,
+      { wrapper }
+    )
+    cy.getByTestId('toolbox-policy-check').click()
+    cy.get('h2 button').eq(0).click()
+
+    cy.get('@onShowNode').should('not.have.been.calledWith')
+    cy.getByTestId('report-error-fitView').click()
+    cy.get('@onShowNode').should('have.been.calledWithMatch', { id: 'node-id', type: DataHubNodeType.DATA_POLICY })
+
+    cy.get('@onShowEditor').should('not.have.been.calledWith')
+    cy.getByTestId('report-error-config').click()
+    cy.get('@onShowEditor').should('have.been.calledWithMatch', { id: 'node-id', type: DataHubNodeType.DATA_POLICY })
+    cy.getByAriaLabel('Close').click()
+  })
+
   it('should be accessible', () => {
     cy.injectAxe()
     cy.mountWithProviders(<ToolboxDryRun />, { wrapper })
     cy.getByTestId('toolbox-policy-check').click()
-    cy.checkAccessibility()
+    cy.get('h2 button').eq(0).click()
+    cy.checkAccessibility(undefined, {
+      rules: {
+        // TODO[NVL] CTooltip seems to generate false positives
+        'color-contrast': { enabled: false },
+      },
+    })
     cy.percySnapshot('Component: ToolboxDryRun')
   })
 })