Merge pull request #357 from ConductionNL/development

Development to main, week 9

pwa/src/apiService/apiService.ts

@@ -32,6 +32,7 @@ import Upload from "./resources/upload";
 interface PromiseMessage {
   loading?: string;
   success?: string;
+  error?: string;
 }
 
 export type TSendFunction = (
@@ -255,37 +256,35 @@ export default class APIService {
     switch (action) {
       case "GET":
         const response = instance.get(endpoint);
-
-        response.catch((err) => toast.error(err.message));
-
+        response.catch((err) => toast.error(promiseMessage?.error ?? err.message));
         return response;
 
       case "POST":
         return toast.promise(instance.post(endpoint, _payload), {
           loading: promiseMessage?.loading ?? "Creating item...",
           success: promiseMessage?.success ?? "Succesfully created item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "PUT":
         return toast.promise(instance.put(endpoint, _payload), {
           loading: promiseMessage?.loading ?? "Updating item...",
           success: promiseMessage?.success ?? "Succesfully updated item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "DELETE":
         return toast.promise(instance.delete(endpoint), {
           loading: promiseMessage?.loading ?? "Deleting item...",
           success: promiseMessage?.success ?? "Succesfully deleted item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
 
       case "DOWNLOAD":
         return toast.promise(instance.get(endpoint), {
           loading: promiseMessage?.loading ?? "Downloading item...",
           success: promiseMessage?.success ?? "Succesfully downloaded item",
-          error: (err) => err.message,
+          error: (err) => promiseMessage?.error ?? err.message,
         });
     }
   };

pwa/src/apiService/resources/dashboardCards.tsx

@@ -25,7 +25,9 @@ export default class DashboardCards {
   }
 
   public getAll = async (): Promise<any> => {
-    const { data } = await this._send(this._instance, "GET", "/admin/dashboardCards");
+    const { data } = await this._send(this._instance, "GET", "/admin/dashboardCards", undefined, {
+      error: "Could not fetch Dashboardcards.",
+    });
 
     return data;
   };

pwa/src/apiService/resources/source.ts

@@ -16,6 +16,12 @@ export default class Source {
     return data;
   };
 
+  public getAllSelectOptions = async (): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", "/admin/gateways?limit=200");
+
+    return data?.map((source: any) => ({ label: source.name, value: source.id }));
+  };
+
   public getOne = async (id: string): Promise<any> => {
     const { data } = await this._send(this._instance, "GET", `/admin/gateways/${id}`);
 

pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,52 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(
+    --conduction-horizontal-overflow-wrapper-background-color
+  );
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(
+    --conduction-horizontal-overflow-wrapper-margin-inline-start
+  );
+  margin-inline-end: var(
+    --conduction-horizontal-overflow-wrapper-margin-inline-end
+  );
+  margin-block-start: var(
+    --conduction-horizontal-overflow-wrapper-margin-block-start
+  );
+  margin-block-end: var(
+    --conduction-horizontal-overflow-wrapper-margin-block-end
+  );
+  z-index: 10000;
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -0,0 +1,84 @@
+/**
+ * IMPORTANT: This is a temporary component that will be removed if the @conduction/components package can be updated.
+ */
+
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};

pwa/src/context/logs.ts

@@ -13,6 +13,7 @@ export interface ILogFiltersContext {
     process?: string;
     endpoint?: string;
     schema?: string;
+    source?: string;
     cronjob?: string;
     action?: string;
     user?: string;

pwa/src/context/tableColumns.ts

@@ -21,6 +21,7 @@ const logColumns = {
   created: true,
   endpoint: true,
   schema: true,
+  source: true,
   cronjob: true,
   action: true,
   user: true,

pwa/src/hooks/dashboardCards.ts

@@ -13,6 +13,7 @@ export const useDashboardCards = (queryClient: QueryClient) => {
       onError: (error) => {
         console.warn(error.message);
       },
+      retry: 0,
     });
 
   const getOne = (dashboardCardsId: string) =>

pwa/src/hooks/source.ts

@@ -18,6 +18,13 @@ export const useSource = (queryClient: QueryClient) => {
       },
     });
 
+  const getAllSelectOptions = () =>
+    useQuery<any[], Error>("source_select_options", API.Sources.getAllSelectOptions, {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
   const getOne = (sourceId: string) =>
     useQuery<any, Error>(["sources", sourceId], () => API?.Sources.getOne(sourceId), {
       initialData: () => queryClient.getQueryData<any[]>("sources")?.find((_sources) => _sources.id === sourceId),
@@ -78,5 +85,5 @@ export const useSource = (queryClient: QueryClient) => {
       },
     });
 
-  return { getAll, getOne, remove, createOrEdit, getProxy };
+  return { getAll, getOne, remove, createOrEdit, getProxy, getAllSelectOptions };
 };

pwa/src/services/removeTrailingSlash.ts

@@ -0,0 +1,4 @@
+export const removeTrailingSlash = (str: string) => {
+  const newStr = str.endsWith("/") ? str.slice(0, -1) : str;
+  return newStr;
+};

pwa/src/templates/actionsTemplate/ActionsTemplate.tsx

@@ -89,7 +89,7 @@ export const ActionsTemplate: React.FC = () => {
 
                   <TableCell>{action.lastRun ? dateTime(t(i18n.language), action.lastRun) : "-"}</TableCell>
 
-                  <TableCell>{`${action.lastRunTime}ms` ?? "-"}</TableCell>
+                  <TableCell>{`${action.lastRunTime}s` ?? "-"}</TableCell>
 
                   <TableCell>{translateDate(i18n.language, action.dateCreated) ?? "-"}</TableCell>
 

pwa/src/templates/gatewayDetailTemplate/GatewayDetailTemplate.tsx

@@ -70,7 +70,9 @@ export const GatewayDetailTemplate: React.FC = () => {
                     getPlugins.data.update ? getPlugins.data?.version : `Latest (${getPlugins.data?.version})`
                   } `}</p>
                 )}
-                <p>{`last update time: ${new Date(getPlugins.data?.time).toLocaleString()}`}</p>
+                <p>{`last update time: ${new Date(
+                  getPlugins.data?.versions[getPlugins.data?.version]?.time,
+                ).toLocaleString()}`}</p>
               </div>
 
               <div>

pwa/src/templates/login/LoginTemplate.tsx

@@ -12,6 +12,7 @@ import { useAuthentication } from "../../hooks/useAuthentication";
 import { useIsLoadingContext } from "../../context/isLoading";
 import APIService from "../../apiService/apiService";
 import APIContext from "../../apiService/apiContext";
+import { removeTrailingSlash } from "../../services/removeTrailingSlash";
 
 export const LoginTemplate: React.FC = () => {
   const { t } = useTranslation();
@@ -54,7 +55,9 @@ export const LoginTemplate: React.FC = () => {
 
   React.useEffect(() => {
     window.sessionStorage.getItem("GATSBY_BASE_URL") &&
-      setDexRedirectURL(`${window.sessionStorage.getItem("GATSBY_BASE_URL")}/login/oidc/dex`);
+      setDexRedirectURL(
+        `${removeTrailingSlash(window.sessionStorage.getItem("GATSBY_BASE_URL") ?? "")}/login/oidc/dex`,
+      );
   });
 
   return (

pwa/src/templates/logsDetailTemplate/LogsDetailTemplate.module.css

@@ -48,7 +48,7 @@
 }
 
 .warningLevel {
-  --denhaag-alert-info-background-color: #var(
+  --denhaag-alert-info-background-color: var(
     --gateway-ui-color-status-background-warning
   );
   --denhaag-alert-info-icon-color: var(--gateway-ui-color-status-warning);