From f25cef4d452fff06a7134811fccb997c0792d6a5 Mon Sep 17 00:00:00 2001
From: Alexey Vasyukov <vasyukov.alexey.v@gmail.com>
Date: Sun, 4 Dec 2022 22:44:00 +0300
Subject: [PATCH] feat(#27): add option to include directories from another
 collection

---
 .../forms/collection.form copy.tsx            | 174 +++++++++++++++
 .../collections/forms/collection.form.tsx     |  95 +-------
 .../include-directories/directory.node.tsx    |  55 +++++
 .../include-directories.field.tsx             | 210 ++++++++++++++++++
 .../forms/fields/include-directories/index.ts |   1 +
 .../pages/collections/forms/fields/index.ts   |   1 +
 .../modals/create-collection.modal.tsx        |   2 +-
 .../modals/update-collection.modal.tsx        |   1 +
 .../pages/side-bar/nodes/collection.node.tsx  |   3 +-
 src/app/pages/side-bar/side-bar.tsx           |   1 +
 .../collection-types/grpc/tls/tls.form.tsx    |   2 +-
 11 files changed, 451 insertions(+), 94 deletions(-)
 create mode 100644 src/app/pages/collections/forms/collection.form copy.tsx
 create mode 100644 src/app/pages/collections/forms/fields/include-directories/directory.node.tsx
 create mode 100644 src/app/pages/collections/forms/fields/include-directories/include-directories.field.tsx
 create mode 100644 src/app/pages/collections/forms/fields/include-directories/index.ts
 create mode 100644 src/app/pages/collections/forms/fields/index.ts

diff --git a/src/app/pages/collections/forms/collection.form copy.tsx b/src/app/pages/collections/forms/collection.form copy.tsx
new file mode 100644
index 0000000..056a85d
--- /dev/null
+++ b/src/app/pages/collections/forms/collection.form copy.tsx	
@@ -0,0 +1,174 @@
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Container, Input, Spacer, styled, Table, Text } from '@nextui-org/react';
+import { nanoid } from 'nanoid';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { EzyButton, FileInput } from '@components';
+import { Collection, CollectionType } from '@storage';
+
+export interface CollectionFormProps {
+  id?: string;
+
+  defaultValues?: Partial<Collection<CollectionType>>;
+
+  onSubmit: (payload: Collection<CollectionType>) => void;
+}
+
+const PathComponent = styled(Text, {
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  flex: 1,
+});
+
+type IncludeDirectoriesContainerProps = {
+  value?: string[];
+
+  onChange: (value: string[]) => void;
+};
+
+const IncludeDirectoriesContainer = React.forwardRef<
+  HTMLDivElement,
+  IncludeDirectoriesContainerProps
+>(({ onChange, value = [] }, ref) => {
+  const [directories, setDirectories] = React.useState<string[]>(value);
+  const handleAddPathButtonClick = async () => {
+    const paths = await window.electronDialog.open({ properties: ['openDirectory'] });
+    const newDirectories = [...directories, ...paths];
+
+    setDirectories(newDirectories);
+    onChange(newDirectories);
+  };
+
+  const handleDeletePathButtonClick = (path: string) => () => {
+    const newDirectories = directories.filter((item) => item !== path);
+
+    setDirectories(newDirectories);
+    onChange(newDirectories);
+  };
+
+  return (
+    <div ref={ref}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Text weight="normal" size={14} css={{ userSelect: 'none', paddingLeft: 4 }}>
+          Include directories
+        </Text>
+        <Spacer x={0.5} />
+        <EzyButton
+          size="xs"
+          bordered
+          borderWeight="light"
+          icon={<FontAwesomeIcon size="sm" icon={faPlus} />}
+          css={{ minWidth: 10, color: '$ezy', borderColor: '$accents3' }}
+          onClick={handleAddPathButtonClick}
+        />
+      </div>
+      <Spacer y={0.3} />
+      <Table
+        bordered
+        borderWeight="light"
+        fixed
+        selectionMode="single"
+        color="primary"
+        aria-label="include-directories-table"
+      >
+        <Table.Header>
+          <Table.Column>Path</Table.Column>
+        </Table.Header>
+        <Table.Body>
+          {directories.map((directory) => (
+            <Table.Row key={nanoid()}>
+              <Table.Cell css={{ display: 'flex', alignItems: 'center' }}>
+                <PathComponent small>{directory}</PathComponent>
+                <Spacer y={0} />
+                <Button
+                  size="xs"
+                  bordered
+                  borderWeight="light"
+                  color="error"
+                  icon={<FontAwesomeIcon icon={faTrash} />}
+                  css={{ marginLeft: 'auto', minWidth: 10 }}
+                  onClick={handleDeletePathButtonClick(directory)}
+                />
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+});
+
+export const CollectionForm: React.FC<CollectionFormProps> = ({
+  onSubmit = () => {},
+  id,
+  defaultValues,
+}) => {
+  const {
+    control,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Collection<CollectionType>>({ defaultValues });
+
+  React.useEffect(() => {
+    reset();
+  }, [defaultValues]);
+
+  return (
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      <Container
+        gap={0}
+        display="flex"
+        direction="column"
+        wrap="nowrap"
+        css={{
+          overflow: 'hidden',
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <Input
+          autoFocus
+          bordered
+          borderWeight="light"
+          size="sm"
+          animated={false}
+          label="Name"
+          clearable
+          color={errors.name ? 'error' : 'default'}
+          {...register('name', { required: true })}
+        />
+        <Spacer />
+        <Controller
+          name="options.path"
+          control={control}
+          rules={{
+            required: true,
+          }}
+          render={({ field }) => (
+            <FileInput
+              bordered
+              borderWeight="light"
+              buttonColor="default"
+              size="sm"
+              animated={false}
+              label="Protobuf path"
+              accept=".proto"
+              color={errors.options?.path ? 'error' : 'default'}
+              {...field}
+            />
+          )}
+        />
+        <Spacer />
+        <Controller
+          name="options.includeDirs"
+          control={control}
+          render={({ field }) => <IncludeDirectoriesContainer {...field} />}
+        />
+      </Container>
+    </form>
+  );
+};
diff --git a/src/app/pages/collections/forms/collection.form.tsx b/src/app/pages/collections/forms/collection.form.tsx
index 056a85d..7188ed0 100644
--- a/src/app/pages/collections/forms/collection.form.tsx
+++ b/src/app/pages/collections/forms/collection.form.tsx
@@ -1,13 +1,12 @@
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Container, Input, Spacer, styled, Table, Text } from '@nextui-org/react';
-import { nanoid } from 'nanoid';
+import { Container, Input, Spacer } from '@nextui-org/react';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import { EzyButton, FileInput } from '@components';
+import { FileInput } from '@components';
 import { Collection, CollectionType } from '@storage';
 
+import { IncludeDirectoriesField } from './fields';
+
 export interface CollectionFormProps {
   id?: string;
 
@@ -16,90 +15,6 @@ export interface CollectionFormProps {
   onSubmit: (payload: Collection<CollectionType>) => void;
 }
 
-const PathComponent = styled(Text, {
-  overflowX: 'auto',
-  overflowY: 'hidden',
-  flex: 1,
-});
-
-type IncludeDirectoriesContainerProps = {
-  value?: string[];
-
-  onChange: (value: string[]) => void;
-};
-
-const IncludeDirectoriesContainer = React.forwardRef<
-  HTMLDivElement,
-  IncludeDirectoriesContainerProps
->(({ onChange, value = [] }, ref) => {
-  const [directories, setDirectories] = React.useState<string[]>(value);
-  const handleAddPathButtonClick = async () => {
-    const paths = await window.electronDialog.open({ properties: ['openDirectory'] });
-    const newDirectories = [...directories, ...paths];
-
-    setDirectories(newDirectories);
-    onChange(newDirectories);
-  };
-
-  const handleDeletePathButtonClick = (path: string) => () => {
-    const newDirectories = directories.filter((item) => item !== path);
-
-    setDirectories(newDirectories);
-    onChange(newDirectories);
-  };
-
-  return (
-    <div ref={ref}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <Text weight="normal" size={14} css={{ userSelect: 'none', paddingLeft: 4 }}>
-          Include directories
-        </Text>
-        <Spacer x={0.5} />
-        <EzyButton
-          size="xs"
-          bordered
-          borderWeight="light"
-          icon={<FontAwesomeIcon size="sm" icon={faPlus} />}
-          css={{ minWidth: 10, color: '$ezy', borderColor: '$accents3' }}
-          onClick={handleAddPathButtonClick}
-        />
-      </div>
-      <Spacer y={0.3} />
-      <Table
-        bordered
-        borderWeight="light"
-        fixed
-        selectionMode="single"
-        color="primary"
-        aria-label="include-directories-table"
-      >
-        <Table.Header>
-          <Table.Column>Path</Table.Column>
-        </Table.Header>
-        <Table.Body>
-          {directories.map((directory) => (
-            <Table.Row key={nanoid()}>
-              <Table.Cell css={{ display: 'flex', alignItems: 'center' }}>
-                <PathComponent small>{directory}</PathComponent>
-                <Spacer y={0} />
-                <Button
-                  size="xs"
-                  bordered
-                  borderWeight="light"
-                  color="error"
-                  icon={<FontAwesomeIcon icon={faTrash} />}
-                  css={{ marginLeft: 'auto', minWidth: 10 }}
-                  onClick={handleDeletePathButtonClick(directory)}
-                />
-              </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  );
-});
-
 export const CollectionForm: React.FC<CollectionFormProps> = ({
   onSubmit = () => {},
   id,
@@ -166,7 +81,7 @@ export const CollectionForm: React.FC<CollectionFormProps> = ({
         <Controller
           name="options.includeDirs"
           control={control}
-          render={({ field }) => <IncludeDirectoriesContainer {...field} />}
+          render={({ field }) => <IncludeDirectoriesField {...field} />}
         />
       </Container>
     </form>
diff --git a/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx b/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx
new file mode 100644
index 0000000..9e3eb3b
--- /dev/null
+++ b/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx
@@ -0,0 +1,55 @@
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Container, Row, Text } from '@nextui-org/react';
+import React from 'react';
+
+import { TreeData, TreeNode, TreeNodeRendererProps } from '@components';
+
+export type DirectoryNodeData = TreeData & {
+  value: string;
+};
+
+export const DirectoryNode: React.FC<
+  TreeNodeRendererProps<DirectoryNodeData> & { onDirectoryRemove: (id: string) => void }
+> = ({ data, onDirectoryRemove }) => {
+  const content = (
+    <Container gap={0} fluid css={{ overflow: 'hidden' }}>
+      <Row gap={1} align="center" wrap="nowrap" css={{ whiteSpace: 'nowrap', userSelect: 'none' }}>
+        <Text size="$xs">{data.value}</Text>
+      </Row>
+    </Container>
+  );
+
+  const handleRemoveButtonClick = () => {
+    onDirectoryRemove(data.id);
+  };
+
+  const commandsContent = (
+    <Button
+      light
+      size="xs"
+      color="error"
+      css={{
+        float: 'right',
+        minWidth: 10,
+        color: '$accents9',
+        '&:hover': {
+          color: '$error',
+          backgroundColor: '$accents0',
+        },
+      }}
+      icon={<FontAwesomeIcon icon={faTrash} />}
+      onClick={handleRemoveButtonClick}
+    />
+  );
+
+  return (
+    <TreeNode
+      id={data.id}
+      key={data.id}
+      content={content}
+      commandsContent={commandsContent}
+      defaultPadding
+    />
+  );
+};
diff --git a/src/app/pages/collections/forms/fields/include-directories/include-directories.field.tsx b/src/app/pages/collections/forms/fields/include-directories/include-directories.field.tsx
new file mode 100644
index 0000000..1c17628
--- /dev/null
+++ b/src/app/pages/collections/forms/fields/include-directories/include-directories.field.tsx
@@ -0,0 +1,210 @@
+import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Container, Spacer, styled, Text } from '@nextui-org/react';
+import { nanoid } from 'nanoid';
+import React from 'react';
+import { MultiValue, SingleValue } from 'react-select';
+
+import { EzyButton, Select, Tree } from '@components';
+import { Collection, CollectionType, useCollectionsStore } from '@storage';
+
+import { DirectoryNode, DirectoryNodeData } from './directory.node';
+
+export interface CollectionFormProps {
+  id?: string;
+
+  defaultValues?: Partial<Collection<CollectionType>>;
+
+  onSubmit: (payload: Collection<CollectionType>) => void;
+}
+
+type SelectCollectionOption = {
+  label: string;
+  value: string;
+};
+
+type IncludeDirectoriesContainerProps = {
+  value?: string[];
+
+  onChange: (value: string[]) => void;
+};
+
+const ListWrapper = styled('ul', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+
+  margin: 0,
+
+  height: 150,
+  border: 'solid 1px $border',
+  br: '$space$7',
+
+  overflow: 'auto',
+});
+
+export const IncludeDirectoriesField = React.forwardRef<
+  HTMLDivElement,
+  IncludeDirectoriesContainerProps
+>(({ onChange, value = [] }, ref) => {
+  const collections = useCollectionsStore((store) =>
+    store.collections.filter((collection) => collection.type === CollectionType.GRPC)
+  ) as Collection<CollectionType.GRPC>[];
+  const [directories, setDirectories] = React.useState<DirectoryNodeData[]>(
+    value.map((item) => ({ id: nanoid(), value: item }))
+  );
+  const [isSelectCollectionShowing, setIsSelectCollectionShowing] = React.useState(false);
+  const [selectedCollection, setSelectedCollection] = React.useState<SelectCollectionOption>();
+
+  const handleAddDirectoryButtonClick = async () => {
+    const paths = await window.electronDialog.open({ properties: ['openDirectory'] });
+    const newDirectories = [
+      ...directories,
+      ...(paths || []).map((path) => ({
+        id: nanoid(),
+        value: path,
+      })),
+    ];
+
+    setDirectories(newDirectories);
+    onChange(newDirectories.map((directory) => directory.value));
+  };
+
+  const handleDirectoryRemove = (id: string) => {
+    const newDirectories = directories.filter((item) => item.id !== id);
+
+    setDirectories(newDirectories);
+    onChange(newDirectories.map((directory) => directory.value));
+  };
+
+  const handleAddFromCollectionButtonClick = () => {
+    setIsSelectCollectionShowing(true);
+  };
+
+  const handleCancelAddFromCollectionButtonClick = () => {
+    setIsSelectCollectionShowing(false);
+  };
+
+  const handleSelectCollectionChange = (
+    option: MultiValue<SelectCollectionOption> | SingleValue<SelectCollectionOption>
+  ) => {
+    const collection = option as SelectCollectionOption;
+    setSelectedCollection(collection);
+  };
+
+  const handleAddFromSelectedCollectionButtonClick = () => {
+    if (selectedCollection) {
+      const collection = collections.find((item) => item.id === selectedCollection.value);
+      if (collection) {
+        const newDirectories = [
+          ...directories,
+          ...(collection.options.includeDirs || []).map((path) => ({
+            id: nanoid(),
+            value: path,
+          })),
+        ];
+
+        setDirectories(newDirectories);
+        onChange(newDirectories.map((directory) => directory.value));
+      }
+    }
+    setIsSelectCollectionShowing(false);
+  };
+
+  return (
+    <div ref={ref}>
+      <Container gap={0} display="flex" alignItems="center">
+        <Text weight="normal" size={14} css={{ userSelect: 'none', paddingLeft: 4 }}>
+          Include directories (Optional)
+        </Text>
+        <Spacer x={0.5} />
+        {!isSelectCollectionShowing && (
+          <EzyButton
+            size="xs"
+            bordered
+            borderWeight="light"
+            icon={<FontAwesomeIcon size="sm" icon={faPlus} />}
+            css={{ minWidth: 10, color: '$accents8', borderColor: '$accents3' }}
+            onClick={handleAddDirectoryButtonClick}
+          />
+        )}
+        {isSelectCollectionShowing ? (
+          <Container
+            gap={0}
+            display="flex"
+            alignContent="center"
+            wrap="nowrap"
+            responsive={false}
+            css={{ flex: 1 }}
+          >
+            <Select
+              size="xs"
+              bordered
+              borderWeight="light"
+              options={collections.map((collection) => ({
+                label: collection.name,
+                value: collection.id,
+              }))}
+              value={selectedCollection}
+              onChange={handleSelectCollectionChange}
+              css={{
+                flex: 1,
+                '.react-select__menu-list': {
+                  height: 100,
+                },
+              }}
+            />
+            <Spacer x={0.5} />
+            <EzyButton
+              size="xs"
+              bordered
+              borderWeight="light"
+              icon={<FontAwesomeIcon size="sm" icon={faPlus} />}
+              css={{ minWidth: 10, color: '$accents8', borderColor: '$accents3' }}
+              onClick={handleAddFromSelectedCollectionButtonClick}
+            />
+            <Spacer x={0.2} />
+            <Button
+              size="xs"
+              bordered
+              borderWeight="light"
+              color="error"
+              icon={<FontAwesomeIcon size="sm" icon={faXmark} />}
+              css={{ minWidth: 10 }}
+              onClick={handleCancelAddFromCollectionButtonClick}
+            />
+          </Container>
+        ) : (
+          <EzyButton
+            size="xs"
+            bordered
+            borderWeight="light"
+            css={{ marginLeft: 'auto', minWidth: 10, color: '$accents8', borderColor: '$accents3' }}
+            onClick={handleAddFromCollectionButtonClick}
+          >
+            Add from another collection
+          </EzyButton>
+        )}
+      </Container>
+      <Spacer y={0.3} />
+      <ListWrapper>
+        {directories.length ? (
+          <Tree<DirectoryNodeData> data={directories}>
+            {directories.map((item) => (
+              <DirectoryNode
+                id={item.id}
+                key={item.id}
+                data={item}
+                onDirectoryRemove={handleDirectoryRemove}
+              />
+            ))}
+          </Tree>
+        ) : (
+          <Container display="flex" justify="center" alignItems="center" css={{ flex: 1 }}>
+            <Text css={{ color: '$accents6', userSelect: 'none' }}>No included directories</Text>
+          </Container>
+        )}
+      </ListWrapper>
+    </div>
+  );
+});
diff --git a/src/app/pages/collections/forms/fields/include-directories/index.ts b/src/app/pages/collections/forms/fields/include-directories/index.ts
new file mode 100644
index 0000000..2ff4f7d
--- /dev/null
+++ b/src/app/pages/collections/forms/fields/include-directories/index.ts
@@ -0,0 +1 @@
+export * from './include-directories.field';
diff --git a/src/app/pages/collections/forms/fields/index.ts b/src/app/pages/collections/forms/fields/index.ts
new file mode 100644
index 0000000..18e3da4
--- /dev/null
+++ b/src/app/pages/collections/forms/fields/index.ts
@@ -0,0 +1 @@
+export * from './include-directories';
diff --git a/src/app/pages/collections/modals/create-collection.modal.tsx b/src/app/pages/collections/modals/create-collection.modal.tsx
index ec4d2f7..b29b839 100644
--- a/src/app/pages/collections/modals/create-collection.modal.tsx
+++ b/src/app/pages/collections/modals/create-collection.modal.tsx
@@ -33,7 +33,7 @@ export const CreateCollectionModal: React.FC<ModalProps> = ({ onClose = () => {}
   return (
     <Modal
       aria-labelledby="create-collection-modal"
-      css={{ background: '$background', zIndex: '1 important!' }}
+      css={{ background: '$background' }}
       width="70%"
       onClose={onClose}
       {...props}
diff --git a/src/app/pages/collections/modals/update-collection.modal.tsx b/src/app/pages/collections/modals/update-collection.modal.tsx
index e27ac44..c3f8f9b 100644
--- a/src/app/pages/collections/modals/update-collection.modal.tsx
+++ b/src/app/pages/collections/modals/update-collection.modal.tsx
@@ -26,6 +26,7 @@ export const UpdateCollectionModal: React.FC<UpdateCollectionModalProps> = ({
   return (
     <Modal
       aria-labelledby="update-collection-modal"
+      width="70%"
       css={{ background: '$background' }}
       onClose={onClose}
       {...props}
diff --git a/src/app/pages/side-bar/nodes/collection.node.tsx b/src/app/pages/side-bar/nodes/collection.node.tsx
index 82f516b..03e9782 100644
--- a/src/app/pages/side-bar/nodes/collection.node.tsx
+++ b/src/app/pages/side-bar/nodes/collection.node.tsx
@@ -125,9 +125,8 @@ export const CollectionNode: React.FC<TreeNodeRendererProps<Collection<Collectio
         </Tree>
       </TreeNode>
       <UpdateCollectionModal
-        fullScreen
+        preventClose
         closeButton
-        blur
         defaultValues={data}
         open={updateCollectionModalVisible}
         onClose={() => setUpdateCollectionModalVisible(false)}
diff --git a/src/app/pages/side-bar/side-bar.tsx b/src/app/pages/side-bar/side-bar.tsx
index cfc7031..59a4b53 100644
--- a/src/app/pages/side-bar/side-bar.tsx
+++ b/src/app/pages/side-bar/side-bar.tsx
@@ -29,6 +29,7 @@ export const SideBar: React.FC = () => {
         />
       </Tooltip>
       <CreateCollectionModal
+        preventClose
         closeButton
         open={context?.modal.createCollectionModalVisible}
         onClose={() => context?.modal.setCreateCollectionModalVisible(false)}
diff --git a/src/app/pages/tabs-container/collection-types/grpc/tls/tls.form.tsx b/src/app/pages/tabs-container/collection-types/grpc/tls/tls.form.tsx
index ce53efa..e4075f8 100644
--- a/src/app/pages/tabs-container/collection-types/grpc/tls/tls.form.tsx
+++ b/src/app/pages/tabs-container/collection-types/grpc/tls/tls.form.tsx
@@ -25,7 +25,7 @@ const StyledInfoIcon = styled(FontAwesomeIcon, {
 const SystemCard: React.FC = () => (
   <Container fluid gap={0}>
     <Spacer />
-    <Card variant="bordered" isHoverable>
+    <Card variant="bordered" isHoverable css={{ backgroundColor: '$background' }}>
       <Card.Body>
         <Container gap={0} display="flex" direction="row" wrap="nowrap" alignItems="center">
           <StyledInfoIcon icon={faCircleInfo} />