From 115fbfd23668d69d222feb39562bbb95a7994911 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 19 Feb 2024 16:24:14 +0100
Subject: [PATCH] Added horizontaloverflowwrapper

---
 .../HorizontalOverflowWrapper.module.css      |  52 +++
 .../HorizontalOverflowWrapper.tsx             |  84 ++++
 .../logsTable/LogsTableTemplate.module.css    |   4 -
 .../logsTable/LogsTableTemplate.tsx           | 377 +++++++++---------
 4 files changed, 327 insertions(+), 190 deletions(-)
 create mode 100644 pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css
 create mode 100644 pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

diff --git a/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css
new file mode 100644
index 00000000..8b32a3d9
--- /dev/null
+++ b/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;
+}
diff --git a/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx b/pwa/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx
new file mode 100644
index 00000000..c6385d7d
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
index 2d46eeac..bc2070f9 100644
--- a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
+++ b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.module.css
@@ -17,10 +17,6 @@
   justify-content: space-between;
 }
 
-.tableContainer {
-  max-width: 100%;
-  overflow-x: scroll;
-}
 
 .button > span > svg {
   margin-inline-end: var(--gateway-ui-size-xs);
diff --git a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
index 5beb5569..7a8b1691 100644
--- a/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
+++ b/pwa/src/templates/templateParts/logsTable/LogsTableTemplate.tsx
@@ -16,6 +16,7 @@ import { Link } from "@gemeente-denhaag/components-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePagination } from "../../../hooks/usePagination";
 import clsx from "clsx";
+import { HorizontalOverflowWrapper } from "../../../components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
 
 interface LogsTableTemplateProps {
   logs: any[];
@@ -69,206 +70,210 @@ export const LogsTableTemplate: React.FC<LogsTableTemplateProps> = ({ logs, pagi
         <PaginationLocationIndicator />
       </div>
 
-      <div className={styles.tableContainer}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              {logColumns.level && <TableHeader>{t("Level")}</TableHeader>}
-              {logColumns.message && <TableHeader>{t("Message")}</TableHeader>}
-              {logColumns.created && <TableHeader>{t("Created")}</TableHeader>}
-              {logColumns.endpoint && <TableHeader>{t("Endpoint")}</TableHeader>}
-              {logColumns.schema && <TableHeader>{t("Schema")}</TableHeader>}
-              {logColumns.source && <TableHeader>{t("Source")}</TableHeader>}
-              {logColumns.cronjob && <TableHeader>{t("Cronjob")}</TableHeader>}
-              {logColumns.action && <TableHeader>{t("Action")}</TableHeader>}
-              {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
-              {logColumns.organization && <TableHeader>{t("Organization")}</TableHeader>}
-              {logColumns.application && <TableHeader>{t("Application")}</TableHeader>}
-              {logColumns.object && <TableHeader>{t("Object")}</TableHeader>}
-              {logColumns.mapping && <TableHeader>{t("Mapping")}</TableHeader>}
-              <TableHeader></TableHeader>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {logs.map((log: any) => (
-              <TableRow key={log._id.$oid}>
-                {logColumns.level && (
-                  <TableCell>
-                    <StatusTag
-                      type={_.lowerCase(log.level_name) as TStatusTagType}
-                      label={_.upperFirst(_.lowerCase(log.level_name))}
-                    />
-                  </TableCell>
-                )}
+      <HorizontalOverflowWrapper
+        ariaLabels={{ scrollLeftButton: t("Left scroll button"), scrollRightButton: t("Right scroll button") }}
+      >
+        <div>
+          <Table>
+            <TableHead>
+              <TableRow>
+                {logColumns.level && <TableHeader>{t("Level")}</TableHeader>}
+                {logColumns.message && <TableHeader>{t("Message")}</TableHeader>}
+                {logColumns.created && <TableHeader>{t("Created")}</TableHeader>}
+                {logColumns.endpoint && <TableHeader>{t("Endpoint")}</TableHeader>}
+                {logColumns.schema && <TableHeader>{t("Schema")}</TableHeader>}
+                {logColumns.source && <TableHeader>{t("Source")}</TableHeader>}
+                {logColumns.cronjob && <TableHeader>{t("Cronjob")}</TableHeader>}
+                {logColumns.action && <TableHeader>{t("Action")}</TableHeader>}
+                {logColumns.user && <TableHeader>{t("User")}</TableHeader>}
+                {logColumns.organization && <TableHeader>{t("Organization")}</TableHeader>}
+                {logColumns.application && <TableHeader>{t("Application")}</TableHeader>}
+                {logColumns.object && <TableHeader>{t("Object")}</TableHeader>}
+                {logColumns.mapping && <TableHeader>{t("Mapping")}</TableHeader>}
+                <TableHeader></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {logs.map((log: any) => (
+                <TableRow key={log._id.$oid}>
+                  {logColumns.level && (
+                    <TableCell>
+                      <StatusTag
+                        type={_.lowerCase(log.level_name) as TStatusTagType}
+                        label={_.upperFirst(_.lowerCase(log.level_name))}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.message && (
-                  <TableCell>
-                    <ToolTip tooltip={log.message}>
-                      <div className={styles.message}>{log.message}</div>
-                    </ToolTip>
-                  </TableCell>
-                )}
+                  {logColumns.message && (
+                    <TableCell>
+                      <ToolTip tooltip={log.message}>
+                        <div className={styles.message}>{log.message}</div>
+                      </ToolTip>
+                    </TableCell>
+                  )}
 
-                {logColumns.created && (
-                  <TableCell>
-                    <ToolTip tooltip={formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}>
-                      <div className={styles.created}>
-                        {formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}
-                      </div>
-                    </ToolTip>
-                  </TableCell>
-                )}
+                  {logColumns.created && (
+                    <TableCell>
+                      <ToolTip tooltip={formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}>
+                        <div className={styles.created}>
+                          {formatUnixDateTime(t(i18n.language), log.datetime.$date.$numberLong)}
+                        </div>
+                      </ToolTip>
+                    </TableCell>
+                  )}
 
-                {logColumns.endpoint && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Endpoint")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.endpoint}
-                      onClick={(e) => handleResourceClick(e, "endpoints", log.context.endpoint)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.endpoint && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Endpoint")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.endpoint}
+                        onClick={(e) => handleResourceClick(e, "endpoints", log.context.endpoint)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.schema && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Schema")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.schema}
-                      onClick={(e) => handleResourceClick(e, "schemas", log.context.schema)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.schema && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Schema")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.schema}
+                        onClick={(e) => handleResourceClick(e, "schemas", log.context.schema)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.source && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Source")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.source}
-                      onClick={(e) => handleResourceClick(e, "sources", log.context.source)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.source && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Source")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.source}
+                        onClick={(e) => handleResourceClick(e, "sources", log.context.source)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.cronjob && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Cronjob")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.cronjob}
-                      onClick={(e) => handleResourceClick(e, "cronjobs", log.context.cronjob)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.cronjob && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Cronjob")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.cronjob}
+                        onClick={(e) => handleResourceClick(e, "cronjobs", log.context.cronjob)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.action && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Action")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.action}
-                      onClick={(e) => handleResourceClick(e, "actions", log.context.action)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.action && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Action")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.action}
+                        onClick={(e) => handleResourceClick(e, "actions", log.context.action)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.user && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("User")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.user}
-                      onClick={(e) => handleResourceClick(e, "settings/users", log.context.user)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.user && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("User")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.user}
+                        onClick={(e) => handleResourceClick(e, "settings/users", log.context.user)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.organization && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Organization")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.organization}
-                      onClick={(e) => handleResourceClick(e, "settings/organizations", log.context.organization)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.organization && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Organization")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.organization}
+                        onClick={(e) => handleResourceClick(e, "settings/organizations", log.context.organization)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.application && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Application")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.application}
-                      onClick={(e) => handleResourceClick(e, "settings/applications", log.context.application)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.application && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Application")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.application}
+                        onClick={(e) => handleResourceClick(e, "settings/applications", log.context.application)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.object && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Object")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.object}
-                      onClick={(e) => handleResourceClick(e, "objects", log.context.object)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.object && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Object")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.object}
+                        onClick={(e) => handleResourceClick(e, "objects", log.context.object)}
+                      />
+                    </TableCell>
+                  )}
 
-                {logColumns.mapping && (
-                  <TableCell>
-                    <Button
-                      variant="primary"
-                      label={t("Mapping")}
-                      icon={faArrowRight}
-                      className={styles.button}
-                      disabled={!log.context.mapping}
-                      onClick={(e) => handleResourceClick(e, "mappings", log.context.mapping)}
-                    />
-                  </TableCell>
-                )}
+                  {logColumns.mapping && (
+                    <TableCell>
+                      <Button
+                        variant="primary"
+                        label={t("Mapping")}
+                        icon={faArrowRight}
+                        className={styles.button}
+                        disabled={!log.context.mapping}
+                        onClick={(e) => handleResourceClick(e, "mappings", log.context.mapping)}
+                      />
+                    </TableCell>
+                  )}
 
-                <TableCell onClick={() => navigate(`/logs/${log._id.$oid}`)}>
-                  <Link icon={<FontAwesomeIcon icon={faArrowRight} />} iconAlign="start">
-                    {t("Details")}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
+                  <TableCell onClick={() => navigate(`/logs/${log._id.$oid}`)}>
+                    <Link icon={<FontAwesomeIcon icon={faArrowRight} />} iconAlign="start">
+                      {t("Details")}
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))}
 
-            {!logs.length && (
-              <TableRow>
-                {Object.values(logColumns)
-                  .filter((value) => value)
-                  .map((_, idx) => (
-                    <TableCell key={idx}>{idx === 0 && <>No logs found</>}</TableCell>
-                  ))}
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
+              {!logs.length && (
+                <TableRow>
+                  {Object.values(logColumns)
+                    .filter((value) => value)
+                    .map((_, idx) => (
+                      <TableCell key={idx}>{idx === 0 && <>No logs found</>}</TableCell>
+                    ))}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </HorizontalOverflowWrapper>
 
       <Pagination layoutClassName={styles.pagination} />
     </div>