fix: dry run config edit icon

kubeshop · Oct 11, 2023 · 176566e · 176566e
1 parent e2f55cd
commit 176566e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/components/organisms/ExplorerPane/DryRunsPane/HelmConfigRenderer.tsx b/src/components/organisms/ExplorerPane/DryRunsPane/HelmConfigRenderer.tsx
@@ -33,15 +33,20 @@ const HelmConfigRenderer: React.FC<IProps> = props => {
       : undefined
   );
 
-  const onClickEdit = useCallback(() => {
-    if (!previewConfiguration || !helmChart) {
-      return;
-    }
+  const onClickEdit = useCallback<React.MouseEventHandler<HTMLSpanElement>>(
+    e => {
+      e.stopPropagation();
 
-    dispatch(
-      openPreviewConfigurationEditor({helmChartId: helmChart.id, previewConfigurationId: previewConfiguration.id})
-    );
-  }, [previewConfiguration, helmChart, dispatch]);
+      if (!previewConfiguration || !helmChart) {
+        return;
+      }
+
+      dispatch(
+        openPreviewConfigurationEditor({helmChartId: helmChart.id, previewConfigurationId: previewConfiguration.id})
+      );
+    },
+    [previewConfiguration, helmChart, dispatch]
+  );
 
   if (!previewConfiguration) {
     return null;
@@ -58,7 +63,7 @@ const HelmConfigRenderer: React.FC<IProps> = props => {
     >
       <S.ItemName isPreviewed={mightBePreview}>{previewConfiguration.name}</S.ItemName>
       {isOptimisticLoading && <S.ReloadIcon spin />}
-      <S.EditIcon onClick={onClickEdit} />
+      <S.EditIcon $isPreviewed={mightBePreview} onClick={onClickEdit} />
       {renderPreviewControls()}
     </S.ItemContainer>
   );

diff --git a/src/components/organisms/ExplorerPane/DryRunsPane/styled.tsx b/src/components/organisms/ExplorerPane/DryRunsPane/styled.tsx
@@ -84,8 +84,8 @@ export const ItemName = styled.div<ItemNameProps>`
   }};
 `;
 
-export const EditIcon = styled(EditOutlined)`
-  color: ${Colors.blackPure};
+export const EditIcon = styled(EditOutlined)<{$isPreviewed: boolean}>`
+  color: ${props => (props.$isPreviewed ? Colors.blackPure : Colors.blue6)};
   margin-left: 8px;
 `;