From 9ac034dae3ed2056aa95fc2f601aef15dc1deb37 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Tue, 12 Mar 2024 22:08:08 -0400
Subject: [PATCH] WIP start integrating column name management tool into apps
 table

---
 .../applications-table/applications-table.tsx |  30 ++--
 .../components/manage-columns-modal.tsx       | 162 ++++++++++++++++++
 .../components/manage-columns-toolbar.tsx     |  60 +++++++
 3 files changed, 242 insertions(+), 10 deletions(-)
 create mode 100644 client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
 create mode 100644 client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
index 70a85bf7e5..6e4af77571 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -108,6 +108,7 @@ import { ApplicationIdentityForm } from "../components/application-identity-form
 import { ApplicationReviewStatus } from "../components/application-review-status/application-review-status";
 import { KebabDropdown } from "@app/components/KebabDropdown";
 import { useFetchArchetypes } from "@app/queries/archetypes";
+import { ManageColumnsToolbar } from "./components/manage-columns-toolbar";
 
 export const ApplicationsTable: React.FC = () => {
   const { t } = useTranslation();
@@ -310,18 +311,20 @@ export const ApplicationsTable: React.FC = () => {
 
   const deserializedFilterValues = deserializeFilterUrlParams({ filters });
 
+  const [columnNames, setColumnNames] = React.useState<Record<string, string>>({
+    name: "Name",
+    businessService: "Business Service",
+    assessment: "Assessment",
+    review: "Review",
+    analysis: "Analysis",
+    tags: "Tags",
+    effort: "Effort",
+  });
+
   const tableControls = useLocalTableControls({
     idProperty: "id",
     items: applications || [],
-    columnNames: {
-      name: "Name",
-      businessService: "Business Service",
-      assessment: "Assessment",
-      review: "Review",
-      analysis: "Analysis",
-      tags: "Tags",
-      effort: "Effort",
-    },
+    columnNames,
     isFilterEnabled: true,
     isSortEnabled: true,
     isPaginationEnabled: true,
@@ -502,7 +505,6 @@ export const ApplicationsTable: React.FC = () => {
     hasActionsColumn: true,
     isSelectionEnabled: true,
   });
-
   const queryClient = useQueryClient();
 
   const {
@@ -734,6 +736,10 @@ export const ApplicationsTable: React.FC = () => {
 
   const applicationName = assessmentToDiscard?.name || "Application name";
 
+  ///TEMP HOME FOR manage cols modal
+
+  ///
+
   return (
     <ConditionalRender
       when={
@@ -812,6 +818,10 @@ export const ApplicationsTable: React.FC = () => {
               ) : (
                 <></>
               )}
+              <ManageColumnsToolbar
+                columnNames={columnNames}
+                setColumnNames={setColumnNames}
+              />
             </ToolbarGroup>
 
             <ToolbarItem {...paginationToolbarItemProps}>
diff --git a/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx b/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
new file mode 100644
index 0000000000..d2c402916f
--- /dev/null
+++ b/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  DataList,
+  DataListCell,
+  DataListCheck,
+  DataListControl,
+  DataListDragButton,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DragDrop,
+  Draggable,
+  Droppable,
+  Modal,
+  Text,
+  TextContent,
+  TextVariants,
+} from "@patternfly/react-core";
+
+export interface ManagedColumnsProps {
+  showModal: boolean;
+  onClose(): void;
+  onChange(columnNames: Record<string, string>): void;
+  columnNames: Record<string, string>;
+  setColumnNames(columnNames: Record<string, string>): void;
+  description?: string;
+  saveLabel?: string;
+  cancelLabel?: string;
+  reorderLabel?: string;
+  restoreLabel?: string;
+  title?: string;
+}
+
+export const ManageColumnsModal = ({
+  showModal,
+  description = "Selected columns will be displayed in the table.",
+  onClose,
+  onChange,
+  columnNames,
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  reorderLabel = "Reorder",
+  restoreLabel = "Restore default columns",
+  title = "Manage Columns",
+}: ManagedColumnsProps) => {
+  const [editedColumns, setEditedColumns] = useState(
+    Object.entries(columnNames).map(([id, label]) => ({
+      id,
+      label,
+      isVisible: true, // Initially set all columns as visible
+    }))
+  );
+
+  useEffect(() => {
+    // Reset editedColumns when columnNames prop changes
+    setEditedColumns(
+      Object.entries(columnNames).map(([id, label]) => ({
+        id,
+        label,
+        isVisible: true,
+      }))
+    );
+  }, [columnNames]);
+
+  const restoreDefaults = () => {
+    // Assuming you want to reset to the initial state passed through props
+    setEditedColumns(
+      Object.entries(columnNames).map(([id, label]) => ({
+        id,
+        label,
+        isVisible: true,
+      }))
+    );
+  };
+
+  const onDrop = (sourceIndex: any, destinationIndex: any) => {
+    const result = Array.from(editedColumns);
+    const [removed] = result.splice(sourceIndex, 1);
+    result.splice(destinationIndex, 0, removed);
+    setEditedColumns(result);
+  };
+
+  const onSelect = (id: any, isVisible: any) => {
+    setEditedColumns(
+      editedColumns.map((col) => ({
+        ...col,
+        isVisible: col.id === id ? isVisible : col.isVisible,
+      }))
+    );
+  };
+
+  const onSave = () => {
+    const newColumnNames = editedColumns.reduce<Record<string, string>>(
+      (acc, { id, label, isVisible }) => {
+        if (isVisible) {
+          acc[id] = label;
+        }
+        return acc;
+      },
+      {}
+    );
+    onChange(newColumnNames);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={title}
+      isOpen={showModal}
+      variant="small"
+      description={
+        <TextContent>
+          <Text component={TextVariants.p}>{description}</Text>
+        </TextContent>
+      }
+      onClose={onClose}
+      actions={[
+        <Button key="save" variant="primary" onClick={onSave}>
+          {saveLabel}
+        </Button>,
+        <Button key="cancel" variant="secondary" onClick={onClose}>
+          {cancelLabel}
+        </Button>,
+        <Button key="restore" variant="link" onClick={restoreDefaults}>
+          {restoreLabel}
+        </Button>,
+      ]}
+    >
+      {/* <DragDrop onDrop={(source, dest) => onDrop(source.index, dest?.index)}> */}
+      <DragDrop>
+        <Droppable>
+          <DataList aria-label={title} id="table-column-management" isCompact>
+            {editedColumns.map(({ id, label, isVisible }, index) => (
+              <Draggable key={id}>
+                <DataListItem aria-labelledby={`draggable-${id}`}>
+                  <DataListItemRow>
+                    <DataListControl>
+                      <DataListDragButton aria-label={reorderLabel} />
+                      <DataListCheck
+                        aria-labelledby={`check-${id}`}
+                        checked={isVisible}
+                        onChange={(checked) => onSelect(id, checked)}
+                      />
+                    </DataListControl>
+                    <DataListItemCells
+                      dataListCells={[
+                        <DataListCell key="primary">
+                          <span id={`draggable-${id}`}>{label}</span>
+                        </DataListCell>,
+                      ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              </Draggable>
+            ))}
+          </DataList>
+        </Droppable>
+      </DragDrop>
+    </Modal>
+  );
+};
diff --git a/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx b/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx
new file mode 100644
index 0000000000..56cd1246d1
--- /dev/null
+++ b/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx
@@ -0,0 +1,60 @@
+import {
+  Button,
+  OverflowMenu,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ManageColumnsModal } from "./manage-columns-modal";
+
+export interface ManageColumnsToolbarProps {
+  /** Read only. The defaults used for initialization.*/
+  columnNames: Record<string, string>;
+  /** Setter to modify state in the parent.*/
+  setColumnNames(columnNames: Record<string, string>): void;
+}
+
+/**
+ * Toggles a modal dialog for managing resourceFields visibility and order.
+ */
+export const ManageColumnsToolbar = ({
+  setColumnNames,
+  columnNames,
+}: ManageColumnsToolbarProps) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <ToolbarItem variant="overflow-menu">
+        <OverflowMenu breakpoint="md">
+          <OverflowMenuGroup groupType="button" isPersistent>
+            <OverflowMenuItem>
+              <Button variant="primary">Action</Button>
+            </OverflowMenuItem>
+            <OverflowMenuItem isPersistent>
+              <Button variant="link" onClick={() => setIsOpen(true)}>
+                Manage columns
+              </Button>
+            </OverflowMenuItem>
+          </OverflowMenuGroup>
+        </OverflowMenu>
+      </ToolbarItem>
+
+      <ManageColumnsModal
+        showModal={isOpen}
+        onClose={() => setIsOpen(false)}
+        description={t("Selected columns will be displayed in the table.")}
+        onChange={setColumnNames}
+        setColumnNames={setColumnNames}
+        columnNames={columnNames}
+        saveLabel={t("Save")}
+        cancelLabel={t("Cancel")}
+        reorderLabel={t("Reorder")}
+        restoreLabel={t("Restore default columns")}
+        title={t("Manage Columns")}
+      />
+    </>
+  );
+};