Merge pull request #7125 from jerolimov/bz-1895065

Bug 1895065: Fix sample / snippet toggle in resource sidebar
openshift · Nov 6, 2020 · 76147dc · 76147dc
2 parents 790cf1b + e7dd1f8
commit 76147dc
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 27 deletions.
diff --git a/frontend/public/components/overview/resource-overview-details.tsx b/frontend/public/components/overview/resource-overview-details.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 import * as UIActions from '../../actions/ui';
 import { K8sKind } from '../../module/k8s';
-import { AsyncComponent, KebabAction, ResourceOverviewHeading, SimpleTabNav } from '../utils';
+import { AsyncComponent, KebabAction, ResourceOverviewHeading, SimpleTabNav, Tab } from '../utils';
 import { OverviewItem } from '@console/shared';
 import { useExtensions, OverviewResourceTab, isOverviewResourceTab } from '@console/plugin-sdk';
 
@@ -65,7 +65,7 @@ export const ResourceOverviewDetails = connect<PropsFromState, PropsFromDispatch
     const keys = Object.keys(item);
     const keysRef = React.useRef(keys);
     const tabsRef = React.useRef(tabs);
-    const pluginTabsRef = React.useRef<React.ComponentProps<typeof SimpleTabNav>['tabs']>();
+    const pluginTabsRef = React.useRef<Tab[]>();
     if (
       !pluginTabsRef.current ||
       !_.isEqual(keys, keysRef.current) ||

diff --git a/frontend/public/components/sidebars/resource-sidebar-samples.tsx b/frontend/public/components/sidebars/resource-sidebar-samples.tsx
@@ -421,6 +421,6 @@ type ResourceSidebarSamplesProps = {
   samples: Sample[];
   loadSampleYaml: LoadSampleYaml;
   downloadSampleYaml: DownloadSampleYaml;
-  yamlSamplesList: FirehoseResult;
+  yamlSamplesList?: FirehoseResult;
   kindObj: K8sKind;
 };
diff --git a/.../components/sidebars/resource-sidebar.jsx → .../components/sidebars/resource-sidebar.tsx b/.../components/sidebars/resource-sidebar.jsx → .../components/sidebars/resource-sidebar.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ResourceSidebarSnippets, ResourceSidebarSamples } from './resource-sidebar-samples';
 import { ExploreType } from './explore-type-sidebar';
-import { SimpleTabNav } from '../utils';
+import { SimpleTabNav, Tab } from '../utils';
 
 const sidebarScrollTop = () => {
   document.getElementsByClassName('co-p-has-sidebar__sidebar')[0].scrollTop = 0;
@@ -56,15 +56,12 @@ const ResourceSamples = ({ samples, kindObj, downloadSampleYaml, loadSampleYaml
   />
 );
 
-const ResourceSnippets = ({ snippets, kindObj, insertSnippetYaml }) => (
-  <ResourceSidebarSnippets
-    snippets={snippets}
-    kindObj={kindObj}
-    insertSnippetYaml={insertSnippetYaml}
-  />
+const ResourceSnippets = ({ snippets, insertSnippetYaml }) => (
+  <ResourceSidebarSnippets snippets={snippets} insertSnippetYaml={insertSnippetYaml} />
 );
 
 export const ResourceSidebar = (props) => {
+  const { t } = useTranslation();
   const {
     downloadSampleYaml,
     kindObj,
@@ -86,26 +83,23 @@ export const ResourceSidebar = (props) => {
   const showSamples = !_.isEmpty(samples) && isCreateMode;
   const showSnippets = !_.isEmpty(snippets);
 
-  let tabs = [];
+  let tabs: Tab[] = [];
   if (showSamples) {
     tabs.push({
-      // t('sidebar~Samples')
-      nameKey: 'sidebar~Samples',
+      name: t('sidebar~Samples'),
       component: ResourceSamples,
     });
   }
   if (showSnippets) {
     tabs.push({
-      // t('sidebar~Snippets')
-      nameKey: 'sidebar~Snippets',
+      name: t('sidebar~Snippets'),
       component: ResourceSnippets,
     });
   }
   if (showSchema) {
     tabs = [
       {
-        // t('sidebar~Schema')
-        nameKey: 'sidebar~Schema',
+        name: t('sidebar~Schema'),
         component: ResourceSchema,
       },
       ...tabs,

diff --git a/frontend/public/components/utils/simple-tab-nav.tsx b/frontend/public/components/utils/simple-tab-nav.tsx
@@ -56,7 +56,7 @@ class SimpleTabNav_ extends React.Component<SimpleTabNavProps, SimpleTabNavState
   }
 
   render() {
-    const { tabs, tabProps, additionalClassNames, t } = this.props;
+    const { tabs, tabProps, additionalClassNames } = this.props;
     const { selectedTab } = this.state;
     const selectedTabData = _.find(tabs, { name: selectedTab }) || _.head(tabs);
     const Component = selectedTabData.component;
@@ -66,10 +66,10 @@ class SimpleTabNav_ extends React.Component<SimpleTabNavProps, SimpleTabNavState
         <ul className={classNames('co-m-horizontal-nav__menu', additionalClassNames)}>
           {_.map(tabs, (tab) => (
             <SimpleTab
+              key={tab.name}
               active={selectedTabData.name === tab.name}
-              key={tab.nameKey ? tab.nameKey : tab.name}
               onClick={this.onClickTab}
-              title={tab.nameKey ? t(tab.nameKey) : tab.name}
+              title={tab.name}
             />
           ))}
         </ul>
@@ -79,19 +79,19 @@ class SimpleTabNav_ extends React.Component<SimpleTabNavProps, SimpleTabNavState
   }
 }
 
-export const SimpleTabNav = withTranslation()(SimpleTabNav_);
+export const SimpleTabNav = withTranslation()(SimpleTabNav_) as React.FC<SimpleTabNavProps>;
+
+export type Tab = {
+  name: string;
+  component: any;
+};
 
 type SimpleTabNavProps = {
   onClickTab?: (name: string) => void;
   selectedTab?: string;
   tabProps: any;
-  tabs: {
-    name?: string;
-    nameKey?: string;
-    component: any;
-  }[];
+  tabs: Tab[];
   additionalClassNames?: string;
-  t?: any;
 };
 
 type SimpleTabNavState = {