Merge pull request #1346 from kubeshop/olelensmar/fix/new-resource-to…

…oltips fix: added tooltips to New Resource buttons
kubeshop · Feb 13, 2022 · 625fe93 · 625fe93
2 parents c696a38 + 7491004
commit 625fe93
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/src/components/organisms/NavigatorPane/NavigatorPane.tsx b/src/components/organisms/NavigatorPane/NavigatorPane.tsx
@@ -10,7 +10,7 @@ import {FilterOutlined, PlusOutlined} from '@ant-design/icons';
 import styled from 'styled-components';
 
 import {NAVIGATOR_HEIGHT_OFFSET, ROOT_FILE_ENTRY} from '@constants/constants';
-import {QuickFilterTooltip} from '@constants/tooltips';
+import {NewResourceTooltip, QuickFilterTooltip} from '@constants/tooltips';
 
 import {ResourceFilterType} from '@models/appstate';
 
@@ -120,17 +120,19 @@ const NavPane: React.FC = () => {
             </div>
           </MonoPaneTitle>
           <S.TitleBarRightButtons>
-            <S.PlusButton
-              id="create-resource-button"
-              $disabled={!isFolderOpen || isInPreviewMode}
-              $highlighted={highlightedItems.createResource}
-              className={highlightedItems.createResource ? 'animated-highlight' : ''}
-              disabled={!isFolderOpen || isInPreviewMode}
-              icon={<PlusOutlined />}
-              size="small"
-              type="link"
-              onClick={onClickNewResource}
-            />
+            <Tooltip title={NewResourceTooltip}>
+              <S.PlusButton
+                id="create-resource-button"
+                $disabled={!isFolderOpen || isInPreviewMode}
+                $highlighted={highlightedItems.createResource}
+                className={highlightedItems.createResource ? 'animated-highlight' : ''}
+                disabled={!isFolderOpen || isInPreviewMode}
+                icon={<PlusOutlined />}
+                size="small"
+                type="link"
+                onClick={onClickNewResource}
+              />
+            </Tooltip>
             <Tooltip title={QuickFilterTooltip}>
               <Badge count={appliedFilters.length} size="small" offset={[-2, 2]} color={Colors.greenOkay}>
                 <Button

diff --git a/src/components/organisms/NewResourceWizard/NewResourceWizard.tsx b/src/components/organisms/NewResourceWizard/NewResourceWizard.tsx
@@ -349,7 +349,7 @@ const NewResourceWizard = () => {
 
   return (
     <Modal
-      title="Add New Resource"
+      title="Create Resource"
       visible={newResourceWizardState.isOpen}
       onOk={onOk}
       onCancel={onCancel}

diff --git a/src/constants/tooltips.ts b/src/constants/tooltips.ts
@@ -55,3 +55,4 @@ export const NewEmptyProjectTooltip = 'New Empty Project';
 export const SearchProjectTooltip = 'Search for project by name or path';
 export const PluginDrawerTooltip = 'Open Plugins Manager';
 export const QuickFilterTooltip = `Filter results – Hint: quick-filter using ${KEY_CTRL_CMD} + P`;
+export const NewResourceTooltip = `Create new resource (${KEY_CTRL_CMD} + N)`;
diff --git a/src/navsections/K8sResourceSectionBlueprint/ResourceKindSectionNameSuffix.tsx b/src/navsections/K8sResourceSectionBlueprint/ResourceKindSectionNameSuffix.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo} from 'react';
 
-import {Button} from 'antd';
+import {Button, Tooltip} from 'antd';
 
 import {PlusOutlined} from '@ant-design/icons';
 
@@ -65,14 +65,16 @@ const ResourceKindSectionSuffix: React.FC<SectionCustomComponentProps> = props =
   return (
     <SuffixContainer>
       <ButtonContainer>
-        <Button
-          icon={<PlusOutlined />}
-          type="link"
-          onClick={createResource}
-          size="small"
-          disabled={isInPreviewMode}
-          style={{color: sectionInstance.isSelected && isSectionCollapsed ? Colors.blackPure : undefined}}
-        />
+        <Tooltip title={`Create a new ${resourceKind}`}>
+          <Button
+            icon={<PlusOutlined />}
+            type="link"
+            onClick={createResource}
+            size="small"
+            disabled={isInPreviewMode}
+            style={{color: sectionInstance.isSelected && isSectionCollapsed ? Colors.blackPure : undefined}}
+          />
+        </Tooltip>
       </ButtonContainer>
     </SuffixContainer>
   );