From 4143d4cf452955d6f482777fcb649c4ddcd64768 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Fri, 10 Jan 2025 19:19:52 +0530
Subject: [PATCH 1/2] feat: add fold unfold option for the lables and
 annotations

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 .../ResourceDetailFormatters/Component.tsx    | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/custom/ResourceDetailFormatters/Component.tsx b/src/custom/ResourceDetailFormatters/Component.tsx
index 5e2e65f57..9031d3227 100644
--- a/src/custom/ResourceDetailFormatters/Component.tsx
+++ b/src/custom/ResourceDetailFormatters/Component.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import React, { useState } from 'react';
 import { Grid, IconButton, Typography } from '../../base';
-import { iconSmall } from '../../constants/iconsSizes';
+import { iconSmall, iconXSmall } from '../../constants/iconsSizes';
 import { CopyIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { CustomTooltip } from './../CustomTooltip';
@@ -29,7 +31,7 @@ import {
   PrimaryDetailsProps,
   SectionHeadingProps
 } from './types';
-import { splitCamelCaseString } from './utils.js';
+import { splitCamelCaseString } from './utils';
 
 export const PrimaryDetails: React.FC<PrimaryDetailsProps> = ({ title, value, hide = false }) => {
   const titleFormatted = splitCamelCaseString(title);
@@ -151,16 +153,39 @@ export const ActionIconButton: React.FC<ActionIconButtonProps> = ({ title, Icon,
   );
 };
 
-export const KeyValueInRow: React.FC<KeyValueProps> = ({ Key, Value }) => {
+export const KeyValueInRow: React.FC<KeyValueProps> = ({ Key, Value, showFold = false }) => {
+  const [isFolded, setIsFolded] = useState(true);
+
   if (!Value || !Key) return null;
+
+  const handleToggleFold = () => {
+    setIsFolded(!isFolded);
+  };
+
   return (
     <KeyValueGrid container>
       <React.Fragment key={Key}>
-        <KeyValueGridCell item xs={3}>
+        <KeyValueGridCell container xs={3} spacing={1}>
           <KeyValueGridTitle>{Key}</KeyValueGridTitle>
+          {showFold && (
+            <IconButton onClick={handleToggleFold}>
+              {isFolded ? (
+                <UnfoldMoreIcon style={iconXSmall} />
+              ) : (
+                <UnfoldLessIcon style={iconXSmall} />
+              )}
+            </IconButton>
+          )}
         </KeyValueGridCell>
         <Grid item xs={9}>
-          <div>{React.isValidElement(Value) ? Value : String(Value)}</div>
+          <div
+            style={{
+              maxHeight: showFold && isFolded ? '200px' : 'none',
+              overflow: showFold ? 'auto' : 'none'
+            }}
+          >
+            {React.isValidElement(Value) ? Value : String(Value)}
+          </div>
         </Grid>
       </React.Fragment>
     </KeyValueGrid>

From 3b058e01be71ec7859f08d0f2d09334e4a5d3ede Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Fri, 10 Jan 2025 19:20:26 +0530
Subject: [PATCH 2/2] feat: add deeplinking for the dashboard in meshery

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 src/custom/ResourceDetailFormatters/styles.ts             | 3 ++-
 src/custom/ResourceDetailFormatters/types.ts              | 2 ++
 .../ResourceDetailFormatters/useResourceCleanData.ts      | 8 +++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/custom/ResourceDetailFormatters/styles.ts b/src/custom/ResourceDetailFormatters/styles.ts
index 523eafb48..eef6622f0 100644
--- a/src/custom/ResourceDetailFormatters/styles.ts
+++ b/src/custom/ResourceDetailFormatters/styles.ts
@@ -299,5 +299,6 @@ export const KeyValueGridTitle = styled(Typography)({
 });
 
 export const KeyValueGridCell = styled(Grid)({
-  placeSelf: 'center'
+  placeSelf: 'center',
+  alignItems: 'center'
 });
diff --git a/src/custom/ResourceDetailFormatters/types.ts b/src/custom/ResourceDetailFormatters/types.ts
index 9305cbaaf..ae21edf52 100644
--- a/src/custom/ResourceDetailFormatters/types.ts
+++ b/src/custom/ResourceDetailFormatters/types.ts
@@ -64,6 +64,7 @@ export interface ActionIconButtonProps {
 export interface KeyValueProps {
   Key: string;
   Value: string | number | ReactNode;
+  showFold?: boolean;
 }
 
 export interface EnvironmentFormatterProps {
@@ -264,4 +265,5 @@ export interface GetResourceCleanDataProps {
   dispatchMsgToEditor?: (msg: any) => void;
   activeLabels?: string[];
   showStatus?: boolean;
+  router?: any;
 }
diff --git a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts
index 4d4a0f1e3..031145a69 100644
--- a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts
+++ b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts
@@ -67,6 +67,7 @@ export const useResourceCleanData = () => {
     resource,
     activeLabels,
     dispatchMsgToEditor,
+    router,
     showStatus = true
   }: GetResourceCleanDataProps) => {
     const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute);
@@ -108,8 +109,13 @@ export const useResourceCleanData = () => {
         links: [
           { nodeName: parsedSpec?.nodeName, label: 'Node' },
           { namespace: resource?.metadata?.namespace, label: 'Namespace' },
-          { serviceAccount: parsedSpec?.serviceAccountName, label: 'ServiceAccount' }
+          {
+            serviceAccount: parsedSpec?.serviceAccountName,
+            label: 'ServiceAccount',
+            resourceCategory: 'Security'
+          }
         ],
+        router: router,
         dispatchMsgToEditor: dispatchMsgToEditor
       },
       selector: parsedSpec?.selector?.matchLabels