feat: [UIE-8082] - DBaaS GA Database Create: Summary section, refactoring

packages/manager/.changeset/pr-11193-added-1730738415614.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Summary Section for Database Create GA ([#11193](https://github.com/linode/manager/pull/11193))

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -118,7 +118,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases Beta'],
+      capabilities: ['Managed Databases'],
     });
 
     server.use(

packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx

@@ -0,0 +1,126 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import React from 'react';
+
+import { Divider } from 'src/components/Divider';
+import Select from 'src/components/EnhancedSelect';
+import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
+import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
+import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
+import { Typography } from 'src/components/Typography';
+import {
+  StyledLabelTooltip,
+  StyledTextField,
+} from 'src/features/Databases/DatabaseCreate/DatabaseCreate.style';
+import { EngineOption } from 'src/features/Databases/DatabaseCreate/EngineOption';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
+import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions';
+
+import { getEngineOptions } from './utilities';
+
+import type {
+  ClusterSize,
+  ComprehensiveReplicationType,
+  DatabaseEngine,
+  Engine,
+  Region,
+} from '@linode/api-v4';
+import type { FormikErrors } from 'formik';
+import type { Item } from 'src/components/EnhancedSelect';
+export interface DatabaseCreateValues {
+  allow_list: {
+    address: string;
+    error: string;
+  }[];
+  cluster_size: ClusterSize;
+  compression_type: undefined;
+  engine: Engine;
+  label: string;
+  region: string;
+  replication_commit_type: undefined;
+  replication_type: ComprehensiveReplicationType;
+  ssl_connection: boolean;
+  storage_engine: undefined;
+  type: string;
+}
+
+interface Props {
+  engines: DatabaseEngine[] | undefined;
+  errors: FormikErrors<DatabaseCreateValues>;
+  onChange: (filed: string, value: any) => void;
+  regionsData: Region[];
+  values: DatabaseCreateValues;
+}
+export const DatabaseClusterData = (props: Props) => {
+  const { engines, errors, onChange, regionsData, values } = props;
+  const isRestricted = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'add_databases',
+  });
+
+  const engineOptions = React.useMemo(() => {
+    if (!engines) {
+      return [];
+    }
+    return getEngineOptions(engines);
+  }, [engines]);
+
+  const labelToolTip = (
+    <StyledLabelTooltip>
+      <strong>Label must:</strong>
+      <ul>
+        <li>Begin with an alpha character</li>
+        <li>Contain only alpha characters or single hyphens</li>
+        <li>Be between 3 - 32 characters</li>
+      </ul>
+    </StyledLabelTooltip>
+  );
+
+  return (
+    <>
+      <Grid>
+        <Typography variant="h2">Name Your Cluster</Typography>
+        <StyledTextField
+          data-qa-label-input
+          disabled={isRestricted}
+          errorText={errors.label}
+          label="Cluster Label"
+          onChange={(e) => onChange('label', e.target.value)}
+          tooltipText={labelToolTip}
+          value={values.label}
+        />
+      </Grid>
+      <Divider spacingBottom={12} spacingTop={38} />
+      <Grid>
+        <Typography variant="h2">Select Engine and Region</Typography>
+        {/* TODO: use Autocomplete instead of Select */}
+        <Select
+          onChange={(selected: Item<string>) => {
+            onChange('engine', selected.value);
+          }}
+          value={getSelectedOptionFromGroupedOptions(
+            values.engine,
+            engineOptions
+          )}
+          components={{ Option: EngineOption, SingleValue: _SingleValue }}
+          disabled={isRestricted}
+          errorText={errors.engine}
+          isClearable={false}
+          label="Database Engine"
+          options={engineOptions}
+          placeholder="Select a Database Engine"
+        />
+      </Grid>
+      <Grid>
+        <RegionSelect
+          currentCapability="Managed Databases"
+          disableClearable
+          disabled={isRestricted}
+          errorText={errors.region}
+          onChange={(e, region) => onChange('region', region.id)}
+          regions={regionsData}
+          value={values.region}
+        />
+        <RegionHelperText mt={1} />
+      </Grid>
+    </>
+  );
+};

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts

@@ -0,0 +1,92 @@
+import { Box } from '@linode/ui';
+import { Grid, styled } from '@mui/material';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Button } from 'src/components/Button/Button';
+import { TextField } from 'src/components/TextField';
+import { Typography } from 'src/components/Typography';
+import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
+
+export const StyledLabelTooltip = styled(Box, {
+  label: 'StyledLabelTooltip',
+})(() => ({
+  '& strong': {
+    padding: 8,
+  },
+  '& ul': {
+    margin: '4px',
+  },
+}));
+
+export const StyledTextField = styled(TextField, {
+  label: 'StyledTextField',
+})(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    [theme.breakpoints.up('md')]: {
+      minWidth: 350,
+    },
+  },
+}));
+
+export const StyledEngineSelect = styled(Autocomplete, {
+  label: 'StyledTextField',
+})(() => ({
+  '& .react-select__option--is-focused': {
+    '&:not(.react-select__option--is-selected)': {
+      '& svg': {
+        filter: 'brightness(0) invert(1)',
+      },
+    },
+  },
+}));
+
+export const StyledPlansPanel = styled(PlansPanel, {
+  label: 'StyledPlansPanel',
+})(() => ({
+  margin: 0,
+  padding: 0,
+}));
+
+export const StyledBtnCtn = styled(Grid, {
+  label: 'StyledBtnCtn',
+})(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  marginTop: theme.spacing(2),
+  [theme.breakpoints.down('sm')]: {
+    alignItems: 'flex-end',
+    flexDirection: 'column',
+    marginTop: theme.spacing(),
+  },
+}));
+
+export const StyledCreateBtn = styled(Button, {
+  label: 'StyledCreateBtn',
+})(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    marginRight: theme.spacing(),
+  },
+  whiteSpace: 'nowrap',
+}));
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+})(({ theme }) => ({
+  marginLeft: theme.spacing(),
+  marginRight: theme.spacing(3),
+  [theme.breakpoints.down('sm')]: {
+    marginRight: 0,
+    padding: theme.spacing(),
+  },
+}));
+
+export const StyledSpan = styled('span', {
+  label: 'StyledSpan',
+})(({ theme }) => ({
+  borderRight: `1px solid ${theme.borderColors.borderTypography}`,
+  color: theme.textColors.tableStatic,
+  marginLeft: theme.spacing(1),
+  marginRight: theme.spacing(1),
+  paddingRight: theme.spacing(1),
+}));