Additional changes to fix column misalignment issue

linode · May 6, 2024 · fa36990 · fa36990
1 parent e0b597b
commit fa36990
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 26 deletions.
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Plan.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Plan.tsx
@@ -45,7 +45,7 @@ export const Plan = () => {
       regionsData={regions} // @todo move this query deeper if possible
       selectedId={field.value}
       selectedRegionID={regionId}
-      showTransfer
+      showLimits
       types={types?.map(extendType) ?? []} // @todo don't extend type
     />
   );

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -644,7 +644,7 @@ export class LinodeCreate extends React.PureComponent<
               regionsData={regionsData!}
               selectedId={this.props.selectedTypeID}
               selectedRegionID={selectedRegionID}
-              showTransfer
+              showLimits
               types={this.filterTypes()}
             />
           </Stack>

diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx
@@ -53,7 +53,7 @@ export interface Props {
   selectedDiskSize?: number;
   selectedId?: string;
   selectedRegionId?: Region['id'];
-  showTransfer?: boolean;
+  showLimits?: boolean;
 }
 
 export const PlanContainer = (props: Props) => {
@@ -71,18 +71,17 @@ export const PlanContainer = (props: Props) => {
     selectedDiskSize,
     selectedId,
     selectedRegionId,
-    showTransfer,
+    showLimits,
   } = props;
   const location = useLocation();
 
   // Show the Transfer column if, for any plan, the api returned data and we're not in the Database Create flow
-  const shouldShowTransfer =
-    showTransfer && plans.some((plan: TypeWithAvailability) => plan.transfer);
+  const showTransfer =
+    showLimits && plans.some((plan: TypeWithAvailability) => plan.transfer);
 
   // Show the Network throughput column if, for any plan, the api returned data (currently Bare Metal does not)
-  const shouldShowNetwork =
-    showTransfer &&
-    plans.some((plan: TypeWithAvailability) => plan.network_out);
+  const showNetwork =
+    showLimits && plans.some((plan: TypeWithAvailability) => plan.network_out);
 
   // DC Dynamic price logic - DB creation and DB resize flows are currently out of scope
   const isDatabaseCreateFlow = location.pathname.includes('/databases/create');
@@ -124,26 +123,28 @@ export const PlanContainer = (props: Props) => {
           selectedDiskSize={selectedDiskSize}
           selectedId={selectedId}
           selectedRegionId={selectedRegionId}
+          showNetwork={showNetwork}
           showTransfer={showTransfer}
           type={plan}
           wholePanelIsDisabled={isWholePanelDisabled}
         />
       );
     });
   }, [
-    allDisabledPlans,
-    disabledPlanTypesToolTipText,
-    hasMajorityOfPlansDisabled,
     plans,
-    selectedRegionId,
+    allDisabledPlans,
     isWholePanelDisabled,
+    hasMajorityOfPlansDisabled,
     currentPlanHeading,
     disabledClasses,
+    disabledPlanTypesToolTipText,
     isCreate,
     linodeID,
     onSelect,
     selectedDiskSize,
     selectedId,
+    selectedRegionId,
+    showNetwork,
     showTransfer,
   ]);
 
@@ -170,8 +171,8 @@ export const PlanContainer = (props: Props) => {
                 {tableCells.map(({ cellName, center, noWrap, testId }) => {
                   const attributeValue = `${testId}-header`;
                   if (
-                    (!shouldShowTransfer && testId === 'transfer') ||
-                    (!shouldShowNetwork && testId === 'network')
+                    (!showTransfer && testId === 'transfer') ||
+                    (!showNetwork && testId === 'network')
                   ) {
                     return null;
                   }

diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
@@ -48,6 +48,7 @@ export interface PlanSelectionProps {
   selectedDiskSize?: number;
   selectedId?: string;
   selectedRegionId?: Region['id'];
+  showNetwork?: boolean;
   showTransfer?: boolean;
   type: PlanSelectionType;
   wholePanelIsDisabled?: boolean;
@@ -95,6 +96,7 @@ export const PlanSelection = (props: PlanSelectionProps) => {
     selectedDiskSize,
     selectedId,
     selectedRegionId,
+    showNetwork,
     showTransfer,
     type,
     wholePanelIsDisabled,
@@ -111,8 +113,6 @@ export const PlanSelection = (props: PlanSelectionProps) => {
   });
   const isGPU = type.class === 'gpu';
   const isDisabledClass = getDisabledClass(type.class, disabledClasses ?? []);
-  const shouldShowTransfer = showTransfer && type.transfer;
-  const shouldShowNetwork = showTransfer && type.network_out;
 
   const { data: linode } = useLinodeQuery(
     linodeID ?? -1,
@@ -275,16 +275,22 @@ export const PlanSelection = (props: PlanSelectionProps) => {
           <TableCell center data-qa-storage noWrap>
             {convertMegabytesTo(type.disk, true)}
           </TableCell>
-          {shouldShowTransfer && type.transfer ? (
+          {showTransfer ? (
             <TableCell center data-qa-transfer>
-              {type.transfer / 1000} TB
+              {type.transfer ? <>{type.transfer / 1000} TB</> : ''}
             </TableCell>
           ) : null}
-          {shouldShowNetwork && type.network_out ? (
+          {showNetwork ? (
             <TableCell center data-qa-network noWrap>
-              {LINODE_NETWORK_IN} Gbps{' '}
-              <span style={{ color: '#9DA4A6' }}>/</span>{' '}
-              {type.network_out / 1000} Gbps
+              {type.network_out ? (
+                <>
+                  {LINODE_NETWORK_IN} Gbps{' '}
+                  <span style={{ color: '#9DA4A6' }}>/</span>{' '}
+                  {type.network_out / 1000} Gbps
+                </>
+              ) : (
+                ''
+              )}
             </TableCell>
           ) : null}
         </TableRow>

diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx
@@ -44,7 +44,7 @@ export interface PlansPanelProps {
   selectedDiskSize?: number;
   selectedId?: string;
   selectedRegionID?: string;
-  showTransfer?: boolean;
+  showLimits?: boolean;
   tabDisabledMessage?: string;
   tabbedPanelInnerClass?: string;
   types: PlanSelectionType[];
@@ -69,7 +69,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
     selectedDiskSize,
     selectedId,
     selectedRegionID,
-    showTransfer,
+    showLimits,
     types,
   } = props;
 
@@ -191,7 +191,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
               selectedDiskSize={selectedDiskSize}
               selectedId={selectedId}
               selectedRegionId={selectedRegionID}
-              showTransfer={showTransfer}
+              showLimits={showLimits}
             />
           </>
         );