From 7e6a3c7e69654940ceb0433c4e6a337afd33a49e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 20 Feb 2024 09:28:00 +0000
Subject: [PATCH] fix: clickable names in inc wh and action tables (#6275)

https://linear.app/unleash/issue/2-1954/make-names-clickable-in-actions-and-incoming-webhooks

Makes names clickable in the incoming webhook and action tables. When
clicked, they open the edit form for that resource.


![image](https://github.com/Unleash/unleash/assets/14320932/973f38c0-2603-4cbf-9352-90ddfe0b6e3f)


![image](https://github.com/Unleash/unleash/assets/14320932/ff733899-b86a-494a-8d2c-65d53e19a356)
---
 .../IncomingWebhooksTable/IncomingWebhooksTable.tsx  | 10 +++++++---
 .../ProjectActionsTable/ProjectActionsTable.tsx      | 12 ++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTable.tsx b/frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTable.tsx
index b59f903413..4f7bdf3118 100644
--- a/frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTable.tsx
+++ b/frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTable.tsx
@@ -16,12 +16,12 @@ import { IIncomingWebhook } from 'interfaces/incomingWebhook';
 import { IncomingWebhooksActionsCell } from './IncomingWebhooksActionsCell';
 import { IncomingWebhooksDeleteDialog } from './IncomingWebhooksDeleteDialog';
 import { ToggleCell } from 'component/common/Table/cells/ToggleCell/ToggleCell';
-import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import copy from 'copy-to-clipboard';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { IncomingWebhookTokensCell } from './IncomingWebhooksTokensCell';
 import { IncomingWebhooksModal } from '../IncomingWebhooksModal/IncomingWebhooksModal';
 import { IncomingWebhooksTokensDialog } from '../IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksTokens/IncomingWebhooksTokensDialog';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 
 interface IIncomingWebhooksTableProps {
     modalOpen: boolean;
@@ -91,8 +91,12 @@ export const IncomingWebhooksTable = ({
                 Cell: ({
                     row: { original: incomingWebhook },
                 }: { row: { original: IIncomingWebhook } }) => (
-                    <HighlightCell
-                        value={incomingWebhook.name}
+                    <LinkCell
+                        title={incomingWebhook.name}
+                        onClick={() => {
+                            setSelectedIncomingWebhook(incomingWebhook);
+                            setModalOpen(true);
+                        }}
                         subtitle={incomingWebhook.description}
                     />
                 ),
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx
index 77877a9c97..ea1def9015 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx
@@ -23,6 +23,7 @@ import { ProjectActionsDeleteDialog } from './ProjectActionsDeleteDialog';
 import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts';
 import { useIncomingWebhooks } from 'hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 
 interface IProjectActionsTableProps {
     modalOpen: boolean;
@@ -88,6 +89,17 @@ export const ProjectActionsTable = ({
                 Header: 'Name',
                 accessor: 'name',
                 minWidth: 60,
+                Cell: ({
+                    row: { original: action },
+                }: { row: { original: IActionSet } }) => (
+                    <LinkCell
+                        title={action.name}
+                        onClick={() => {
+                            setSelectedAction(action);
+                            setModalOpen(true);
+                        }}
+                    />
+                ),
             },
             {
                 id: 'trigger',