Provisioning records

+ enrollment groups
+ linked hubs
+ lazy router
+ detail icons

Author: PatrikMatiasko

.storybook/preview.js

@@ -3,7 +3,7 @@ import { addons } from '@storybook/addons'
 import { useEffect, useState } from 'react'
 import { CHANGE } from 'storybook-addon-themes/src/constants'
 
-import light from '../src/components/Atomic/_theme/light'
+import plgd from '../src/components/Atomic/_theme/plgd'
 import siemens from '../src/components/Atomic/_theme/siemens'
 
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -26,11 +26,11 @@ export const parameters = {
     },
   },
   themes: {
-    default: 'light',
+    default: 'plgd',
     list: [
-      { name: 'light', class: ['theme-twt', 'light-mode'], color: '#00aced' },
+      { name: 'plgd', class: ['theme-plgd', 'plgd-mode'], color: '#00aced' },
       // { name: 'dark', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },
-      { name: 'siemens', class: ['theme-fb', 'siemens-mode'], color: '#000028' },
+      { name: 'siemens', class: ['theme-siemens', 'siemens-mode'], color: '#000028' },
     ],
   },
 }
@@ -45,7 +45,7 @@ const withTheme = (StoryFn, context) => {
     return (lastValue && lastValue[0]) || themes.default
   })
 
-  const getThemeByKey = (themeName) => themeName === 'light' ? light : siemens
+  const getThemeByKey = (themeName) => themeName === 'plgd' ? plgd : siemens
 
   useEffect(() => {
     channel.on(CHANGE, setThemeName);

src/app/clientApp/Devices/Detail/DevicesDetailsPage/DevicesDetailsPage.tsx

@@ -12,7 +12,7 @@ import { messages as menuT } from '../../../../../components/Atomic/Menu/Menu.i1
 import Notification from '../../../../../components/Atomic/Notification/Toast'
 import StatusTag from '../../../../../components/Atomic/StatusTag'
 import Breadcrumbs from '../../../../../components/Layout/Header/Breadcrumbs'
-import EditDeviceNameModal from '../../../../../components/Organisms/EditDeviceNameModal'
+import EditNameModal from '../../../../../components/Organisms/EditNameModal'
 import Tabs from '../../../../../components/Atomic/Tabs'
 import { getApiErrorMessage } from '../../../../../common/utils'
 import { disOwnDevice, ownDevice } from '../../slice'
@@ -415,20 +415,20 @@ const DevicesDetailsPage: FC<Props> = (props) => {
                 show={showFirstTimeOnboardingModal}
             />
 
-            <EditDeviceNameModal
-                deviceName={deviceName}
-                deviceNameLoading={deviceNameLoading}
+            <EditNameModal
                 handleClose={() => setShowEditNameModal(false)}
                 handleSubmit={updateDeviceName}
                 i18n={{
                     close: _(t.close),
-                    deviceName: _(t.deviceName),
+                    namePlaceholder: _(t.deviceName),
                     edit: _(t.edit),
                     name: _(t.name),
                     reset: _(t.reset),
                     saveChange: _(t.saveChange),
                     savingChanges: _(t.savingChanges),
                 }}
+                loading={deviceNameLoading}
+                name={deviceName}
                 show={showEditNameModal}
             />
         </PageLayout>

src/app/clientApp/Devices/List/DevicesListActionButton/DevicesListActionButton.tsx

@@ -4,7 +4,7 @@ import isFunction from 'lodash/isFunction'
 
 import TableActionButton from '../../../../../components/Organisms/TableActionButton'
 import { ItemType } from '../../../../../components/Organisms/TableActionButton/TableActionButton.types'
-import { IconClose, IconNetwork, IconPlus, IconShowPassword } from '../../../../../components/Atomic/Icon'
+import { IconClose, IconNetwork, IconPlus, IconArrowDetail } from '../../../../../components/Atomic/Icon'
 import { devicesOwnerships } from '../../constants'
 import { canSetDPSEndpoint } from '../../utils'
 import { getDevicesResourcesAllApi } from '../../rest'
@@ -21,23 +21,7 @@ const DevicesListActionButton: FC<Props> = memo((props) => {
     const isUnsupported = useMemo(() => ownershipStatus === UNSUPPORTED, [ownershipStatus])
 
     const getDefaultItems = () => {
-        const defaultItems: ItemType[] = [
-            {
-                id: 'detail',
-                onClick: () => onView(deviceId),
-                label: _(t.details),
-                icon: <IconShowPassword />,
-            },
-        ]
-
-        if (!isUnsupported) {
-            defaultItems.push({
-                id: 'own',
-                onClick: () => onOwnChange(),
-                label: isOwned ? _(t.disOwnDevice) : _(t.ownDevice),
-                icon: isOwned ? <IconClose /> : <IconPlus />,
-            })
-        }
+        const defaultItems: ItemType[] = []
 
         if (isOwned) {
             defaultItems.push({
@@ -49,6 +33,22 @@ const DevicesListActionButton: FC<Props> = memo((props) => {
             })
         }
 
+        if (!isUnsupported) {
+            defaultItems.push({
+                id: 'own',
+                onClick: () => onOwnChange(),
+                label: isOwned ? _(t.disOwnDevice) : _(t.ownDevice),
+                icon: isOwned ? <IconClose /> : <IconPlus />,
+            })
+        }
+
+        defaultItems.push({
+            id: 'detail',
+            onClick: () => onView(deviceId),
+            label: _(t.details),
+            icon: <IconArrowDetail />,
+        })
+
         return defaultItems
     }
     const { formatMessage: _ } = useIntl()

src/common/hooks/useWellKnownConfiguration.ts

@@ -4,6 +4,7 @@ import mergeWith from 'lodash/mergeWith'
 import cloneDeep from 'lodash/cloneDeep'
 
 import { fetchApi } from '../services'
+import { MenuItemVisibilityType } from '../../components/Layout/LeftPanel/LeftPanel.types'
 
 export type BuildInformationType = {
     buildDate: string
@@ -50,6 +51,11 @@ export type WellKnownConfigType = {
         releaseUrl: string
         version: string
     }
+    ui: {
+        menu: {
+            [key: string]: MenuItemVisibilityType
+        }
+    }
 } & BuildInformationType
 
 type useWellKnownConfigurationReturnType = [

src/components/Atomic/Grid/Column/Column.types.ts

@@ -11,7 +11,7 @@ export type ColumnSizesType = {
 }
 
 export type Props = {
-    children: ReactNode | ReactElement
+    children?: ReactNode | ReactElement
     id?: string
     className?: string
     style?: CSSProperties

src/components/Atomic/Icon/assets/icon-arrow-detail.svg

@@ -7,7 +7,7 @@ const SvgIconActions = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>)
     <svg xmlns='http://www.w3.org/2000/svg' width={props.width || 16} height={props.height || 16} fill='none' viewBox='0 0 20 20' ref={ref} {...props}>
         <path
             fill='currentcolor'
-            d='M10 14.012c1.15 0 2.083.969 2.083 2.16 0 1.193-.933 2.161-2.083 2.161-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16Zm0-6.172c1.15 0 2.083.968 2.083 2.16 0 1.192-.933 2.16-2.083 2.16-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16Zm2.083-4.013c0 1.192-.933 2.16-2.083 2.16-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16 1.15 0 2.083.968 2.083 2.16Z'
+            d='M10 14.012c1.15 0 2.083.969 2.083 2.16 0 1.193-.933 2.161-2.083 2.161-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16m0-6.172c1.15 0 2.083.968 2.083 2.16 0 1.192-.933 2.16-2.083 2.16-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16m2.083-4.013c0 1.192-.933 2.16-2.083 2.16-1.15 0-2.083-.968-2.083-2.16 0-1.192.933-2.16 2.083-2.16 1.15 0 2.083.968 2.083 2.16Z'
         />
     </svg>
 )

src/components/Atomic/Icon/assets/icon-arrow-down-no-padding.svg

@@ -0,0 +1,13 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Do not edit directly
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { Ref, forwardRef, memo } from 'react'
+const SvgIconArrowDetail = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg xmlns='http://www.w3.org/2000/svg' width={props.width || 16} height={props.height || 16} fill='none' viewBox='0 0 20 20' ref={ref} {...props}>
+        <path fill='currentcolor' d='M6.91 14.412a.833.833 0 0 0 1.18 1.179l5-5a.833.833 0 0 0 0-1.179l-5-5a.833.833 0 0 0-1.18 1.179L11.323 10 6.91 14.412' />
+    </svg>
+)
+const ForwardRef = forwardRef(SvgIconArrowDetail)
+const Memo = memo(ForwardRef)
+export default Memo

src/components/Atomic/Icon/components/IconActions.tsx

@@ -0,0 +1,13 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Do not edit directly
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { Ref, forwardRef, memo } from 'react'
+const SvgIconArrowDownNoPadding = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg xmlns='http://www.w3.org/2000/svg' width={props.width || 16} height={props.height || 16} fill='none' viewBox='0 0 20 20' ref={ref} {...props}>
+        <path fill='currentcolor' d='M5.59 6.912a.833.833 0 1 0-1.18 1.179l5 5a.833.833 0 0 0 1.18 0l5-5a.833.833 0 0 0-1.18-1.179L10 11.322l-4.41-4.41' />
+    </svg>
+)
+const ForwardRef = forwardRef(SvgIconArrowDownNoPadding)
+const Memo = memo(ForwardRef)
+export default Memo