Development to main, week 18

pwa/Dockerfile

@@ -8,6 +8,8 @@ COPY package.json package-lock.json ./
 # install node modules and build assets
 RUN npm install --legacy-peer-deps
 
+RUN npm install @parcel/watcher --legacy-peer-deps
+
 COPY . .
 
 RUN npm run build

pwa/gatsby-config.js

@@ -135,6 +135,10 @@ module.exports = {
             pathname: "/templates/[templateId]",
             crumbLabel: "Template",
           },
+          {
+            pathname: "/settings/databases/[databaseId]",
+            crumbLabel: "Database",
+          },
         ],
       },
     },

pwa/src/apiService/apiService.ts

@@ -23,6 +23,7 @@ import Synchroniation from "./resources/synchronization";
 import Application from "./resources/application";
 import Organization from "./resources/organization";
 import User from "./resources/user";
+import Database from "./resources/database";
 import Authentication from "./resources/authentication";
 import SecurityGroup from "./resources/securityGroup";
 import Mapping from "./resources/mapping";
@@ -199,6 +200,10 @@ export default class APIService {
     return new User(this.BaseClient, this.Send);
   }
 
+  public get Database(): Database {
+    return new Database(this.BaseClient, this.Send);
+  }
+
   public get Authentication(): Authentication {
     return new Authentication(this.BaseClient, this.Send);
   }

pwa/src/apiService/resources/database.ts

@@ -0,0 +1,58 @@
+import { AxiosInstance } from "axios";
+import { TSendFunction } from "../apiService";
+
+export default class Database {
+  private _instance: AxiosInstance;
+  private _send: TSendFunction;
+
+  constructor(instance: AxiosInstance, send: TSendFunction) {
+    this._instance = instance;
+    this._send = send;
+  }
+
+  public getAll = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/databases");
+
+    return data;
+  };
+
+  public getAllSelectOptions = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/databases?limit=200");
+
+    return data?.map((database: any) => ({ label: database.name, value: database.id }));
+  };
+
+  public getOne = async (id: string): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", `/admin/databases/${id}`);
+
+    return data;
+  };
+
+  public delete = async (variables: { id: string }): Promise<any> => {
+    const { id } = variables;
+
+    const { data } = await this._send(this._instance, "DELETE", `/admin/databases/${id}`, undefined, {
+      loading: "Removing database...",
+      success: "Database successfully removed.",
+    });
+    return data;
+  };
+
+  public createOrUpdate = async (variables: { payload: any; id?: string }): Promise<any> => {
+    const { payload, id } = variables;
+
+    if (id) {
+      const { data } = await this._send(this._instance, "PUT", `/admin/databases/${id}`, payload, {
+        loading: "Updating database...",
+        success: "Database successfully updated.",
+      });
+      return data;
+    }
+
+    const { data } = await this._send(this._instance, "POST", "/admin/databases", payload, {
+      loading: "Creating database...",
+      success: "Database successfully created.",
+    });
+    return data;
+  };
+}

pwa/src/apiService/resources/organization.ts

@@ -28,6 +28,16 @@ export default class Organization {
     return data;
   };
 
+  public delete = async (variables: { id: string }): Promise<any> => {
+    const { id } = variables;
+
+    const { data } = await this._send(this._instance, "DELETE", `/admin/organizations/${id}`, undefined, {
+      loading: "Removing organization...",
+      success: "Organization successfully removed.",
+    });
+    return data;
+  };
+
   public createOrUpdate = async (variables: { payload: any; id?: string }): Promise<any> => {
     const { payload, id } = variables;
 

pwa/src/context/isLoading.ts

@@ -16,6 +16,7 @@ export interface IIsLoadingContext {
   mappingForm?: boolean;
   loginForm?: boolean;
   templateForm?: boolean;
+  databaseForm?: boolean;
 }
 
 export const defaultIsLoadingContext: IIsLoadingContext = {};

pwa/src/context/tabs.ts

@@ -9,6 +9,7 @@ export interface ITabsContext {
   userDetailTabs: number;
   organizationDetailTabs: number;
   mappingDetailTabs: number;
+  databaseDetailTabs: number;
 }
 
 export const defaultTabsContext = {
@@ -19,6 +20,7 @@ export const defaultTabsContext = {
   userDetailTabs: 0,
   organizationDetailTabs: 0,
   mappingDetailTabs: 0,
+  databaseDetailTabs: 0,
 } as ITabsContext;
 
 export const useCurrentTabContext = () => {

pwa/src/hooks/database.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { QueryClient, useMutation, useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+import { addItem, deleteItem, updateItem } from "../services/mutateQueries";
+import { navigate } from "gatsby";
+import { useDeletedItemsContext } from "../context/deletedItems";
+
+export const useDatabase = (queryClient: QueryClient) => {
+  const API: APIService | null = React.useContext(APIContext);
+  const { isDeleted, addDeletedItem, removeDeletedItem } = useDeletedItemsContext();
+
+  const getAll = () =>
+    useQuery<any[], Error>("databases", API.Database.getAll, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  const getAllSelectOptions = () =>
+    useQuery<any[], Error>("database_select_options", API.Database.getAllSelectOptions, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  const getOne = (databaseId: string) =>
+    useQuery<any, Error>(["databases", databaseId], () => API?.Database.getOne(databaseId), {
+      initialData: () => queryClient.getQueryData<any[]>("databases")?.find((_database) => _database.id === databaseId),
+      onError: (error) => {
+        console.warn(error.message);
+      },
+      enabled: !!databaseId && !isDeleted(databaseId),
+    });
+
+  const remove = () =>
+    useMutation<any, Error, any>(API.Database.delete, {
+      onMutate: ({ id }) => addDeletedItem(id),
+      onSuccess: async (_, variables) => {
+        deleteItem(queryClient, "database", variables.id);
+        navigate("/settings/databases");
+      },
+      onError: (error, { id }) => {
+        removeDeletedItem(id);
+        console.warn(error.message);
+      },
+    });
+
+  const createOrEdit = (databaseId?: string) =>
+    useMutation<any, Error, any>(API.Database.createOrUpdate, {
+      onSuccess: async (newDatabase) => {
+        if (databaseId) {
+          updateItem(queryClient, "databases", newDatabase);
+          navigate("/settings");
+        }
+
+        if (!databaseId) {
+          addItem(queryClient, "databases", newDatabase);
+          navigate(`/settings/databases/${newDatabase.id}`);
+        }
+      },
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  return { getAll, getAllSelectOptions, getOne, createOrEdit, remove };
+};

pwa/src/hooks/organization.ts

@@ -2,11 +2,13 @@ import * as React from "react";
 import { QueryClient, useMutation, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { addItem, updateItem } from "../services/mutateQueries";
+import { addItem, deleteItem, updateItem } from "../services/mutateQueries";
 import { navigate } from "gatsby";
+import { useDeletedItemsContext } from "../context/deletedItems";
 
 export const useOrganization = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
+  const { isDeleted, addDeletedItem, removeDeletedItem } = useDeletedItemsContext();
 
   const getAll = () =>
     useQuery<any[], Error>("organizations", API.Organization.getAll, {
@@ -29,7 +31,20 @@ export const useOrganization = (queryClient: QueryClient) => {
       onError: (error) => {
         console.warn(error.message);
       },
-      enabled: !!organizationId,
+      enabled: !!organizationId && !isDeleted(organizationId),
+    });
+
+  const remove = () =>
+    useMutation<any, Error, any>(API.Organization.delete, {
+      onMutate: ({ id }) => addDeletedItem(id),
+      onSuccess: async (_, variables) => {
+        deleteItem(queryClient, "organizations", variables.id);
+        navigate("/settings/organizations");
+      },
+      onError: (error, { id }) => {
+        removeDeletedItem(id);
+        console.warn(error.message);
+      },
     });
 
   const createOrEdit = (organizationId?: string) =>
@@ -50,5 +65,5 @@ export const useOrganization = (queryClient: QueryClient) => {
       },
     });
 
-  return { getAll, getAllSelectOptions, getOne, createOrEdit };
+  return { getAll, getAllSelectOptions, getOne, createOrEdit, remove };
 };

pwa/src/pages/settings/databases/DatabasesPage.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { navigate } from "gatsby";
+
+const DatabasesPage: React.FC = () => {
+  React.useEffect(() => {
+    navigate("/settings");
+  });
+
+  return <></>;
+};
+
+export default DatabasesPage;

pwa/src/pages/settings/databases/[databaseId]/DatabaseDetailPage.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { PageProps } from "gatsby";
+import { DashboardTemplate } from "../../../../templates/dashboard/DashboardTemplate";
+import { CreateDatabaseTemplate } from "../../../../templates/templateParts/databaseForm/CreateDatabaseTemplate";
+import { EditDatabaseTemplate } from "../../../../templates/templateParts/databaseForm/EditDatabaseTemplate";
+
+const DatabaseDetailPage: React.FC<PageProps> = (props: PageProps) => {
+  const databaseId = props.params.databaseId === "new" ? null : props.params.databaseId;
+
+  return (
+    <DashboardTemplate>
+      {!databaseId && <CreateDatabaseTemplate />}
+      {databaseId && <EditDatabaseTemplate {...{ databaseId }} />}
+    </DashboardTemplate>
+  );
+};
+
+export default DatabaseDetailPage;

pwa/src/pages/settings/databases/[databaseId]/index.tsx

@@ -0,0 +1,3 @@
+import DatabaseDetailPage from "./DatabaseDetailPage";
+
+export default DatabaseDetailPage;

pwa/src/pages/settings/databases/index.tsx

@@ -0,0 +1,3 @@
+import DatabasesPage from "./DatabasesPage";
+
+export default DatabasesPage;

pwa/src/templates/databasesTemplate/DatabasesTemplate.module.css

@@ -0,0 +1,3 @@
+.container > *:not(:last-child) {
+  margin-block-end: var(--gateway-ui-size-2xl);
+}