Merge branch 'develop' into M3-8659-update-side-nav

linode · Oct 30, 2024 · de73435 · de73435
2 parents f74bad9 + fef87a9
commit de73435
Show file tree

Hide file tree

Showing 283 changed files with 1,190 additions and 2,012 deletions.
diff --git a/packages/manager/.changeset/pr-11058-tech-stories-1729621320539.md b/packages/manager/.changeset/pr-11058-tech-stories-1729621320539.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Consolidate ImageSelect components ([#11058](https://github.com/linode/manager/pull/11058))
diff --git a/packages/manager/.changeset/pr-11156-tech-stories-1729784052355.md b/packages/manager/.changeset/pr-11156-tech-stories-1729784052355.md
@@ -0,0 +1,5 @@
+---
+'@linode/manager': Tech Stories
+---
+
+Remove the feature flag and tracking events used for A/B testing in the API CLI Tools modal, and update the DX Tools modal button copy to 'View Code Snippets ([#11156](https://github.com/linode/manager/pull/11156))
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2024-10-29] - v1.131.1
+
+
+### Fixed:
+
+- Hostnames not showing on the Database details page ([#11182](https://github.com/linode/manager/pull/11182))
+
 ## [2024-10-28] - v1.131.0
 
 

diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
@@ -6,18 +6,12 @@ import { ui } from 'support/ui';
 
 import { randomLabel, randomString } from 'support/util/random';
 import { linodeCreatePage } from 'support/ui/pages';
-import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 
 describe('Create Linode flow to validate code snippet modal', () => {
   /*
    * tests for create Linode flow to validate code snippet modal.
    */
-  // TODO Delete these mocks once `testdxtoolabexperiment` feature flag is retired.
-  beforeEach(() => {
-    mockAppendFeatureFlags({
-      testdxtoolabexperiment: 'Create using command line',
-    });
-  });
+
   it(`view code snippets in create linode flow`, () => {
     const linodeLabel = randomLabel();
     const rootPass = randomString(32);
@@ -33,7 +27,7 @@ describe('Create Linode flow to validate code snippet modal', () => {
 
     // View Code Snippets and confirm it's provisioned as expected.
     ui.button
-      .findByTitle('Create using command line')
+      .findByTitle('View Code Snippets')
       .should('be.visible')
       .should('be.enabled')
       .click();

diff --git a/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
@@ -131,13 +131,13 @@ describe('rebuild linode', () => {
       openRebuildDialog(linode.label);
       findRebuildDialog(linode.label).within(() => {
         // "From Image" should be selected by default; no need to change the value.
-        ui.select.findByText('From Image').should('be.visible');
-
-        ui.select
-          .findByText('Choose an image')
+        ui.autocomplete
+          .findByLabel('From Image')
           .should('be.visible')
-          .click()
-          .type(`${image}{enter}`);
+          .should('have.value', 'From Image');
+
+        ui.autocomplete.findByLabel('Images').should('be.visible').click();
+        ui.autocompletePopper.findByTitle(image).should('be.visible').click();
 
         // Type to confirm.
         cy.findByLabelText('Linode Label').type(linode.label);
@@ -186,10 +186,9 @@ describe('rebuild linode', () => {
 
       openRebuildDialog(linode.label);
       findRebuildDialog(linode.label).within(() => {
-        ui.select.findByText('From Image').click();
-
-        ui.select
-          .findItemByText('From Community StackScript')
+        ui.autocomplete.findByLabel('From Image').should('be.visible').click();
+        ui.autocompletePopper
+          .findByTitle('From Community StackScript')
           .should('be.visible')
           .click();
 
@@ -203,13 +202,8 @@ describe('rebuild linode', () => {
           cy.get(`[id="${stackScriptId}"][type="radio"]`).click();
         });
 
-        ui.select
-          .findByText('Choose an image')
-          .scrollIntoView()
-          .should('be.visible')
-          .click();
-
-        ui.select.findItemByText(image).should('be.visible').click();
+        ui.autocomplete.findByLabel('Images').should('be.visible').click();
+        ui.autocompletePopper.findByTitle(image).should('be.visible').click();
 
         cy.findByLabelText('Linode Label')
           .should('be.visible')
@@ -229,7 +223,7 @@ describe('rebuild linode', () => {
    */
   it('rebuilds a linode from Account StackScript', () => {
     cy.tag('method:e2e');
-    const image = 'Alpine';
+    const image = 'Alpine 3.18';
     const region = 'us-east';
 
     // Create a StackScript to rebuild a Linode.
@@ -265,10 +259,9 @@ describe('rebuild linode', () => {
 
       openRebuildDialog(linode.label);
       findRebuildDialog(linode.label).within(() => {
-        ui.select.findByText('From Image').should('be.visible').click();
-
-        ui.select
-          .findItemByText('From Account StackScript')
+        ui.autocomplete.findByLabel('From Image').should('be.visible').click();
+        ui.autocompletePopper
+          .findByTitle('From Account StackScript')
           .should('be.visible')
           .click();
 
@@ -280,13 +273,8 @@ describe('rebuild linode', () => {
           cy.get(`[id="${stackScript.id}"][type="radio"]`).click();
         });
 
-        ui.select
-          .findByText('Choose an image')
-          .scrollIntoView()
-          .should('be.visible')
-          .click();
-
-        ui.select.findItemByText(image).should('be.visible').click();
+        ui.autocomplete.findByLabel('Images').should('be.visible').click();
+        ui.autocompletePopper.findByTitle(image).should('be.visible').click();
 
         cy.findByLabelText('Linode Label')
           .should('be.visible')
@@ -319,14 +307,13 @@ describe('rebuild linode', () => {
 
     cy.visitWithLogin(`/linodes/${mockLinode.id}?rebuild=true`);
     findRebuildDialog(mockLinode.label).within(() => {
-      ui.select.findByText('From Image').should('be.visible');
-      ui.select
-        .findByText('Choose an image')
+      ui.autocomplete.findByLabel('From Image').should('be.visible');
+      ui.autocomplete
+        .findByLabel('Images')
         .should('be.visible')
         .click()
-        .type(`${image}`);
-
-      ui.select.findItemByText(image).should('be.visible').click();
+        .type(image);
+      ui.autocompletePopper.findByTitle(image).should('be.visible').click();
 
       assertPasswordComplexity(rootPassword, 'Good');
 

diff --git a/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts
@@ -20,7 +20,7 @@ import { cleanUp } from 'support/util/cleanup';
 import { createTestLinode } from 'support/util/linodes';
 import { interceptGetAllImages } from 'support/intercepts/images';
 import type { Image } from '@linode/api-v4';
-import { getFilteredImagesForImageSelect } from 'src/components/ImageSelectv2/utilities';
+import { getFilteredImagesForImageSelect } from 'src/components/ImageSelect/utilities';
 
 // StackScript fixture paths.
 const stackscriptBasicPath = 'stackscripts/stackscript-basic.sh';
@@ -80,9 +80,9 @@ const fillOutStackscriptForm = (
       .type(description);
   }
 
-  cy.findByText('Target Images').click().type(`${targetImage}`);
-
-  cy.findByText(`${targetImage}`).should('be.visible').click();
+  ui.autocomplete.findByLabel('Target Images').should('be.visible').click();
+  ui.autocompletePopper.findByTitle(targetImage).should('be.visible').click();
+  ui.autocomplete.findByLabel('Target Images').click(); // Close autocomplete popper
 
   // Insert a script.
   inputStackScript(script);

diff --git a/packages/manager/cypress/e2e/core/stackscripts/update-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/update-stackscripts.spec.ts
@@ -55,9 +55,9 @@ const fillOutStackscriptForm = (
       .type(description);
   }
 
-  cy.findByText('Target Images').click().type(targetImage);
-
-  cy.findByText(targetImage).should('be.visible').click();
+  ui.autocomplete.findByLabel('Target Images').should('be.visible').click();
+  ui.autocompletePopper.findByTitle(targetImage).should('be.visible').click();
+  ui.autocomplete.findByLabel('Target Images').click(); // Close autocomplete popper
 
   // Insert a script with invalid UDF data.
   cy.get('[data-qa-textfield-label="Script"]')

diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.131.0",
+  "version": "1.131.1",
   "private": true,
   "type": "module",
   "bugs": {

diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
@@ -1,11 +1,11 @@
+import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';

diff --git a/packages/manager/src/Root.tsx b/packages/manager/src/Root.tsx
@@ -1,9 +1,9 @@
+import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Outlet } from '@tanstack/react-router';
 import React from 'react';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';

diff --git a/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx b/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx
@@ -1,12 +1,11 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useStyles } from 'tss-react/mui';
 
 import { Button } from 'src/components/Button/Button';
 
-import { Box } from '../Box';
-
-import type { BoxProps } from '../Box';
+import type { BoxProps } from '@linode/ui';
 import type { ButtonProps } from 'src/components/Button/Button';
 
 interface ActionButtonsProps extends ButtonProps {

diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts
@@ -1,10 +1,10 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import Warning from 'src/assets/icons/warning.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { omittedProps } from 'src/utilities/omittedProps';
 
-import { Box } from '../Box';
 import { Stack } from '../Stack';
 
 export const StyledAkamaiLogo = styled(AkamaiLogo, {

diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@linode/ui';
 import { useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 
@@ -6,7 +7,6 @@ import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks';
 
-import { Box } from '../Box';
 import { Stack } from '../Stack';
 import {
   StyledAkamaiLogo,

diff --git a/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx b/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx
@@ -1,8 +1,7 @@
+import { Box } from '@linode/ui';
 import { visuallyHidden } from '@mui/utils';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
-
 import { getAccessibleTimestamp } from './utils';
 
 export interface AccessibleAreaChartProps {

diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@linode/ui';
 import { Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
@@ -14,7 +15,6 @@ import {
 } from 'recharts';
 
 import { AccessibleAreaChart } from 'src/components/AreaChart/AccessibleAreaChart';
-import { Box } from 'src/components/Box';
 import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay';
 import { Paper } from 'src/components/Paper';
 import { StyledBottomLegend } from 'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel';

diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -1,10 +1,9 @@
-import { InputAdornment } from '@linode/ui';
+import { Box, InputAdornment } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import MuiAutocomplete from '@mui/material/Autocomplete';
 import React from 'react';
 
-import { Box } from 'src/components/Box';
 import { TextField } from 'src/components/TextField';
 
 import { CircleProgress } from '../CircleProgress';

diff --git a/packages/manager/src/components/AvatarForProxy.tsx b/packages/manager/src/components/AvatarForProxy.tsx
@@ -1,8 +1,8 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import ProxyUserIcon from 'src/assets/icons/parent-child.svg';
-import { Box } from 'src/components/Box';
 
 interface Props {
   height?: number;

diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.tsx b/packages/manager/src/components/CircleProgress/CircleProgress.tsx
@@ -1,8 +1,8 @@
+import { Box } from '@linode/ui';
 import _CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { CircularProgressProps } from '@mui/material/CircularProgress';

diff --git a/packages/manager/src/components/CodeBlock/CodeBlock.tsx b/packages/manager/src/components/CodeBlock/CodeBlock.tsx
@@ -1,8 +1,5 @@
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import {
@@ -22,32 +19,13 @@ export interface CodeBlockProps {
   handleCopyIconClick?: () => void;
   /** The command language */
   language: SupportedLanguage;
-  ldTrackingKey?: string;
 }
 
 export const CodeBlock = (props: CodeBlockProps) => {
-  const flags = useFlags();
-  const ldClient = useLDClient();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
-
-  const {
-    command,
-    commandType,
-    handleCopyIconClick,
-    language,
-    ldTrackingKey,
-  } = props;
-
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+  const { command, commandType, handleCopyIconClick, language } = props;
 
   const _handleCopyIconClick = () => {
     sendApiAwarenessClickEvent('Copy Icon', commandType);
-    if (ldTrackingKey && !isInternalAccount) {
-      ldClient?.track(ldTrackingKey, {
-        variation: apicliButtonCopy,
-      });
-      ldClient?.flush();
-    }
   };
 
   return (

diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { TextField } from 'src/components/TextField';
 

diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.tsx b/packages/manager/src/components/DescriptionList/DescriptionList.tsx
@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';