Remove detail page tabs

linode · Apr 4, 2024 · a9a0b2c · a9a0b2c
1 parent 03adb1e
commit a9a0b2c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 44 deletions.
diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/manager/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -18,6 +18,10 @@ const defaultItems = [
     description: 'Another description',
     title: 'Another Title',
   },
+  {
+    description: 'Fourth description',
+    title: 'Number 4',
+  },
 ];
 
 const meta: Meta<DescriptionListProps> = {

diff --git a/...ages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/...ages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
@@ -1,17 +1,13 @@
 import { AFFINITY_TYPES } from '@linode/api-v4';
 import * as React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { NotFound } from 'src/components/NotFound';
 import { Notice } from 'src/components/Notice/Notice';
-import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
-import { TabLinkList } from 'src/components/Tabs/TabLinkList';
-import { TabPanels } from 'src/components/Tabs/TabPanels';
-import { Tabs } from 'src/components/Tabs/Tabs';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
@@ -28,8 +24,7 @@ import { PlacementGroupsSummary } from './PlacementGroupsSummary/PlacementGroups
 
 export const PlacementGroupsDetail = () => {
   const flags = useFlags();
-  const { id, tab } = useParams<{ id: string; tab?: string }>();
-  const history = useHistory();
+  const { id } = useParams<{ id: string }>();
   const placementGroupId = +id;
 
   const {
@@ -84,19 +79,7 @@ export const PlacementGroupsDetail = () => {
     placementGroup?.members.some((pgLinode) => pgLinode.linode_id === linode.id)
   );
 
-  const linodeCount = placementGroup.members.length;
-  const tabs = [
-    {
-      routeName: `/placement-groups/${id}`,
-      title: 'Summary',
-    },
-    {
-      routeName: `/placement-groups/${id}/linodes`,
-      title: `Linodes (${linodeCount})`,
-    },
-  ];
   const { affinity_type, label } = placementGroup;
-  const tabIndex = tab ? tabs.findIndex((t) => t.routeName.endsWith(tab)) : -1;
 
   const resetEditableLabel = () => {
     return `${label} (${AFFINITY_TYPES[affinity_type]})`;
@@ -145,29 +128,14 @@ export const PlacementGroupsDetail = () => {
           variant="warning"
         />
       )}
-      <Tabs
-        index={tabIndex === -1 ? 0 : tabIndex}
-        onChange={(i: number) => history.push(tabs[i].routeName)}
-      >
-        <TabLinkList tabs={tabs} />
-        <TabPanels>
-          <SafeTabPanel index={0}>
-            <PlacementGroupsSummary
-              placementGroup={placementGroup}
-              region={region}
-            />
-          </SafeTabPanel>
-          <SafeTabPanel index={1}>
-            <PlacementGroupsLinodes
-              assignedLinodes={assignedLinodes}
-              isFetchingLinodes={isFetchingLinodes}
-              isLinodeReadOnly={isLinodeReadOnly}
-              placementGroup={placementGroup}
-              region={region}
-            />
-          </SafeTabPanel>
-        </TabPanels>
-      </Tabs>
+      <PlacementGroupsSummary placementGroup={placementGroup} region={region} />
+      <PlacementGroupsLinodes
+        assignedLinodes={assignedLinodes}
+        isFetchingLinodes={isFetchingLinodes}
+        isLinodeReadOnly={isLinodeReadOnly}
+        placementGroup={placementGroup}
+        region={region}
+      />
     </>
   );
 };
diff --git a/...s/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx b/...s/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
+import { DescriptionList } from 'src/components/DescriptionList/DescriptionList';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
@@ -26,7 +27,7 @@ export const PlacementGroupsSummary = (props: Props) => {
   const linodesCount = placementGroup.members.length;
 
   return (
-    <>
+    <Box sx={{ mt: 1 }}>
       {!placementGroup.is_compliant && (
         <Notice spacingBottom={20} spacingTop={24} variant="warning">
           <Typography fontFamily={theme.font.bold}>
@@ -56,6 +57,14 @@ export const PlacementGroupsSummary = (props: Props) => {
         <Grid container spacing={1}>
           <Grid md={8} sm={12}>
             <Box display="flex">
+              <DescriptionList
+                items={[
+                  {
+                    description: `${linodesCount} of ${region?.placement_group_limits.maximum_linodes_per_pg}`,
+                    title: 'Linodes',
+                  },
+                ]}
+              />
               <StyledLabel>Linodes</StyledLabel>
               <Typography sx={{ mx: 8 }}>
                 {`${linodesCount} of ${region?.placement_group_limits.maximum_linodes_per_pg}`}
@@ -87,7 +96,7 @@ export const PlacementGroupsSummary = (props: Props) => {
           </Grid>
         </Grid>
       </Paper>
-    </>
+    </Box>
   );
 };