feat(frontend): add storage unit card

hkdeman · hkdeman · commit 5b75050ec316 · 2024-07-29T17:33:28.000+05:30
diff --git a/frontend/src/components/dropdown.tsx b/frontend/src/components/dropdown.tsx
@@ -59,7 +59,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
                         {props.value?.icon} {props.value?.label}
                     </div>
                     {cloneElement(Icons.DownCaret, {
-                        className: "w-4 h-4 stroke-gray-600",
+                        className: "w-4 h-4 stroke-neutral-600 dark:stroke-neutral-400",
                     })}
                 </div>
                 <div className={classNames("absolute z-10 divide-y rounded-lg shadow bg-white py-1 border border-gray-200 overflow-y-auto max-h-40 dark:bg-white/10 dark:backdrop-blur-md dark:border-white/20", {
diff --git a/frontend/src/generated/graphql.tsx b/frontend/src/generated/graphql.tsx
@@ -64,12 +64,30 @@ export type LoginCredentials = {
 
 export type Mutation = {
   __typename?: 'Mutation';
+  AddRow: StatusResponse;
+  AddStorageUnit: StatusResponse;
   Login: StatusResponse;
   Logout: StatusResponse;
   UpdateStorageUnit: StatusResponse;
 };
 
 
+export type MutationAddRowArgs = {
+  schema: Scalars['String']['input'];
+  storageUnit: Scalars['String']['input'];
+  type: DatabaseType;
+  values: Array<RecordInput>;
+};
+
+
+export type MutationAddStorageUnitArgs = {
+  fields: Array<RecordInput>;
+  schema: Scalars['String']['input'];
+  storageUnit: Scalars['String']['input'];
+  type: DatabaseType;
+};
+
+
 export type MutationLoginArgs = {
   credentials: LoginCredentials;
 };
@@ -201,6 +219,16 @@ export type RawExecuteQueryVariables = Exact<{
 
 export type RawExecuteQuery = { __typename?: 'Query', RawExecute: { __typename?: 'RowsResult', Rows: Array<Array<string>>, Columns: Array<{ __typename?: 'Column', Type: string, Name: string }> } };
 
+export type AddStorageUnitMutationVariables = Exact<{
+  type: DatabaseType;
+  schema: Scalars['String']['input'];
+  storageUnit: Scalars['String']['input'];
+  fields: Array<RecordInput> | RecordInput;
+}>;
+
+
+export type AddStorageUnitMutation = { __typename?: 'Mutation', AddStorageUnit: { __typename?: 'StatusResponse', Status: boolean } };
+
 export type GetStorageUnitRowsQueryVariables = Exact<{
   type: DatabaseType;
   schema: Scalars['String']['input'];
@@ -469,6 +497,47 @@ export type RawExecuteQueryHookResult = ReturnType<typeof useRawExecuteQuery>;
 export type RawExecuteLazyQueryHookResult = ReturnType<typeof useRawExecuteLazyQuery>;
 export type RawExecuteSuspenseQueryHookResult = ReturnType<typeof useRawExecuteSuspenseQuery>;
 export type RawExecuteQueryResult = Apollo.QueryResult<RawExecuteQuery, RawExecuteQueryVariables>;
+export const AddStorageUnitDocument = gql`
+    mutation AddStorageUnit($type: DatabaseType!, $schema: String!, $storageUnit: String!, $fields: [RecordInput!]!) {
+  AddStorageUnit(
+    type: $type
+    schema: $schema
+    storageUnit: $storageUnit
+    fields: $fields
+  ) {
+    Status
+  }
+}
+    `;
+export type AddStorageUnitMutationFn = Apollo.MutationFunction<AddStorageUnitMutation, AddStorageUnitMutationVariables>;
+
+/**
+ * __useAddStorageUnitMutation__
+ *
+ * To run a mutation, you first call `useAddStorageUnitMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useAddStorageUnitMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [addStorageUnitMutation, { data, loading, error }] = useAddStorageUnitMutation({
+ *   variables: {
+ *      type: // value for 'type'
+ *      schema: // value for 'schema'
+ *      storageUnit: // value for 'storageUnit'
+ *      fields: // value for 'fields'
+ *   },
+ * });
+ */
+export function useAddStorageUnitMutation(baseOptions?: Apollo.MutationHookOptions<AddStorageUnitMutation, AddStorageUnitMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<AddStorageUnitMutation, AddStorageUnitMutationVariables>(AddStorageUnitDocument, options);
+      }
+export type AddStorageUnitMutationHookResult = ReturnType<typeof useAddStorageUnitMutation>;
+export type AddStorageUnitMutationResult = Apollo.MutationResult<AddStorageUnitMutation>;
+export type AddStorageUnitMutationOptions = Apollo.BaseMutationOptions<AddStorageUnitMutation, AddStorageUnitMutationVariables>;
 export const GetStorageUnitRowsDocument = gql`
     query GetStorageUnitRows($type: DatabaseType!, $schema: String!, $storageUnit: String!, $where: String!, $pageSize: Int!, $pageOffset: Int!) {
   Row(
diff --git a/frontend/src/pages/storage-unit/add-storage-unit.graphql b/frontend/src/pages/storage-unit/add-storage-unit.graphql
@@ -0,0 +1,5 @@
+mutation AddStorageUnit($type: DatabaseType!, $schema: String!, $storageUnit: String!, $fields: [RecordInput!]!) {
+    AddStorageUnit(type: $type, schema: $schema, storageUnit: $storageUnit, fields: $fields) {
+        Status
+    }
+}
diff --git a/frontend/src/pages/storage-unit/storage-unit.tsx b/frontend/src/pages/storage-unit/storage-unit.tsx
@@ -1,18 +1,22 @@
-import { useQuery } from "@apollo/client";
+import classNames from "classnames";
+import { clone } from "lodash";
 import { FC, useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Handle, Position } from "reactflow";
-import { AnimatedButton } from "../../components/button";
+import { ActionButton, AnimatedButton } from "../../components/button";
 import { Card, ExpandableCard } from "../../components/card";
 import { EmptyMessage } from "../../components/common";
+import { createDropdownItem, Dropdown } from "../../components/dropdown";
 import { IGraphCardProps } from "../../components/graph/graph";
 import { Icons } from "../../components/icons";
+import { Input, InputWithlabel, Label } from "../../components/input";
 import { Loading } from "../../components/loading";
 import { InternalPage } from "../../components/page";
 import { InternalRoutes } from "../../config/routes";
-import { DatabaseType, GetStorageUnitsDocument, GetStorageUnitsQuery, GetStorageUnitsQueryVariables, StorageUnit } from "../../generated/graphql";
+import { DatabaseType, RecordInput, StorageUnit, useAddStorageUnitMutation, useGetStorageUnitsQuery } from "../../generated/graphql";
+import { notify } from "../../store/function";
 import { useAppSelector } from "../../store/hooks";
-import { getDatabaseStorageUnitLabel } from "../../utils/functions";
+import { getDatabaseStorageUnitLabel, isNoSQL } from "../../utils/functions";
 
 const StorageUnitCard: FC<{ unit: StorageUnit }> = ({ unit }) => {
     const [expanded, setExpanded] = useState(false);
@@ -80,9 +84,14 @@ const StorageUnitCard: FC<{ unit: StorageUnit }> = ({ unit }) => {
 
 export const StorageUnitPage: FC = () => {
     const navigate = useNavigate();
+    const [create, setCreate] = useState(false);
+    const [storageUnitName, setStorageUnitName] = useState("");
+    const [fields, setFields] = useState<RecordInput[]>([ {Key: "", Value: "" }]);
+    const [error, setError] = useState<string>();
     const schema = useAppSelector(state => state.database.schema);
     const current = useAppSelector(state => state.auth.current);
-    const { loading, data } = useQuery<GetStorageUnitsQuery, GetStorageUnitsQueryVariables>(GetStorageUnitsDocument, {
+    const [addStorageUnit,] = useAddStorageUnitMutation();
+    const { loading, data } = useGetStorageUnitsQuery({
         variables: {
             type: current?.Type as DatabaseType,
             schema,
@@ -99,6 +108,82 @@ export const StorageUnitPage: FC = () => {
         ];
     }, [current]);
 
+    const handleCreate = useCallback(() => {
+        setCreate(!create);
+    }, [create]);
+
+    const handleSubmit = useCallback(() => {
+        if (storageUnitName.length === 0) {
+            return setError("Name is required");
+        }
+        if (fields.some(field => field.Key.length === 0 || field.Value.length === 0)) {
+            return setError("Fields cannot be empty");
+        }
+        setError(undefined);
+        addStorageUnit({
+            variables: {
+                type: current?.Type as DatabaseType,
+                schema,
+                storageUnit: storageUnitName,
+                fields,
+            },
+            onCompleted() {
+                notify(`${getDatabaseStorageUnitLabel(current?.Type, true)} ${storageUnitName} created successfully!`, "success");
+                setStorageUnitName("");
+                setFields([]);
+            },
+            onError(e) {
+                notify(e.message, "error");
+            },
+        });
+    }, [addStorageUnit, current?.Type, fields, schema, storageUnitName]);
+
+    const handleAddField = useCallback(() => {
+        setFields(f => [...f, { Key: "", Value: "" }]);
+    }, []);
+
+    const handleFieldValueChange = useCallback((type: "Key" | "Value", index: number, value: string) => {
+        setFields(f => {
+            const newF = clone(f);
+            newF[index][type] = value;
+            return newF;
+        });
+    }, []);
+
+    const handleRemove = useCallback((index: number) => {
+        if (fields.length <= 1) {
+            return;
+        }
+        setFields(f => {
+            const newF = clone(f);
+            newF.splice(index, 1);
+            return newF;
+        })
+    }, [fields.length]);
+
+    const storageUnitTypesDropdownItems = useMemo(() => {
+        if (current?.Type == null || isNoSQL(current.Type)) {
+            return [];
+        }
+        let items: string[] = [];
+        
+        switch(current.Type) {
+          case DatabaseType.MariaDb:
+            items = ["VARCHAR", "INT", "TEXT", "DATE", "BOOLEAN"];
+            break;
+          case DatabaseType.MySql:
+            items = ["VARCHAR", "INT", "TEXT", "DATE", "BOOLEAN"];
+            break;
+          case DatabaseType.Postgres:
+            items = ["VARCHAR", "INT", "TEXT", "DATE", "BOOLEAN", "UUID", "JSONB"];
+            break;
+          case DatabaseType.Sqlite3:
+            items = ["TEXT", "INTEGER", "REAL", "BLOB", "NUMERIC"];
+            break;
+        }
+        return items.map(item => createDropdownItem(item));
+    }, [current?.Type]);
+
     if (loading) {
         return <InternalPage routes={routes}>
             <Loading />
@@ -112,10 +197,57 @@ export const StorageUnitPage: FC = () => {
         {
             data != null && (
                 data.StorageUnit.length === 0
-                ? <EmptyMessage icon={Icons.SadSmile} label={`No ${getDatabaseStorageUnitLabel(current?.Type)} found`} />
-                : data.StorageUnit.map(unit => (
-                    <StorageUnitCard key={unit.Name} unit={unit} />
-                ))
+                ? <>
+                    <EmptyMessage icon={Icons.SadSmile} label={`No ${getDatabaseStorageUnitLabel(current?.Type)} found`} />
+                </>
+                : <>
+                    <ExpandableCard className="overflow-visible" icon={{
+                        bgClassName: "bg-teal-500",
+                        component: Icons.Add,
+                    }} isExpanded={create} tag={<div className="text-red-700 dark:text-red-400 text-xs">
+                        {error}
+                    </div>}>
+                        <div className="flex grow flex-col justify-between my-2 text-neutral-800 dark:text-neutral-100">
+                            Create a {getDatabaseStorageUnitLabel(current?.Type, true)}
+                            <AnimatedButton className="self-end" icon={Icons.Add} label="Create" onClick={handleCreate} />
+                        </div>
+                        <div className="flex grow flex-col justify-between my-2 gap-4">
+                            <div className="flex flex-col gap-2">
+                                <InputWithlabel label="Name" value={storageUnitName} setValue={setStorageUnitName} />
+                                <div className="flex gap-2 justify-between">
+                                    <Label label="Field Name" />
+                                    <Label label="Value" />
+                                    <div className="w-14" />
+                                </div>
+                                {
+                                    fields.map((field, index) => (
+                                        <div className="flex gap-2">
+                                            <Input inputProps={{ className: "w-1/2" }} value={field.Key} setValue={(value) => handleFieldValueChange("Key", index, value)} placeholder="Enter field name" />
+                                            <Dropdown className="w-1/2" items={storageUnitTypesDropdownItems} value={createDropdownItem(field.Value)}
+                                                onChange={(item) => handleFieldValueChange("Value", index, item.id)} />
+                                            <div className="flex items-end mb-2">
+                                                <ActionButton disabled={fields.length === 1} containerClassName="w-6 h-6" icon={Icons.Delete} className={classNames({
+                                                    "stroke-red-500 dark:stroke-red-400": fields.length > 1,
+                                                    "stroke-neutral-300 dark:stroke-neutral-600": fields.length === 1,
+                                                })} onClick={() => handleRemove(index)} />
+                                            </div>
+                                        </div>
+                                    ))
+                                }
+                                <AnimatedButton className="self-end" icon={Icons.Add} label="Add field" onClick={handleAddField} />
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <AnimatedButton icon={Icons.Cancel} label="Cancel" onClick={handleCreate} />
+                                <AnimatedButton labelClassName="text-green-600 dark:text-green-300"
+                                    iconClassName="stroke-green-600 dark:stroke-green-300" icon={Icons.Add}
+                                    label="Submit" onClick={handleSubmit} />
+                            </div>
+                        </div>
+                    </ExpandableCard>
+                    {data.StorageUnit.map(unit => (
+                        <StorageUnitCard key={unit.Name} unit={unit} />
+                    ))}
+                </>
             )
         }
     </InternalPage>
diff --git a/frontend/src/utils/functions.ts b/frontend/src/utils/functions.ts
@@ -44,18 +44,18 @@ export function isNoSQL(databaseType: string) {
     return false;
 }
 
-export function getDatabaseStorageUnitLabel(databaseType: string | undefined) {
+export function getDatabaseStorageUnitLabel(databaseType: string | undefined, singular: boolean = false) {
     switch(databaseType) {
         case DatabaseType.ElasticSearch:
-            return "Indices";
+            return singular ? "Index" : "Indices";
         case DatabaseType.MongoDb:
-            return "Collections";
+            return singular ? "Collection" : "Collections";
         case DatabaseType.Redis:
-            return "Keys";
+            return singular ? "Key" : "Keys";
         case DatabaseType.MySql:
         case DatabaseType.Postgres:
         case DatabaseType.Sqlite3:
-            return "Tables";
+            return singular ? "Table" : "Tables";
     }
-    return "Storage Units";
+    return singular ? "Storage Unit" : "Storage Units";
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +mutation AddStorageUnit($type: DatabaseType!, $schema: String!, $storageUnit: String!, $fields: [RecordInput!]!) {
 +    AddStorageUnit(type: $type, schema: $schema, storageUnit: $storageUnit, fields: $fields) {
 +        Status
 +    }
 +}