refactor(striker-ui): group manage fence related components

striker-ui/components/ManageFence/AddFenceInputGroup.tsx

@@ -1,11 +1,11 @@
 import { Box } from '@mui/material';
 import { FC, useMemo, useState } from 'react';
 
-import Autocomplete from './Autocomplete';
+import Autocomplete from '../Autocomplete';
 import CommonFenceInputGroup from './CommonFenceInputGroup';
-import FlexBox from './FlexBox';
-import Spinner from './Spinner';
-import { BodyText } from './Text';
+import FlexBox from '../FlexBox';
+import Spinner from '../Spinner';
+import { BodyText } from '../Text';
 
 const AddFenceInputGroup: FC<AddFenceInputGroupProps> = ({
   fenceTemplate: externalFenceTemplate,

striker-ui/components/ManageFence/CommonFenceInputGroup.tsx

@@ -1,15 +1,15 @@
 import { Box, styled, Tooltip } from '@mui/material';
 import { FC, ReactElement, ReactNode, useMemo } from 'react';
 
-import INPUT_TYPES from '../lib/consts/INPUT_TYPES';
-
-import FlexBox from './FlexBox';
-import InputWithRef from './InputWithRef';
-import OutlinedInputWithLabel from './OutlinedInputWithLabel';
-import { ExpandablePanel } from './Panels';
-import SelectWithLabel from './SelectWithLabel';
-import SwitchWithLabel from './SwitchWithLabel';
-import { BodyText } from './Text';
+import INPUT_TYPES from '../../lib/consts/INPUT_TYPES';
+
+import FlexBox from '../FlexBox';
+import InputWithRef from '../InputWithRef';
+import OutlinedInputWithLabel from '../OutlinedInputWithLabel';
+import { ExpandablePanel } from '../Panels';
+import SelectWithLabel from '../SelectWithLabel';
+import SwitchWithLabel from '../SwitchWithLabel';
+import { BodyText } from '../Text';
 
 const CHECKED_STATES: Array<string | undefined> = ['1', 'on'];
 const ID_SEPARATOR = '-';

striker-ui/components/ManageFence/EditFenceInputGroup.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react';
 
 import CommonFenceInputGroup from './CommonFenceInputGroup';
-import Spinner from './Spinner';
+import Spinner from '../Spinner';
 
 const EditFenceInputGroup: FC<EditFenceInputGroupProps> = ({
   fenceId,

striker-ui/components/ManageFence/ManageFencePanel.tsx

@@ -8,29 +8,29 @@ import {
   useState,
 } from 'react';
 
-import API_BASE_URL from '../lib/consts/API_BASE_URL';
+import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 
 import AddFenceInputGroup from './AddFenceInputGroup';
-import api from '../lib/api';
+import api from '../../lib/api';
 import { ID_SEPARATOR } from './CommonFenceInputGroup';
-import ConfirmDialog from './ConfirmDialog';
+import ConfirmDialog from '../ConfirmDialog';
 import EditFenceInputGroup from './EditFenceInputGroup';
-import FlexBox from './FlexBox';
-import handleAPIError from '../lib/handleAPIError';
-import List from './List';
-import { Panel, PanelHeader } from './Panels';
-import periodicFetch from '../lib/fetchers/periodicFetch';
-import Spinner from './Spinner';
+import FlexBox from '../FlexBox';
+import handleAPIError from '../../lib/handleAPIError';
+import List from '../List';
+import { Panel, PanelHeader } from '../Panels';
+import periodicFetch from '../../lib/fetchers/periodicFetch';
+import Spinner from '../Spinner';
 import {
   BodyText,
   HeaderText,
   InlineMonoText,
   MonoText,
+  SensitiveText,
   SmallText,
-} from './Text';
-import useIsFirstRender from '../hooks/useIsFirstRender';
-import useProtectedState from '../hooks/useProtectedState';
-import SensitiveText from './Text/SensitiveText';
+} from '../Text';
+import useIsFirstRender from '../../hooks/useIsFirstRender';
+import useProtectedState from '../../hooks/useProtectedState';
 
 type FormFenceParameterData = {
   fenceAgent: string;
@@ -143,7 +143,7 @@ const buildConfirmFenceParameters = (
   />
 );
 
-const ManageFencesPanel: FC = () => {
+const ManageFencePanel: FC = () => {
   const isFirstRender = useIsFirstRender();
 
   const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
@@ -333,4 +333,4 @@ const ManageFencesPanel: FC = () => {
   );
 };
 
-export default ManageFencesPanel;
+export default ManageFencePanel;

striker-ui/components/ManageFence/index.tsx

@@ -0,0 +1,3 @@
+import ManageFencePanel from './ManageFencePanel';
+
+export default ManageFencePanel;

striker-ui/pages/manage-element/index.tsx

@@ -7,6 +7,7 @@ import getQueryParam from '../../lib/getQueryParam';
 import Grid from '../../components/Grid';
 import handleAPIError from '../../lib/handleAPIError';
 import Header from '../../components/Header';
+import ManageFencePanel from '../../components/ManageFence';
 import { Panel } from '../../components/Panels';
 import PrepareHostForm from '../../components/PrepareHostForm';
 import PrepareNetworkForm from '../../components/PrepareNetworkForm';
@@ -21,9 +22,9 @@ import useProtectedState from '../../hooks/useProtectedState';
 const MAP_TO_PAGE_TITLE: Record<string, string> = {
   'prepare-host': 'Prepare Host',
   'prepare-network': 'Prepare Network',
-  'manage-fence-devices': 'Manage Fence Devices',
-  'manage-upses': 'Manage UPSes',
-  'manage-manifests': 'Manage Manifests',
+  'manage-fence': 'Manage Fence Devices',
+  'manage-ups': 'Manage UPSes',
+  'manage-manifest': 'Manage Manifests',
 };
 const PAGE_TITLE_LOADING = 'Loading';
 const STEP_CONTENT_GRID_COLUMNS = { md: 8, sm: 6, xs: 1 };
@@ -116,6 +117,19 @@ const PrepareNetworkTabContent: FC = () => {
   );
 };
 
+const ManageFenceTabContent: FC = () => (
+  <Grid
+    columns={STEP_CONTENT_GRID_COLUMNS}
+    layout={{
+      'managefence-left-column': {},
+      'managefence-center-column': {
+        children: <ManageFencePanel />,
+        ...STEP_CONTENT_GRID_CENTER_COLUMN,
+      },
+    }}
+  />
+);
+
 const ManageElement: FC = () => {
   const {
     isReady,
@@ -162,7 +176,7 @@ const ManageElement: FC = () => {
         >
           <Tab label="Prepare host" value="prepare-host" />
           <Tab label="Prepare network" value="prepare-network" />
-          <Tab label="Manage fence devices" value="manage-fence-devices" />
+          <Tab label="Manage fence devices" value="manage-fence" />
         </Tabs>
       </Panel>
       <TabContent changingTabId={pageTabId} tabId="prepare-host">
@@ -171,8 +185,8 @@ const ManageElement: FC = () => {
       <TabContent changingTabId={pageTabId} tabId="prepare-network">
         <PrepareNetworkTabContent />
       </TabContent>
-      <TabContent changingTabId={pageTabId} tabId="manage-fence-devices">
-        {}
+      <TabContent changingTabId={pageTabId} tabId="manage-fence">
+        <ManageFenceTabContent />
       </TabContent>
     </>
   );