feat: add tooltip

kubeshop · Apr 28, 2023 · 94dc35c · 94dc35c
1 parent 56d7fee
commit 94dc35c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 16 deletions.
diff --git a/src/components/organisms/NavigatorPane/KindRenderer/KindSuffix.tsx b/src/components/organisms/NavigatorPane/KindRenderer/KindSuffix.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 
 import {Button, Tooltip} from 'antd';
 
@@ -7,6 +7,7 @@ import {PlusOutlined} from '@ant-design/icons';
 import styled from 'styled-components';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
+import {DisabledAddResourceTooltip} from '@constants/tooltips';
 
 import {isInClusterModeSelector} from '@redux/appConfig';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
@@ -27,7 +28,8 @@ const ButtonContainer = styled.span`
   display: flex;
   align-items: center;
   padding: 0 4px;
-  margin-right: 2px;
+  margin-right: 16px;
+
   & .ant-btn-sm {
     height: 20px;
     width: 20px;
@@ -48,6 +50,8 @@ const KindSuffix: React.FC<Props> = props => {
   const isInClusterMode = useAppSelector(isInClusterModeSelector);
   const isSectionCollapsed = useAppSelector(state => state.ui.navigator.collapsedResourceKinds.includes(resourceKind));
 
+  const isAddResourceDisabled = useMemo(() => isInPreviewMode || isInClusterMode, [isInClusterMode, isInPreviewMode]);
+
   const createResource = useCallback(() => {
     if (!resourceKind) {
       return;
@@ -67,13 +71,20 @@ const KindSuffix: React.FC<Props> = props => {
   return (
     <SuffixContainer>
       <ButtonContainer>
-        <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={`Create a new ${resourceKind}`}>
+        <Tooltip
+          mouseEnterDelay={TOOLTIP_DELAY}
+          title={
+            isAddResourceDisabled
+              ? DisabledAddResourceTooltip({type: isInClusterMode ? 'cluster' : 'preview', kind: resourceKind})
+              : `Create a new ${resourceKind}`
+          }
+        >
           <Button
             icon={<PlusOutlined />}
             type="link"
             onClick={createResource}
             size="small"
-            disabled={isInPreviewMode || isInClusterMode}
+            disabled={isAddResourceDisabled}
             style={{color: isSelected && isSectionCollapsed ? Colors.blackPure : undefined}}
           />
         </Tooltip>

diff --git a/src/components/organisms/NavigatorPane/NavigatorPane.tsx b/src/components/organisms/NavigatorPane/NavigatorPane.tsx
@@ -8,7 +8,7 @@ import {PlusOutlined} from '@ant-design/icons';
 import styled from 'styled-components';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
-import {NewResourceTooltip} from '@constants/tooltips';
+import {DisabledAddResourceTooltip, NewResourceTooltip} from '@constants/tooltips';
 
 import {isInClusterModeSelector} from '@redux/appConfig';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
@@ -47,6 +47,11 @@ const NavPane: React.FC = () => {
   const height = usePaneHeight();
   const newResourceMenuItems = useNewResourceMenuItems();
 
+  const isAddResourceDisabled = useMemo(
+    () => !isFolderOpen || isInPreviewMode || isInClusterMode,
+    [isFolderOpen, isInClusterMode, isInPreviewMode]
+  );
+
   const resourceFilterButtonHandler = useCallback(() => {
     dispatch(toggleResourceFilters());
   }, [dispatch]);
@@ -72,25 +77,35 @@ const NavPane: React.FC = () => {
             actions={
               <S.TitleBarRightButtons>
                 <CollapseAction />
-                <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={NewResourceTooltip}>
-                  <Dropdown
-                    trigger={['click']}
-                    menu={{items: newResourceMenuItems}}
-                    overlayClassName="dropdown-secondary"
-                    disabled={!isFolderOpen || isInPreviewMode || isInClusterMode}
+
+                <Dropdown
+                  trigger={['click']}
+                  menu={{items: newResourceMenuItems}}
+                  overlayClassName="dropdown-secondary"
+                  disabled={isAddResourceDisabled}
+                >
+                  <Tooltip
+                    mouseEnterDelay={TOOLTIP_DELAY}
+                    title={
+                      isAddResourceDisabled
+                        ? DisabledAddResourceTooltip({
+                            type: isInClusterMode ? 'cluster' : isInPreviewMode ? 'preview' : 'other',
+                          })
+                        : NewResourceTooltip
+                    }
                   >
                     <S.PlusButton
                       id="create-resource-button"
-                      $disabled={!isFolderOpen || isInPreviewMode || isInClusterMode}
+                      $disabled={isAddResourceDisabled}
                       $highlighted={isHighlighted}
                       className={isHighlighted ? 'animated-highlight' : ''}
-                      disabled={!isFolderOpen || isInPreviewMode || isInClusterMode}
+                      disabled={isAddResourceDisabled}
                       icon={<PlusOutlined />}
                       size="small"
                       type="link"
                     />
-                  </Dropdown>
-                </Tooltip>
+                  </Tooltip>
+                </Dropdown>
               </S.TitleBarRightButtons>
             }
           />

diff --git a/src/components/organisms/NavigatorPane/ResourceRenderer/ResourceRenderer.styled.tsx b/src/components/organisms/NavigatorPane/ResourceRenderer/ResourceRenderer.styled.tsx
@@ -18,14 +18,16 @@ export const ItemContainer = styled.span<ItemContainerProps>`
     min-width: 0;
   }
   padding-left: 30px;
-  padding-right: 8px;
+  padding-right: 20px;
   margin-bottom: 2px;
   cursor: pointer;
+
   ${props => {
     if (props.isLastItem) {
       return `margin-bottom: 12px;`;
     }
   }}
+
   ${props => {
     if (!props.isSelected && props.isHighlighted) {
       if (props.isHovered) {

diff --git a/src/constants/tooltips.tsx b/src/constants/tooltips.tsx
@@ -106,3 +106,11 @@ export const GitCommitEnabledTooltip = ({branchName}: {branchName: string}) => (
 export const ClusterDashboardErrorsWarningTooltip = ({type}: {type: 'errors' | 'warnings'}) => (
   <div>Click to see all your cluster {type}</div>
 );
+export const DisabledAddResourceTooltip = ({type, kind}: {type: 'cluster' | 'preview' | 'other'; kind?: string}) =>
+  type === 'other' ? (
+    <div>Adding a resource is not possible</div>
+  ) : (
+    <div>
+      Adding a {kind || 'resource'} is not possible in {type === 'cluster' ? 'cluster' : 'preview'} mode
+    </div>
+  );