PMM-13127 Add tabs back in for inventory and settings (#767)

* PMM-13127 Add tabs back in for inventory and settings * PMM-13127 Refactor * PMM-13127 Remove custom mega menu item * PMM-13127 Fix loading
percona · Sep 18, 2024 · 8e5ec28 · 8e5ec28
1 parent 7dd5148
commit 8e5ec28
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 684 deletions.
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -5,13 +5,13 @@ import { Row } from 'react-table';
 
 import { AppEvents } from '@grafana/data';
 import { Badge, Button, HorizontalGroup, Icon, Link, Modal, TagList, useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 import { CheckboxField } from 'app/percona/shared/components/Elements/Checkbox';
 import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { Action } from 'app/percona/shared/components/Elements/MultipleActions';
 import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
 import { FormElement } from 'app/percona/shared/components/Form';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
 import { RemoveNodeParams } from 'app/percona/shared/core/reducers/nodes';
@@ -299,8 +299,8 @@ export const NodesTab = () => {
   }, []);
 
   return (
-    <Page navModel={navModel}>
-      <Page.Contents>
+    <TabbedPage navModel={navModel} isLoading={isLoading}>
+      <TabbedPageContents>
         <FeatureLoader>
           <div className={styles.actionPanel}>
             <Button
@@ -366,8 +366,8 @@ export const NodesTab = () => {
             showFilter
           />
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
@@ -5,9 +5,9 @@ import { useLocalStorage } from 'react-use';
 
 import { locationService } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { ReadMoreLink } from 'app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
 import { fetchActiveServiceTypesAction, fetchServicesAction } from 'app/percona/shared/core/reducers/services';
@@ -95,8 +95,8 @@ export const Services = () => {
   }, [onModalClose, loadData]);
 
   return (
-    <Page navModel={navModel}>
-      <Page.Contents isLoading={isLoading}>
+    <TabbedPage navModel={navModel} isLoading={isLoading}>
+      <TabbedPageContents>
         <FeatureLoader>
           <HorizontalGroup height={40} justify="flex-end" align="flex-start">
             <HorizontalGroup align="center">
@@ -160,8 +160,8 @@ export const Services = () => {
             />
           )}
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/settings/components/Advanced/Advanced.tsx b/public/app/percona/settings/components/Advanced/Advanced.tsx
@@ -3,13 +3,13 @@ import React, { FC, useState } from 'react';
 import { Field, withTypes } from 'react-final-form';
 
 import { Button, Icon, Spinner, useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 import { Messages } from 'app/percona/settings/Settings.messages';
 import { getSettingsStyles } from 'app/percona/settings/Settings.styles';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
 import { NumberInputField } from 'app/percona/shared/components/Form/NumberInput';
 import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { updateSettingsAction } from 'app/percona/shared/core/reducers';
 import { getPerconaSettings } from 'app/percona/shared/core/selectors';
@@ -160,8 +160,8 @@ export const Advanced: FC = () => {
   const { Form } = withTypes<AdvancedFormProps>();
 
   return (
-    <Page navId="settings-advanced">
-      <Page.Contents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
+    <TabbedPage navId="settings-advanced" vertical>
+      <TabbedPageContents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
         <FeatureLoader>
           <div className={styles.advancedWrapper}>
             <Form
@@ -349,8 +349,8 @@ export const Advanced: FC = () => {
             />
           </div>
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/settings/components/MetricsResolution/MetricsResolution.tsx b/public/app/percona/settings/components/MetricsResolution/MetricsResolution.tsx
@@ -3,14 +3,14 @@ import React, { FC, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 
 import { Button, Spinner, useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 import { Messages } from 'app/percona/settings/Settings.messages';
 import { getSettingsStyles } from 'app/percona/settings/Settings.styles';
 import { MetricsResolutions } from 'app/percona/settings/Settings.types';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
 import { NumberInputField } from 'app/percona/shared/components/Form/NumberInput';
 import { RadioButtonGroupField } from 'app/percona/shared/components/Form/RadioButtonGroup';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { updateSettingsAction } from 'app/percona/shared/core/reducers';
 import { getPerconaSettings } from 'app/percona/shared/core/selectors';
@@ -99,8 +99,8 @@ export const MetricsResolution: FC = () => {
   };
 
   return (
-    <Page navId="settings-metrics-resolution">
-      <Page.Contents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
+    <TabbedPage navId="settings-metrics-resolution" vertical>
+      <TabbedPageContents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
         <FeatureLoader>
           <div className={styles.resolutionsWrapper}>
             <Form
@@ -163,8 +163,8 @@ export const MetricsResolution: FC = () => {
             />
           </div>
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/settings/components/Platform/Platform.tsx b/public/app/percona/settings/components/Platform/Platform.tsx
@@ -4,9 +4,9 @@ import React, { FC, useEffect, useState } from 'react';
 import { AppEvents } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
-import { Page } from 'app/core/components/Page/Page';
 import { getSettingsStyles } from 'app/percona/settings/Settings.styles';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { fetchServerInfoAction, fetchSettingsAction, updateSettingsAction } from 'app/percona/shared/core/reducers';
 import { getPerconaServer, getPerconaSettings } from 'app/percona/shared/core/selectors';
 import { logger } from 'app/percona/shared/helpers/logger';
@@ -82,17 +82,17 @@ export const Platform: FC = () => {
   };
 
   return (
-    <Page navId="settings-percona-platform">
-      <Page.Contents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
+    <TabbedPage navId="settings-percona-platform" vertical>
+      <TabbedPageContents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
         <FeatureLoader>
           {result?.isConnectedToPortal ? (
             <Connected />
           ) : (
             <Connect initialValues={initialValues} onConnect={handleConnect} connecting={connecting} />
           )}
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/settings/components/SSHKey/SSHKey.tsx b/public/app/percona/settings/components/SSHKey/SSHKey.tsx
@@ -3,11 +3,11 @@ import React, { FC, useCallback, useState } from 'react';
 import { Field, Form } from 'react-final-form';
 
 import { Button, Spinner, TextArea, useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 import { Messages } from 'app/percona/settings/Settings.messages';
 import { getSettingsStyles } from 'app/percona/settings/Settings.styles';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { TabbedPage, TabbedPageContents } from 'app/percona/shared/components/TabbedPage';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { updateSettingsAction } from 'app/percona/shared/core/reducers';
 import { getPerconaSettings } from 'app/percona/shared/core/selectors';
@@ -45,8 +45,8 @@ export const SSHKey: FC = () => {
   }, []);
 
   return (
-    <Page navId="settings-ssh">
-      <Page.Contents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
+    <TabbedPage navId="settings-ssh" vertical>
+      <TabbedPageContents dataTestId="settings-tab-content" className={settingsStyles.pageContent}>
         <FeatureLoader>
           <div className={cx(settingsStyles.wrapper, styles.sshKeyWrapper)}>
             <Form
@@ -77,8 +77,8 @@ export const SSHKey: FC = () => {
             />
           </div>
         </FeatureLoader>
-      </Page.Contents>
-    </Page>
+      </TabbedPageContents>
+    </TabbedPage>
   );
 };
 

diff --git a/public/app/percona/shared/components/MegaMenuItem/FeatureHighlight.tsx b/public/app/percona/shared/components/MegaMenuItem/FeatureHighlight.tsx