feat: redesign refs popover

kubeshop · Apr 6, 2023 · e6ab1fd · e6ab1fd
1 parent 27f83d9
commit e6ab1fd
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 25 deletions.
diff --git a/src/assets/GraphIcon.svg b/src/assets/GraphIcon.svg
diff --git a/src/components/molecules/ResourceRefsIconPopover/RefsPopoverContent.styled.tsx b/src/components/molecules/ResourceRefsIconPopover/RefsPopoverContent.styled.tsx
@@ -2,13 +2,19 @@ import {Divider as RawDivider, Typography} from 'antd';
 
 import styled from 'styled-components';
 
+import {Colors} from '@shared/styles';
+
 export const Container = styled.div`
   margin: 0;
   padding: 0 8px;
   height: 100%;
   width: 100%;
   max-height: 350px;
+`;
+
+export const RefsContainer = styled.div`
   overflow-y: auto;
+  max-height: 254px;
 `;
 
 export const Divider = styled(RawDivider)`
@@ -17,9 +23,32 @@ export const Divider = styled(RawDivider)`
 
 export const PopoverTitle = styled(Typography.Text)`
   font-weight: 500;
+  color: ${Colors.grey9};
+  font-weight: 400;
+  font-size: 14px;
+  height: 48px;
 `;
 
 export const RefDiv = styled.div`
   display: block;
   margin: 5px 0;
 `;
+
+export const PopoverFooter = styled(Typography.Text)`
+  font-weight: 500;
+  color: ${Colors.blue7};
+  font-weight: 400;
+  font-size: 14px;
+  height: 48px;
+  cursor: pointer;
+
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
+export const Image = styled.img`
+  width: 15px;
+  min-width: 15px;
+  margin-right: 8px;
+`;
diff --git a/src/components/molecules/ResourceRefsIconPopover/RefsPopoverContent.tsx b/src/components/molecules/ResourceRefsIconPopover/RefsPopoverContent.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useMemo} from 'react';
 
 import {setActiveDashboardMenu, setDashboardSelectedResourceId} from '@redux/dashboard/slice';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
-import {selectFile, selectResource} from '@redux/reducers/main';
+import {selectFile, selectResource, setActiveEditorTab} from '@redux/reducers/main';
 import {setMonacoEditor} from '@redux/reducers/ui';
 import {
   activeResourceStorageSelector,
@@ -13,6 +13,8 @@ import {isKustomizationResource} from '@redux/services/kustomize';
 
 import {getRefRange} from '@utils/refs';
 
+import GraphIcon from '@assets/GraphIcon.svg';
+
 import {ResourceRef, ResourceRefType, areRefPosEqual} from '@monokle/validation';
 import {ResourceMeta, ResourceMetaMap} from '@shared/models/k8sResource';
 import {MonacoRange} from '@shared/models/ui';
@@ -228,27 +230,39 @@ const RefsPopoverContent = (props: {
     );
   };
 
+  const handleOnClickGraphView = () => {
+    triggerSelectResource(resource.id);
+    dispatch(setActiveEditorTab('graph'));
+  };
+
   return (
     <S.Container>
       <S.PopoverTitle>{children}</S.PopoverTitle>
 
       <S.Divider />
 
-      {processedRefsWithKeys.map(({ref, key}) => (
-        <S.RefDiv key={key}>
-          <RefLink
-            isDisabled={isRefLinkDisabled(ref)}
-            resourceRef={ref}
-            resourceMetaMap={activeResourceMetaMap}
-            onClick={(e: Event) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onLinkClick(ref);
-              handleLinkClickForDashboard(ref);
-            }}
-          />
-        </S.RefDiv>
-      ))}
+      <S.RefsContainer>
+        {processedRefsWithKeys.map(({ref, key}) => (
+          <S.RefDiv key={key}>
+            <RefLink
+              isDisabled={isRefLinkDisabled(ref)}
+              resourceRef={ref}
+              resourceMetaMap={activeResourceMetaMap}
+              onClick={(e: Event) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onLinkClick(ref);
+                handleLinkClickForDashboard(ref);
+              }}
+            />
+          </S.RefDiv>
+        ))}
+      </S.RefsContainer>
+      <S.Divider />
+      <S.PopoverFooter>
+        <S.Image alt="Cluster Indication" src={GraphIcon} />
+        <span onClick={handleOnClickGraphView}>View Graph</span>
+      </S.PopoverFooter>
     </S.Container>
   );
 };

diff --git a/src/components/molecules/ResourceRefsIconPopover/ResourceRefsIconPopover.tsx b/src/components/molecules/ResourceRefsIconPopover/ResourceRefsIconPopover.tsx
@@ -57,15 +57,7 @@ const ResourceRefsIconPopover = ({
       placement="bottom"
       content={
         <RefsPopoverContent resource={resourceMeta} resourceRefs={resourceRefs}>
-          {type === 'incoming' ? (
-            <>
-              Incoming Links <Icon name="incomingRefs" />
-            </>
-          ) : (
-            <>
-              Outgoing Links <Icon name="outgoingRefs" />
-            </>
-          )}
+          {type === 'incoming' ? <>Incoming Links</> : <>Outgoing Links</>}
         </RefsPopoverContent>
       }
     >

diff --git a/src/redux/initialState.ts b/src/redux/initialState.ts
@@ -66,6 +66,7 @@ const initialAppState: AppState = {
   validationIntegration: undefined,
   autosaving: {},
   lastChangedLine: 0,
+  activeEditorTab: 'source',
 };
 
 const initialAppConfigState: AppConfig = {

diff --git a/src/redux/reducers/main/mainSlice.ts b/src/redux/reducers/main/mainSlice.ts
@@ -27,6 +27,7 @@ import {parseYamlDocument} from '@utils/yaml';
 import {ROOT_FILE_ENTRY} from '@shared/constants/fileEntry';
 import {AlertType} from '@shared/models/alert';
 import {
+  ActionPaneTab,
   AppState,
   FileMapType,
   HelmChartMapType,
@@ -295,6 +296,9 @@ export const mainSlice = createSlice({
         delete state.resourceContentMapByStorage.cluster[r.id];
       });
     },
+    setActiveEditorTab: (state: Draft<AppState>, action: PayloadAction<ActionPaneTab>) => {
+      state.activeEditorTab = action.payload;
+    },
   },
   extraReducers: builder => {
     builder.addCase(setAlert, (state, action) => {
@@ -610,5 +614,6 @@ export const {
   setLastChangedLine,
   updateMultipleClusterResources,
   deleteMultipleClusterResources,
+  setActiveEditorTab,
 } = mainSlice.actions;
 export default mainSlice.reducer;
diff --git a/src/shared/models/appState.ts b/src/shared/models/appState.ts
@@ -83,6 +83,7 @@ type AppState = {
     };
   };
   lastChangedLine: number;
+  activeEditorTab: ActionPaneTab;
 };
 
 /**
@@ -164,3 +165,5 @@ export type {
   PreviewLoaderType,
   ResourceRefsProcessingOptions,
 };
+
+export type ActionPaneTab = 'source' | 'form' | 'graph' | 'logs';