F #5422: Add initial request to get one config (#1616)

src/fireedge/src/client/apps/sunstone/_app.js

@@ -22,6 +22,7 @@ import { ENDPOINTS as DEV_ENDPOINTS } from 'client/router/dev'
 
 import { useGeneral, useGeneralApi } from 'client/features/General'
 import { useAuth, useAuthApi } from 'client/features/Auth'
+import { useSystem, useSystemApi } from 'client/features/One'
 
 import Sidebar from 'client/components/Sidebar'
 import Notifier from 'client/components/Notifier'
@@ -42,6 +43,8 @@ const SunstoneApp = () => {
 
   const { appTitle } = useGeneral()
   const { changeAppTitle } = useGeneralApi()
+  const { config: oneConfig } = useSystem()
+  const { getOneConfig } = useSystemApi()
 
   useEffect(() => {
     (async () => {
@@ -52,6 +55,7 @@ const SunstoneApp = () => {
           getAuthUser()
           !view && await getSunstoneViews()
           !config && await getSunstoneConfig()
+          !oneConfig && getOneConfig()
         }
       } catch {
         logout()

src/fireedge/src/client/components/FormControl/TableController.js

@@ -15,12 +15,10 @@
  * ------------------------------------------------------------------------- */
 import { memo } from 'react'
 import PropTypes from 'prop-types'
-
-import { Typography } from '@mui/material'
 import { useController } from 'react-hook-form'
 
-import { ErrorHelper, Tooltip } from 'client/components/FormControl'
-import { Tr, labelCanBeTranslated } from 'client/components/HOC'
+import Legend from 'client/components/Forms/Legend'
+import { ErrorHelper } from 'client/components/FormControl'
 import { generateKey } from 'client/utils'
 
 const defaultGetRowId = item => typeof item === 'object' ? item?.id ?? item?.ID : item
@@ -46,19 +44,13 @@ const TableController = memo(
 
     return (
       <>
-        {error ? (
+        <Legend title={label} tooltip={tooltip} />
+        {error && (
           <ErrorHelper
             data-cy={`${cy}-error`}
             label={error?.message}
             mb={2}
           />
-        ) : (
-          label && (
-            <Typography variant='body1' mb={2}>
-              {tooltip && <Tooltip title={tooltip} position='start' />}
-              {labelCanBeTranslated(label) ? Tr(label) : label}
-            </Typography>
-          )
         )}
         <Table
           pageSize={4}

src/fireedge/src/client/components/FormControl/ToggleController.js

@@ -52,8 +52,8 @@ const ToggleController = memo(
     const defaultValue = multiple ? [values?.[0]?.value] : values?.[0]?.value
 
     const {
-      field: { ref, value: optionSelected = defaultValue, onChange, ...inputProps },
-      fieldState: { error }
+      field: { ref, value: optionSelected = defaultValue, onChange },
+      fieldState: { error: { message } = {} }
     } = useController({ name, control })
 
     useEffect(() => {
@@ -66,13 +66,12 @@ const ToggleController = memo(
     return (
       <FormControl fullWidth margin='dense'>
         {label && (
-          <Label htmlFor={cy} error={error ? 'error' : undefined}>
+          <Label htmlFor={cy} error={Boolean(message)}>
             {labelCanBeTranslated(label) ? Tr(label) : label}
             {tooltip && <Tooltip title={tooltip} />}
           </Label>
         )}
         <ToggleButtonGroup
-          {...inputProps}
           onChange={(_, newValues) => onChange(newValues)}
           ref={ref}
           id={cy}
@@ -88,9 +87,9 @@ const ToggleController = memo(
             </ToggleButton>
           )}
         </ToggleButtonGroup>
-        {Boolean(error) && (
+        {Boolean(message) && (
           <FormHelperText data-cy={`${cy}-error`}>
-            <ErrorHelper label={error?.message} />
+            <ErrorHelper label={message} />
           </FormHelperText>
         )}
       </FormControl>

src/fireedge/src/client/components/Forms/Legend.js

@@ -17,8 +17,8 @@ import { memo } from 'react'
 import PropTypes from 'prop-types'
 import { styled, Typography } from '@mui/material'
 
-import { Translate } from 'client/components/HOC'
 import AdornmentWithTooltip from 'client/components/FormControl/Tooltip'
+import { Tr, labelCanBeTranslated } from 'client/components/HOC'
 
 const StyledLegend = styled(props => (
   <Typography variant='subtitle1' component='legend' {...props} />
@@ -35,7 +35,7 @@ const StyledLegend = styled(props => (
 const Legend = memo(({ title, tooltip }) => {
   return (
     <StyledLegend tooltip={tooltip}>
-      <Translate word={title} />
+      {labelCanBeTranslated(title) ? Tr(title) : title}
       {!!tooltip && <AdornmentWithTooltip title={tooltip} />}
     </StyledLegend>
   )

src/fireedge/src/client/components/Tables/VmTemplates/actions.js

@@ -117,7 +117,6 @@ const Actions = () => {
         color: 'secondary',
         action: rows => {
           const vmTemplate = rows?.[0]?.original ?? {}
-          // const path = generatePath(PATH.TEMPLATE.VMS.CREATE, vmTemplate)
           const path = PATH.TEMPLATE.VMS.CREATE
 
           history.push(path, vmTemplate)

src/fireedge/src/client/components/Tables/VmTemplates/index.js

@@ -20,7 +20,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useVmTemplate, useVmTemplateApi } from 'client/features/One'
 
-import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable, EnhancedTableProps } from 'client/components/Tables'
 import { createColumns } from 'client/components/Tables/Enhanced/Utils'
 import VmTemplateColumns from 'client/components/Tables/VmTemplates/columns'
 import VmTemplateRow from 'client/components/Tables/VmTemplates/row'
@@ -57,4 +57,7 @@ const VmTemplatesTable = props => {
   )
 }
 
+VmTemplatesTable.propTypes = EnhancedTableProps
+VmTemplatesTable.displayName = 'VmTemplatesTable'
+
 export default VmTemplatesTable