feat: add deeplinking for the dashboard in meshery

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

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'
 });

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;
 }

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