Initial commit - adapt UI to OBJ only

Author: abailly-akamai

packages/manager/src/features/Account/Quotas/Quotas.tsx

@@ -1,130 +1,76 @@
-import { quotaTypes } from '@linode/api-v4';
-import { useIsGeckoEnabled } from '@linode/shared';
-import { Divider, Paper, Select, Stack, Typography } from '@linode/ui';
+import { Divider, Notice, Paper, Select, Stack, Typography } from '@linode/ui';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
-import { useFlags } from 'src/hooks/useFlags';
+import { Link } from 'src/components/Link';
 
 import { QuotasTable } from './QuotasTable';
 import { useGetLocationsForQuotaService } from './utils';
 
-import type { Quota, QuotaType } from '@linode/api-v4';
+import type { Quota } from '@linode/api-v4';
 import type { SelectOption } from '@linode/ui';
 import type { Theme } from '@mui/material';
 
 export const Quotas = () => {
-  const flags = useFlags();
-  const { isGeckoLAEnabled } = useIsGeckoEnabled(
-    flags.gecko2?.enabled,
-    flags.gecko2?.la
-  );
   const history = useHistory();
-  const [selectedService, setSelectedService] = React.useState<
-    SelectOption<QuotaType>
-  >({
-    label: 'Linodes',
-    value: 'linode',
-  });
-  const [selectedLocation, setSelectedLocation] = React.useState<SelectOption<
-    Quota['region_applied']
-  > | null>(null);
-  const locationData = useGetLocationsForQuotaService(selectedService.value);
-
-  const serviceOptions = Object.entries(quotaTypes).map(([key, value]) => ({
-    label: value,
-    value: key as QuotaType,
-  }));
+  const [selectedLocation, setSelectedLocation] =
+    React.useState<null | SelectOption<Quota['region_applied']>>(null);
+  const locationData = useGetLocationsForQuotaService('object-storage');
 
-  const { regions, s3Endpoints } = locationData;
+  const { s3Endpoints } = locationData;
   const isFetchingLocations =
     'isFetchingS3Endpoints' in locationData
       ? locationData.isFetchingS3Endpoints
       : locationData.isFetchingRegions;
 
-  // Handlers
-  const onSelectServiceChange = (
-    _event: React.SyntheticEvent<Element, Event>,
-    value: SelectOption<QuotaType>
-  ) => {
-    setSelectedService(value);
-    setSelectedLocation(null);
-    // remove search params
-    history.push('/account/quotas');
-  };
-
   return (
     <>
       <DocumentTitleSegment segment="Quotas" />
       <Paper
         sx={(theme: Theme) => ({
-          marginTop: theme.spacing(2),
+          marginTop: theme.spacingFunction(16),
         })}
         variant="outlined"
       >
         <Stack>
+          <Typography variant="h2">Object Storage</Typography>
+          <Notice spacingTop={16} variant="info">
+            <Typography sx={{ py: 0.5 }}>
+              View your Object Storage quotas by applying the endpoint filter
+              below.{' '}
+              <Link to="https://techdocs.akamai.com/cloud-computing/docs/quotas">
+                Learn more about quotas
+              </Link>
+              .
+            </Typography>
+          </Notice>
           <Stack spacing={1}>
             <Select
-              label="Select a Service"
-              onChange={onSelectServiceChange}
-              options={serviceOptions}
-              placeholder="Select a service"
-              value={selectedService}
+              disabled={isFetchingLocations}
+              label="Object Storage Endpoint"
+              loading={isFetchingLocations}
+              onChange={(_event, value) => {
+                setSelectedLocation({
+                  label: value?.label,
+                  value: value?.value,
+                });
+                history.push('/account/quotas');
+              }}
+              options={
+                s3Endpoints?.map((location) => ({
+                  label: location.label,
+                  value: location.value,
+                })) ?? []
+              }
+              placeholder={
+                isFetchingLocations
+                  ? `Loading S3 endpoints...`
+                  : 'Select an Object Storage S3 endpoint'
+              }
+              searchable
+              sx={{ flexGrow: 1, mr: 2 }}
             />
-            {selectedService.value === 'object-storage' ? (
-              <Select
-                onChange={(_event, value) => {
-                  setSelectedLocation({
-                    label: value?.label,
-                    value: value?.value,
-                  });
-                  history.push('/account/quotas');
-                }}
-                options={
-                  s3Endpoints?.map((location) => ({
-                    label: location.label,
-                    value: location.value,
-                  })) ?? []
-                }
-                placeholder={
-                  isFetchingLocations
-                    ? `Loading ${selectedService.label} S3 endpoints...`
-                    : 'Select an Object Storage S3 endpoint'
-                }
-                disabled={isFetchingLocations}
-                label="Object Storage Endpoint"
-                loading={isFetchingLocations}
-                searchable
-                sx={{ flexGrow: 1, mr: 2 }}
-              />
-            ) : (
-              <RegionSelect
-                onChange={(_event, region) => {
-                  setSelectedLocation({
-                    label: region.label,
-                    value: region.id,
-                  });
-                  history.push('/account/quotas');
-                }}
-                placeholder={
-                  isFetchingLocations
-                    ? `Loading ${selectedService.label} regions...`
-                    : `Select a region for ${selectedService.label}`
-                }
-                currentCapability={undefined}
-                disableClearable
-                disabled={isFetchingLocations}
-                isGeckoLAEnabled={isGeckoLAEnabled}
-                loading={isFetchingLocations}
-                noOptionsText={`No resource found for ${selectedService.label}`}
-                regions={regions ?? []}
-                sx={{ flexGrow: 1, mr: 2 }}
-                value={selectedLocation?.value}
-              />
-            )}
           </Stack>
           <Divider spacingBottom={40} spacingTop={40} />
           <Stack
@@ -133,27 +79,19 @@ export const Quotas = () => {
             marginBottom={2}
           >
             <Typography variant="h3">Quotas</Typography>
-            <Stack
-              sx={(theme) => ({
-                position: 'relative',
-                top: `-${theme.spacing(2)}`,
-              })}
-              alignItems="center"
-              direction="row"
-              spacing={3}
-            >
-              {/* TODO LIMITS_M1: update once link is available */}
-              <DocsLink href="#" label="Learn More About Quotas" />
-            </Stack>
           </Stack>
           <Typography>
             This table shows quotas and usage. If you need to increase a quota,
-            select <strong>Request an Increase</strong> from the Actions menu.
+            select Request Increase from the Actions menu. Usage can also be
+            found using the <Link to="#">S3 APIs</Link>.
           </Typography>
           <Stack direction="column" spacing={2}>
             <QuotasTable
               selectedLocation={selectedLocation}
-              selectedService={selectedService}
+              selectedService={{
+                label: 'Object Storage',
+                value: 'object-storage',
+              }}
             />
           </Stack>
         </Stack>

packages/manager/src/features/Account/Quotas/QuotasTable.tsx

@@ -26,7 +26,7 @@ import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/S
 const quotaRowMinHeight = 58;
 
 interface QuotasTableProps {
-  selectedLocation: SelectOption<Quota['region_applied']> | null;
+  selectedLocation: null | SelectOption<Quota['region_applied']>;
   selectedService: SelectOption<QuotaType>;
 }
 
@@ -96,7 +96,7 @@ export const QuotasTable = (props: QuotasTableProps) => {
     <>
       <Table
         sx={(theme) => ({
-          marginTop: theme.spacing(2),
+          marginTop: theme.spacingFunction(16),
           minWidth: theme.breakpoints.values.sm,
         })}
       >
@@ -159,13 +159,13 @@ export const QuotasTable = (props: QuotasTableProps) => {
       )}
 
       <Dialog
+        onClose={() => setSupportModalOpen(false)}
+        open={supportModalOpen}
         sx={{
           '& .MuiDialog-paper': {
             width: '600px',
           },
         }}
-        onClose={() => setSupportModalOpen(false)}
-        open={supportModalOpen}
         title="Increase Quota"
       >
         {selectedQuota && (

packages/manager/src/features/Account/Quotas/utils.ts

@@ -1,11 +1,7 @@
 import { useRegionsQuery } from '@linode/queries';
 import { object, string } from 'yup';
 
-import {
-  GLOBAL_QUOTA_LABEL,
-  GLOBAL_QUOTA_VALUE,
-  regionSelectGlobalOption,
-} from 'src/components/RegionSelect/constants';
+import { regionSelectGlobalOption } from 'src/components/RegionSelect/constants';
 import { useObjectStorageEndpoints } from 'src/queries/object-storage/queries';
 
 import type { QuotaIncreaseFormFields } from './QuotasIncreaseForm';
@@ -53,7 +49,6 @@ export const useGetLocationsForQuotaService = (
       isFetchingS3Endpoints,
       regions: null,
       s3Endpoints: [
-        ...[{ label: GLOBAL_QUOTA_LABEL, value: GLOBAL_QUOTA_VALUE }],
         ...(s3Endpoints ?? [])
           .map((s3Endpoint) => {
             if (!s3Endpoint.s3_endpoint) {