From ccd977e39d6b0d222f3f0dda5c0b9018a64ee5f2 Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Tue, 28 Feb 2023 14:03:37 -0500 Subject: [PATCH] refactor(striker-ui): group manage fence related components --- .../{ => ManageFence}/AddFenceInputGroup.tsx | 8 ++--- .../CommonFenceInputGroup.tsx | 18 +++++------ .../{ => ManageFence}/EditFenceInputGroup.tsx | 2 +- .../ManageFencePanel.tsx} | 30 +++++++++---------- striker-ui/components/ManageFence/index.tsx | 3 ++ striker-ui/pages/manage-element/index.tsx | 26 ++++++++++++---- 6 files changed, 52 insertions(+), 35 deletions(-) rename striker-ui/components/{ => ManageFence}/AddFenceInputGroup.tsx (94%) rename striker-ui/components/{ => ManageFence}/CommonFenceInputGroup.tsx (94%) rename striker-ui/components/{ => ManageFence}/EditFenceInputGroup.tsx (96%) rename striker-ui/components/{ManageFencesPanel.tsx => ManageFence/ManageFencePanel.tsx} (93%) create mode 100644 striker-ui/components/ManageFence/index.tsx diff --git a/striker-ui/components/AddFenceInputGroup.tsx b/striker-ui/components/ManageFence/AddFenceInputGroup.tsx similarity index 94% rename from striker-ui/components/AddFenceInputGroup.tsx rename to striker-ui/components/ManageFence/AddFenceInputGroup.tsx index 5f083fdf..8657a6d5 100644 --- a/striker-ui/components/AddFenceInputGroup.tsx +++ b/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 = ({ fenceTemplate: externalFenceTemplate, diff --git a/striker-ui/components/CommonFenceInputGroup.tsx b/striker-ui/components/ManageFence/CommonFenceInputGroup.tsx similarity index 94% rename from striker-ui/components/CommonFenceInputGroup.tsx rename to striker-ui/components/ManageFence/CommonFenceInputGroup.tsx index 95756237..9c70146e 100644 --- a/striker-ui/components/CommonFenceInputGroup.tsx +++ b/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 = ['1', 'on']; const ID_SEPARATOR = '-'; diff --git a/striker-ui/components/EditFenceInputGroup.tsx b/striker-ui/components/ManageFence/EditFenceInputGroup.tsx similarity index 96% rename from striker-ui/components/EditFenceInputGroup.tsx rename to striker-ui/components/ManageFence/EditFenceInputGroup.tsx index 2c382b54..f9989d14 100644 --- a/striker-ui/components/EditFenceInputGroup.tsx +++ b/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 = ({ fenceId, diff --git a/striker-ui/components/ManageFencesPanel.tsx b/striker-ui/components/ManageFence/ManageFencePanel.tsx similarity index 93% rename from striker-ui/components/ManageFencesPanel.tsx rename to striker-ui/components/ManageFence/ManageFencePanel.tsx index 6b52d587..efa60324 100644 --- a/striker-ui/components/ManageFencesPanel.tsx +++ b/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({}); @@ -333,4 +333,4 @@ const ManageFencesPanel: FC = () => { ); }; -export default ManageFencesPanel; +export default ManageFencePanel; diff --git a/striker-ui/components/ManageFence/index.tsx b/striker-ui/components/ManageFence/index.tsx new file mode 100644 index 00000000..b2bd1a47 --- /dev/null +++ b/striker-ui/components/ManageFence/index.tsx @@ -0,0 +1,3 @@ +import ManageFencePanel from './ManageFencePanel'; + +export default ManageFencePanel; diff --git a/striker-ui/pages/manage-element/index.tsx b/striker-ui/pages/manage-element/index.tsx index 5add77d6..18eceb99 100644 --- a/striker-ui/pages/manage-element/index.tsx +++ b/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 = { '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 = () => ( + , + ...STEP_CONTENT_GRID_CENTER_COLUMN, + }, + }} + /> +); + const ManageElement: FC = () => { const { isReady, @@ -162,7 +176,7 @@ const ManageElement: FC = () => { > - + @@ -171,8 +185,8 @@ const ManageElement: FC = () => { - - {} + + );