Merge 70e418838a into 1e85671688

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 (
     <Modal onHide={onHide} title={title}>
-      <Formik
-        initialValues={initialValues}
-        enableReinitialize={true}
-        onSubmit={handleCreate}
-        validationSchema={validationSchema}
-      >
-        {(formik) => (
-          <>
-            <Tabs value={openTab} onChange={setOpenTab}>
-              {tabs.map((tab) => (
-                <Tab key={tab.value} value={tab.value} title={tab.title} />
-              ))}
-            </Tabs>
-
-            <StyledScrollView height="500px">
-              {tabs.map(renderTab)}
-            </StyledScrollView>
-
-            <Actions>
-              <Button onClick={reportErrorsAndSubmit(formik)}>Save</Button>
-            </Actions>
-          </>
+      <Container>
+        {items.length > 0 && (
+          <ResourceList
+            items={items}
+            newActionText={`New ${resourceType}`}
+            getText={getText}
+            onNew={handleNew}
+            onRemove={handleRemove}
+            onEdit={handleEdit}
+            selectedItem={selectedItem?.key}
+          />
         )}
-      </Formik>
+        <FormContainer>
+          <Formik
+            initialValues={initialValues}
+            enableReinitialize={true}
+            onSubmit={handleCreate}
+            validationSchema={validationSchema}
+          >
+            {(formik) => (
+              <>
+                <Tabs value={openTab} onChange={setOpenTab}>
+                  {tabs.map((tab) => (
+                    <Tab key={tab.value} value={tab.value} title={tab.title} />
+                  ))}
+                </Tabs>
+
+                <StyledScrollView height="500px">
+                  {tabs.map(renderTab)}
+                </StyledScrollView>
+
+                <Actions>
+                  <Button onClick={reportErrorsAndSubmit(formik)}>Save</Button>
+                </Actions>
+              </>
+            )}
+          </Formik>
+        </FormContainer>
+      </Container>
     </Modal>
   );
 };

services/frontend/src/components/ResourceList.tsx

@@ -1,15 +1,16 @@
 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";
+import { FunctionComponent, ReactElement, ReactNode } from "react";
 
-export interface INetworkListProps {
-  networks: Record<string, any>;
-  selectedUuid: string;
-  onEdit: (networkUuid: string) => void;
+export interface IResourceListProps {
+  items: string[];
+  selectedItem: string;
+  newActionText: string;
+  getText: (uuid: string) => ReactNode;
+  onEdit: (item: string) => void;
   onNew: () => void;
-  onRemove: (networkUuid: string) => void;
+  onRemove: (item: string) => void;
 }
 
 interface IListItemProps {
@@ -58,35 +59,41 @@ const RemoveButton = styled(IconButton)`
   max-height: 16px;
 `;
 
-const NetworkList: FunctionComponent<INetworkListProps> = (
-  props: INetworkListProps
+const ResourceList: FunctionComponent<IResourceListProps> = (
+  props: IResourceListProps
 ): ReactElement => {
-  const { onNew, onRemove, onEdit, networks, selectedUuid } = props;
+  const {
+    onNew,
+    onRemove,
+    onEdit,
+    getText,
+    items,
+    selectedItem,
+    newActionText
+  } = props;
 
   const handleEdit = (networkUuid: string) => () => onEdit(networkUuid);
 
-  const handleRemove = (e: any, networkUuid: string) => {
-    e.stopPropagation();
+  const handleRemove = (networkUuid: string) => (event: any) => {
+    event.stopPropagation();
     onRemove(networkUuid);
   };
 
   return (
     <Root>
       <Top>
-        {Object.keys(networks).map((networkUuid: string) => (
+        {items.map((item: string) => (
           <ListItem
-            key={networkUuid}
-            onClick={handleEdit(networkUuid)}
-            selected={networkUuid === selectedUuid}
+            key={item}
+            onClick={handleEdit(item)}
+            selected={item === selectedItem}
           >
-            <ListItemText>
-              {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)}
-            </ListItemText>
+            <ListItemText>{getText(item)}</ListItemText>
             <RemoveButton
               variant="soft"
               size="sm"
               color="danger"
-              onClick={(e) => handleRemove(e, networkUuid)}
+              onClick={handleRemove(item)}
             >
               <MinusSmIcon className="h-4 w-4" />
             </RemoveButton>
@@ -97,11 +104,11 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
       <Bottom>
         <Button variant="plain" size="sm" onClick={onNew}>
           <PlusIcon className="h-4 w-4 mr-2" />
-          New network
+          {newActionText}
         </Button>
       </Bottom>
     </Root>
   );
 };
 
-export default NetworkList;
+export default ResourceList;

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) && (
         <Container>
           {networkKeys.length > 0 && (
-            <NetworkList
-              networks={networks}
+            <ResourceList
+              items={networkKeys}
+              newActionText="New network"
+              getText={(uuid: string) =>
+                truncateStr(networks[uuid].canvasConfig.node_name, 10)
+              }
               onNew={handleNew}
               onRemove={handleRemove}
               onEdit={handleEdit}
-              selectedUuid={selectedNetwork?.key}
+              selectedItem={selectedNetwork?.key}
             />
           )}
 

services/frontend/src/components/modals/docker-compose/service/Create.tsx

@@ -35,10 +35,13 @@ const CreateServiceModal = (props: IModalServiceProps) => {
 
   return (
     <FormModal
-      title="Create service"
+      title="Services > New"
+      resourceType="service"
       tabs={tabs}
+      items={["test"]}
       getInitialValues={getInitialValues}
       getFinalValues={getFinalValues}
+      getText={() => "test"}
       validationSchema={validationSchema}
       onHide={onHide}
       onCreate={handleCreate}

services/frontend/src/components/modals/docker-compose/service/Edit.tsx

@@ -40,10 +40,13 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
 
   return (
     <FormModal
-      title="Edit service"
+      title="Services > Edit"
+      resourceType="service"
       tabs={tabs}
+      items={["test"]}
       getInitialValues={getInitialValues}
       getFinalValues={getFinalValues}
+      getText={() => "test"}
       validationSchema={validationSchema}
       onHide={onHide}
       onCreate={handleUpdate}

services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx

@@ -32,10 +32,13 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
 
   return (
     <FormModal
-      title="Add volume"
+      title="Volumes > New"
+      resourceType="volume"
       tabs={tabs}
+      items={["test"]}
       getInitialValues={getInitialValues}
       getFinalValues={getFinalValues}
+      getText={() => "test"}
       validationSchema={validationSchema}
       onHide={onHide}
       onCreate={handleCreate}

services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx

@@ -39,10 +39,13 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
 
   return (
     <FormModal
-      title="Edit volume"
+      title="Volumes > Edit"
+      resourceType="volume"
       tabs={tabs}
       getInitialValues={getInitialValues}
       getFinalValues={getFinalValues}
+      items={["test"]}
+      getText={() => "test"}
       selectedNode={selectedNode}
       validationSchema={validationSchema}
       onHide={onHide}