From 0af7d585753cf92fc8984a28db7d76bd62e0761f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Nov 2023 08:51:33 +0300
Subject: [PATCH] Add additional types to config initialization, expect type
 specific icon props

---
 client/src/components/Grid/GridList.vue       |  4 +-
 client/src/components/Grid/configs/types.ts   | 58 ++++++++++---------
 .../components/Grid/configs/visualizations.ts |  8 +--
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index d8b3512a42fd..77c3789aedd8 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -8,7 +8,7 @@ import { useRouter } from "vue-router/composables";
 
 import { timeout } from "@/utils/timeout";
 
-import { Config, FieldKeyHandler, Operation, RowData } from "./configs/types";
+import { Config, FieldHandler, Operation, RowData } from "./configs/types";
 
 import GridLink from "./GridElements/GridLink.vue";
 import GridOperations from "./GridElements/GridOperations.vue";
@@ -129,7 +129,7 @@ function onSort(sortKey: string) {
 /**
  * Process tag inputs
  */
-async function onTagInput(data: RowData, tags: Array<string>, tagsHandler: FieldKeyHandler) {
+async function onTagInput(data: RowData, tags: Array<string>, tagsHandler: FieldHandler) {
     await tagsHandler({ ...data, tags: tags });
     data.tags = tags;
 }
diff --git a/client/src/components/Grid/configs/types.ts b/client/src/components/Grid/configs/types.ts
index d9d574c589c8..f53433e3d975 100644
--- a/client/src/components/Grid/configs/types.ts
+++ b/client/src/components/Grid/configs/types.ts
@@ -1,37 +1,18 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import type Router from "vue-router";
 
 import Filtering from "@/utils/filtering";
 
-interface Action {
+export interface Action {
     title: string;
-    icon?: string;
+    icon?: IconProp;
     handler: (router: Router) => void;
 }
 
-export type FieldArray = Array<FieldKey | FieldOperations>;
+export type ActionArray = Array<Action>;
 
-interface FieldKey {
-    key: string;
-    disabled?: boolean;
-    type: string;
-    handler?: FieldKeyHandler;
-}
-
-// TODO: Apply strict literals
-// type FieldType = "date" | "operations" | "sharing" | "tags" | "text" | undefined;
-
-interface OperationHandlerMessage {
-    message: string;
-    status: string;
-}
-
-type OperationHandlerReturn = Promise<OperationHandlerMessage> | void;
-
-/**
- * Exported Type declarations
- */
 export interface Config {
-    actions?: Array<Action>;
+    actions?: ActionArray;
     fields: FieldArray;
     filtering: Filtering<any>;
     getData: (offset: number, limit: number, search: string, sort_by: string, sort_desc: boolean) => Promise<any>;
@@ -42,21 +23,42 @@ export interface Config {
     title: string;
 }
 
+export type FieldArray = Array<FieldKey | FieldOperations>;
+
+interface FieldKey {
+    key: string;
+    title: string;
+    disabled?: boolean;
+    type: string;
+    handler?: (data: RowData) => void;
+}
+
+export type FieldHandler = (data: RowData) => void;
+
 export interface FieldOperations {
     key: string;
     title: string;
+    type: string;
     condition?: (data: RowData) => boolean;
     operations: Array<Operation>;
     width?: number;
 }
 
-export type FieldKeyHandler = (data: RowData) => void;
-
-export type RowData = Record<string, unknown>;
+// TODO: Apply strict literals
+// type FieldType = "date" | "operations" | "sharing" | "tags" | "text" | undefined;
 
 export interface Operation {
     title: string;
-    icon: any;
+    icon: IconProp;
     condition?: (data: RowData) => boolean;
     handler: (data: RowData, router: Router) => OperationHandlerReturn;
 }
+
+interface OperationHandlerMessage {
+    message: string;
+    status: string;
+}
+
+type OperationHandlerReturn = Promise<OperationHandlerMessage> | void;
+
+export type RowData = Record<string, unknown>;
diff --git a/client/src/components/Grid/configs/visualizations.ts b/client/src/components/Grid/configs/visualizations.ts
index 911681c45d66..6af63648d8a1 100644
--- a/client/src/components/Grid/configs/visualizations.ts
+++ b/client/src/components/Grid/configs/visualizations.ts
@@ -1,4 +1,4 @@
-import { faCopy, faEdit, faEye, faShareAlt, faTrash, faTrashRestore } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faEdit, faEye, faPlus, faShareAlt, faTrash, faTrashRestore } from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import type Router from "vue-router";
 
@@ -8,7 +8,7 @@ import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter }
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString, rethrowSimple } from "@/utils/simple-error";
 
-import { type Config, type FieldArray } from "./types";
+import type { ActionArray, Config, FieldArray } from "./types";
 
 /**
  * Api endpoint handlers
@@ -48,10 +48,10 @@ async function getData(offset: number, limit: number, search: string, sort_by: s
 /**
  * Actions are grid-wide operations
  */
-const actions = [
+const actions: ActionArray = [
     {
         title: "Create",
-        icon: "plus",
+        icon: faPlus,
         handler: (router: Router) => {
             router.push(`/visualizations`);
         },