Merge branch 'linode:develop' into develop

cpathipa · Sep 19, 2024 · 3196f2a · 3196f2a
2 parents a25728e + c602e28
commit 3196f2a
Show file tree

Hide file tree

Showing 26 changed files with 413 additions and 195 deletions.
diff --git a/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md b/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+DBaaS V2 readonly hosts ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json
@@ -67,7 +67,7 @@
     "lint-staged": "^15.2.9",
     "prettier": "~2.2.1",
     "tsup": "^8.2.4",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [

diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts
@@ -13,7 +13,6 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases Beta'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'

diff --git a/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md b/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS V2 enhancements to the Summary and Settings tabs ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/manager/.changeset/pr-10948-fixed-1726517375013.md b/packages/manager/.changeset/pr-10948-fixed-1726517375013.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Linode IPv6 Range rDNS typo ([#10948](https://github.com/linode/manager/pull/10948))
diff --git a/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md b/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update dompurify and jsPDF packages to resolve dependabot security alerts ([#10955](https://github.com/linode/manager/pull/10955))
diff --git a/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md b/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update vite and related packages to latest versions ([#10960](https://github.com/linode/manager/pull/10960))
diff --git a/packages/manager/.changeset/pr-10963-changed-1726672295505.md b/packages/manager/.changeset/pr-10963-changed-1726672295505.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Disable 'Save' button in Change Avatar Color dialog until color is changed ([#10963](https://github.com/linode/manager/pull/10963))
diff --git a/packages/manager/.changeset/pr-10965-fixed-1726675687897.md b/packages/manager/.changeset/pr-10965-fixed-1726675687897.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Incorrect URL slug for Apache Spark Cluster Marketplace documentation ([#10965](https://github.com/linode/manager/pull/10965))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -35,15 +35,15 @@
     "chart.js": "~2.9.4",
     "copy-to-clipboard": "^3.0.8",
     "country-region-data": "^3.0.0",
-    "dompurify": "^3.1.3",
+    "dompurify": "^3.1.6",
     "flag-icons": "^6.6.5",
     "font-logos": "^0.18.0",
     "formik": "~2.1.3",
     "he": "^1.2.0",
     "highlight.js": "~10.4.1",
     "immer": "^9.0.6",
     "ipaddr.js": "^1.9.1",
-    "jspdf": "^2.3.1",
+    "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.5.14",
     "launchdarkly-react-client-sdk": "3.0.10",
     "libphonenumber-js": "^1.10.6",
@@ -167,9 +167,9 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "chai-string": "^1.5.0",
     "chalk": "^5.2.0",
     "commander": "^6.2.1",
@@ -211,9 +211,9 @@
     "storybook": "^8.3.0",
     "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
-    "vite": "^5.1.7",
+    "vite": "^5.4.6",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   },
   "browserslist": [
     ">1%",

diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx
@@ -46,6 +46,7 @@ export const LinkButton = (props: Props) => {
       disabled={isDisabled}
       onClick={onClick}
       style={style}
+      tabIndex={0}
       type="button"
     >
       {children}

diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
@@ -181,8 +181,8 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
     created: '2021-12-09T17:15:12',
     engine: Factory.each((i) => ['mysql', 'postgresql'][i % 2] as Engine),
     hosts: {
-      primary: 'db-primary-0.b.linodeb.net',
-      secondary: 'db-secondary-0.b.linodeb.net',
+      primary: 'db-mysql-primary-0.b.linodeb.net',
+      secondary: 'db-mysql-secondary-0.b.linodeb.net',
     },
     id: Factory.each((i) => i),
     instance_uri: '',
@@ -222,6 +222,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   members: {
     '2.2.2.2': 'primary',
   },
+  platform: pickRandom(['rdbms-legacy', 'rdbms-default']),
   port: 3306,
   region: 'us-east',
   ssl_connection: false,

diff --git a/.../manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/.../manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
@@ -51,4 +51,30 @@ describe('DatabaseSettings Component', () => {
       expect(button).toBeEnabled();
     }
   });
+
+  it('Should render Maintenance Window with radio buttons', () => {
+    const database = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
+    const { getByRole, queryByText } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+    const radioInput = getByRole('radiogroup');
+    expect(radioInput).toHaveTextContent('Monthly');
+    expect(radioInput).toHaveTextContent('Weekly');
+    expect(queryByText('Maintenance Window')).toBeTruthy();
+  });
+
+  it('Should render Weekly Maintenance Window', () => {
+    const database = databaseFactory.build({
+      platform: 'rdbms-default',
+    });
+    const { queryByText } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    expect(queryByText('Monthly')).toBeNull();
+    expect(queryByText('Weekly')).toBeNull();
+    expect(queryByText('Set a Weekly Maintenance Window')).toBeTruthy();
+  });
 });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
@@ -28,11 +28,15 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
     </Typography>
   );
 
-  const resetRootPasswordCopy =
-    'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. ';
+  const isLegacy = database.platform === 'rdbms-legacy';
 
-  const deleteClusterCopy =
-    'Deleting a database cluster is permanent and cannot be undone.';
+  const resetRootPasswordCopy = isLegacy
+    ? 'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. '
+    : 'Reset your root password if someone should no longer have access to the root user or if you believe your password may have been compromised. This will automatically generate a new password that you’ll be able to see on your database cluster summary page.';
+
+  const deleteClusterCopy = isLegacy
+    ? 'Deleting a database cluster is permanent and cannot be undone.'
+    : 'Permanently remove an unused database cluster.';
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
   const [

diff --git a/...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -19,8 +19,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel';
 import { RadioGroup } from 'src/components/RadioGroup';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 
-// import { updateDatabaseSchema } from '@linode/validation/src/databases.schema';
-
 const useStyles = makeStyles()((theme: Theme) => ({
   formControlDropdown: {
     '& label': {
@@ -173,22 +171,30 @@ export const MaintenanceWindow = (props: Props) => {
     onSubmit: handleSaveMaintenanceWindow,
   });
 
+  const isLegacy = database.platform === 'rdbms-legacy';
+
+  const typographyDatabase =
+    'Select when you want the required OS and DB engine updates to take place. The maintenance may cause downtime on clusters with less than 3 nodes (non high-availability clusters).';
+
+  const typographyLegacyDatabase =
+    "OS and DB engine updates will be performed on the schedule below. Select the frequency, day, and time you'd prefer maintenance to occur.";
+
   return (
     <form onSubmit={handleSubmit}>
       <div className={classes.topSection}>
         <div className={classes.sectionTitleAndText}>
           <Typography className={classes.sectionTitle} variant="h3">
-            Maintenance Window
+            {isLegacy
+              ? 'Maintenance Window'
+              : 'Set a Weekly Maintenance Window'}
           </Typography>
           {maintenanceUpdateError ? (
             <Notice spacingTop={8} variant="error">
               {maintenanceUpdateError[0].reason}
             </Notice>
           ) : null}
           <Typography className={classes.sectionText}>
-            OS and DB engine updates will be performed on the schedule below.
-            Select the frequency, day, and time you&rsquo;d prefer maintenance
-            to occur.{' '}
+            {isLegacy ? typographyLegacyDatabase : typographyDatabase}
             {database.cluster_size !== 3
               ? 'For non-HA plans, expect downtime during this window.'
               : null}
@@ -261,7 +267,7 @@ export const MaintenanceWindow = (props: Props) => {
                 />
                 <TooltipIcon
                   sxTooltipIcon={{
-                    marginTop: '1.25rem',
+                    marginTop: '1.75rem',
                     padding: '0px 8px',
                   }}
                   text={
@@ -277,44 +283,46 @@ export const MaintenanceWindow = (props: Props) => {
               </div>
             </FormControl>
           </div>
-          <FormControl
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setFormTouched(true);
-              setFieldValue('frequency', e.target.value);
-              if (e.target.value === 'weekly') {
-                // If the frequency is weekly, set the 'week_of_month' field to null since that should only be specified for a monthly frequency.
-                setFieldValue('week_of_month', null);
-              }
+          {isLegacy && (
+            <FormControl
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setFormTouched(true);
+                setFieldValue('frequency', e.target.value);
+                if (e.target.value === 'weekly') {
+                  // If the frequency is weekly, set the 'week_of_month' field to null since that should only be specified for a monthly frequency.
+                  setFieldValue('week_of_month', null);
+                }
 
-              if (e.target.value === 'monthly') {
-                const dayOfWeek =
-                  daySelectionMap.find(
-                    (option) => option.value === values.day_of_week
-                  ) ?? daySelectionMap[0];
+                if (e.target.value === 'monthly') {
+                  const dayOfWeek =
+                    daySelectionMap.find(
+                      (option) => option.value === values.day_of_week
+                    ) ?? daySelectionMap[0];
 
-                weekSelectionModifier(dayOfWeek.label, weekSelectionMap);
-                setFieldValue(
-                  'week_of_month',
-                  modifiedWeekSelectionMap[0].value
-                );
-              }
-            }}
-            disabled={disabled}
-          >
-            <RadioGroup
-              style={{ marginBottom: 0, marginTop: 0 }}
-              value={values.frequency}
+                  weekSelectionModifier(dayOfWeek.label, weekSelectionMap);
+                  setFieldValue(
+                    'week_of_month',
+                    modifiedWeekSelectionMap[0].value
+                  );
+                }
+              }}
+              disabled={disabled}
             >
-              {maintenanceFrequencyMap.map((option) => (
-                <FormControlLabel
-                  control={<Radio />}
-                  key={option.value}
-                  label={option.key}
-                  value={option.value}
-                />
-              ))}
-            </RadioGroup>
-          </FormControl>
+              <RadioGroup
+                style={{ marginBottom: 0, marginTop: 0 }}
+                value={values.frequency}
+              >
+                {maintenanceFrequencyMap.map((option) => (
+                  <FormControlLabel
+                    control={<Radio />}
+                    key={option.value}
+                    label={option.key}
+                    value={option.value}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          )}
           <div>
             {values.frequency === 'monthly' ? (
               <FormControl

diff --git a/...rc/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/...rc/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
@@ -359,7 +359,12 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
         {database.hosts.secondary ? (
           <Box alignItems="center" display="flex" flexDirection="row">
             <Typography>
-              <span>private network host</span> = {database.hosts.secondary}
+              {database.platform === 'rdbms-default' ? (
+                <span>read-only host</span>
+              ) : (
+                <span>private network host</span>
+              )}
+              = {database.hosts.secondary}
             </Typography>
             <CopyTooltip
               className={classes.inlineCopyToolTip}

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -12,6 +12,7 @@ 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 DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo';
 import { useEditableLabelState } from 'src/hooks/useEditableLabelState';
 import { useFlags } from 'src/hooks/useFlags';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
@@ -199,6 +200,7 @@ export const DatabaseDetail = () => {
           </SafeTabPanel>
         </TabPanels>
       </Tabs>
+      {database.platform === 'rdbms-default' && <DatabaseLogo />}
     </>
   );
 };

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -1,4 +1,3 @@
-import { TableCell } from '@mui/material';
 import React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
@@ -60,8 +59,14 @@ const DatabaseLandingTable = ({
               Status
             </TableSortCell>
             {isNewDatabase && (
-              /* TODO add back TableSortCell once API is updated to support sort by Plan */
-              <TableCell>Plan</TableCell>
+              <TableSortCell
+                active={orderBy === 'plan'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="plan"
+              >
+                Plan
+              </TableSortCell>
             )}
             <Hidden smDown>
               <TableSortCell