From 70e418838a66923897858590ee15076a013b47f2 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Fri, 19 Aug 2022 23:23:53 +0530 Subject: [PATCH] temp --- .../frontend/src/components/FormModal.tsx | 88 ++++++++++---- .../docker-compose/network/NetworkList.tsx | 107 ------------------ .../modals/docker-compose/network/index.tsx | 14 ++- .../modals/docker-compose/service/Create.tsx | 5 +- .../modals/docker-compose/service/Edit.tsx | 5 +- .../volume/CreateVolumeModal.tsx | 5 +- .../docker-compose/volume/EditVolumeModal.tsx | 5 +- 7 files changed, 88 insertions(+), 141 deletions(-) delete mode 100644 services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx diff --git a/services/frontend/src/components/FormModal.tsx b/services/frontend/src/components/FormModal.tsx index 906cfc2..0c8ac0d 100644 --- a/services/frontend/src/components/FormModal.tsx +++ b/services/frontend/src/components/FormModal.tsx @@ -1,6 +1,7 @@ import { Fragment, FunctionComponent, + ReactNode, useCallback, useMemo, useState @@ -13,6 +14,7 @@ import { ScrollView } from "./ScrollView"; import Modal from "./Modal"; import Tabs from "./Tabs"; import Tab from "./Tab"; +import ResourceList from "./ResourceList"; export interface ITab { value: string; @@ -23,12 +25,15 @@ export interface ITab { export interface IFormModalProps { title: string; tabs: ITab[]; + items: string[]; onHide: () => void; getFinalValues: (values: any, selectedNode?: any) => any; getInitialValues: (selectedNode?: any) => any; + getText: (item: string) => ReactNode; validationSchema: any; onCreate: (finalValues: any, values: any, formik: any) => void; selectedNode?: any; + resourceType: string; } const StyledScrollView = styled(ScrollView)` @@ -40,6 +45,16 @@ const StyledScrollView = styled(ScrollView)` flex: 1 1 auto; `; +const Container = styled("div")` + display: flex; + flex-direction: row; +`; + +const FormContainer = styled("div")` + display: flex; + flex-direction: column; +`; + const Actions = styled("div")` display: flex; padding-top: 0.75rem; @@ -58,12 +73,15 @@ const FormModal = (props: IFormModalProps) => { const { title, tabs, + items, + validationSchema, getInitialValues, getFinalValues, - validationSchema, + getText, onHide, onCreate, - selectedNode + selectedNode, + resourceType } = props; const [openTab, setOpenTab] = useState(() => tabs[0].value); @@ -89,32 +107,52 @@ const FormModal = (props: IFormModalProps) => { ); }; + const handleNew = () => null; + const handleRemove = () => null; + const handleEdit = () => null; + const selectedItem = undefined as any; + return ( - - {(formik) => ( - <> - - {tabs.map((tab) => ( - - ))} - - - - {tabs.map(renderTab)} - - - - - - + + {items.length > 0 && ( + )} - + + + {(formik) => ( + <> + + {tabs.map((tab) => ( + + ))} + + + + {tabs.map(renderTab)} + + + + + + + )} + + + ); }; diff --git a/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx b/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx deleted file mode 100644 index bf20b46..0000000 --- a/services/frontend/src/components/modals/docker-compose/network/NetworkList.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { MinusSmIcon, PlusIcon } from "@heroicons/react/outline"; -import { Button, styled } from "@mui/joy"; -import IconButton from "@mui/joy/IconButton"; -import { FunctionComponent, ReactElement } from "react"; -import { truncateStr } from "../../../../utils"; - -export interface INetworkListProps { - networks: Record; - selectedUuid: string; - onEdit: (networkUuid: string) => void; - onNew: () => void; - onRemove: (networkUuid: string) => void; -} - -interface IListItemProps { - selected: boolean; -} - -const Root = styled("div")` - padding: ${({ theme }) => theme.spacing(0)}; - display: flex; - flex-direction: column; - justify-content: space-between; - border-right: solid #eaeaea 1px; -`; - -const Top = styled("div")` - display: flex; - flex-direction: column; -`; - -const Bottom = styled("div")` - padding: ${({ theme }) => theme.spacing(1, 2)}; -`; - -const ListItem = styled("div")` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - column-gap: ${({ theme }) => theme.spacing(1)}; - padding: ${({ theme }) => theme.spacing(1, 1, 1, 2)}; - cursor: pointer; - background-color: ${({ selected }) => selected && "#f5f5f5"}; - - &:hover { - background-color: #f5f5f5; - } -`; - -const ListItemText = styled("h5")` - font-weight: 400; - font-size: 14px; -`; - -const RemoveButton = styled(IconButton)` - width: 24px; - max-height: 16px; -`; - -const NetworkList: FunctionComponent = ( - props: INetworkListProps -): ReactElement => { - const { onNew, onRemove, onEdit, networks, selectedUuid } = props; - - const handleEdit = (networkUuid: string) => () => onEdit(networkUuid); - - const handleRemove = (e: any, networkUuid: string) => { - e.stopPropagation(); - onRemove(networkUuid); - }; - - return ( - - - {Object.keys(networks).map((networkUuid: string) => ( - - - {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)} - - handleRemove(e, networkUuid)} - > - - - - ))} - - - - - - - ); -}; - -export default NetworkList; diff --git a/services/frontend/src/components/modals/docker-compose/network/index.tsx b/services/frontend/src/components/modals/docker-compose/network/index.tsx index 43d1ef4..2ac0462 100644 --- a/services/frontend/src/components/modals/docker-compose/network/index.tsx +++ b/services/frontend/src/components/modals/docker-compose/network/index.tsx @@ -2,10 +2,10 @@ import { useCallback, useState } from "react"; import CreateNetworkModal from "./CreateNetworkModal"; import { CallbackFunction, IEditNetworkForm } from "../../../../types"; import EditNetworkModal from "./EditNetworkModal"; -import { attachUUID, toaster } from "../../../../utils"; +import { attachUUID, toaster, truncateStr } from "../../../../utils"; import { getFinalValues } from "./form-utils"; import EmptyNetworks from "./EmptyNetworks"; -import NetworkList from "./NetworkList"; +import ResourceList from "../../../ResourceList"; import { styled } from "@mui/joy"; import Modal from "../../../Modal"; @@ -95,12 +95,16 @@ const ModalNetwork = (props: IModalNetworkProps) => { {(networkKeys.length > 0 || showCreate) && ( {networkKeys.length > 0 && ( - + truncateStr(networks[uuid].canvasConfig.node_name, 10) + } onNew={handleNew} onRemove={handleRemove} onEdit={handleEdit} - selectedUuid={selectedNetwork?.key} + selectedItem={selectedNetwork?.key} /> )} diff --git a/services/frontend/src/components/modals/docker-compose/service/Create.tsx b/services/frontend/src/components/modals/docker-compose/service/Create.tsx index 7e528c8..82868bd 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Create.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Create.tsx @@ -35,10 +35,13 @@ const CreateServiceModal = (props: IModalServiceProps) => { return ( "test"} validationSchema={validationSchema} onHide={onHide} onCreate={handleCreate} diff --git a/services/frontend/src/components/modals/docker-compose/service/Edit.tsx b/services/frontend/src/components/modals/docker-compose/service/Edit.tsx index b72d5ab..7e9caa7 100644 --- a/services/frontend/src/components/modals/docker-compose/service/Edit.tsx +++ b/services/frontend/src/components/modals/docker-compose/service/Edit.tsx @@ -40,10 +40,13 @@ const ModalServiceEdit = (props: IModalServiceProps) => { return ( "test"} validationSchema={validationSchema} onHide={onHide} onCreate={handleUpdate} diff --git a/services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx b/services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx index f3dde86..8e609d2 100644 --- a/services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx +++ b/services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx @@ -32,10 +32,13 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => { return ( "test"} validationSchema={validationSchema} onHide={onHide} onCreate={handleCreate} diff --git a/services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx b/services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx index 608a9fa..7caa2c8 100644 --- a/services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx +++ b/services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx @@ -39,10 +39,13 @@ const EditVolumeModal = (props: IEditVolumeModal) => { return ( "test"} selectedNode={selectedNode} validationSchema={validationSchema} onHide={onHide}