linode · abailly-akamai · Jul 10, 2023 · Jul 10, 2023
@@ -1,3 +1,16 @@
+## [2023-07-11] - v0.96.0
+
+
+### Added:
+
+- Endpoints for VPC ([#9361](https://github.com/linode/manager/pull/9361))
+- Endpoints for the Akamai Global Load Balancer ([#9363](https://github.com/linode/manager/pull/9363))
+
+### Changed:
+
+- Use 'canceled' instead of 'cancelled' for EntityTransferStatus ([#9335](https://github.com/linode/manager/pull/9335))
+
+
 ## [2023-06-27] - v0.95.1
 
 

@@ -1,6 +1,6 @@
 {
   "name": "@linode/api-v4",
-  "version": "0.95.1",
+  "version": "0.96.0",
   "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4",
   "bugs": {
     "url": "https://github.com/linode/manager/issues"

@@ -4,6 +4,64 @@ 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/).
 
+## [2023-07-11] - v1.97.0
+
+
+### Added:
+
+- Light/dark mode keyboard shortcut copy on "My Settings" page ([#9286](https://github.com/linode/manager/pull/9286))
+- Visual outline to some country flags ([#9288](https://github.com/linode/manager/pull/9288))
+- Helper text for the Add SSH Key Drawer form ([#9290](https://github.com/linode/manager/pull/9290))
+- Improved warning and error messaging for failed backup events ([#9364](https://github.com/linode/manager/pull/9364))
+
+### Changed:
+
+- Update Metadata copy ([#9374](https://github.com/linode/manager/pull/9374))
+
+### Fixed:
+
+- Notification menu crashing older Safari versions ([#9360](https://github.com/linode/manager/pull/9360))
+- Confirmation modal overflow on mobile ([#9289](https://github.com/linode/manager/pull/9289))
+- Layout issue with Create Access Key Drawer for Object Storage ([#9296](https://github.com/linode/manager/pull/9296))
+- LinodeSelectV2 label association ([#9298](https://github.com/linode/manager/pull/9298))
+- Missing icons in DBaaS engine selection field ([#9306](https://github.com/linode/manager/pull/9306))
+- Disable delete button for public IP addresses if it's the only IP address ([#9332](https://github.com/linode/manager/pull/9332))
+- Action Menu tooltip icon color deprecation ([#9352](https://github.com/linode/manager/pull/9352))
+- Multiple requests for logo when loading billing invoice PDFs ([#9355](https://github.com/linode/manager/pull/9355))
+- Updated wording from “Linode” to “Cloud Manager” ([#9358](https://github.com/linode/manager/pull/9358))
+- Volume empty state misspelling of NVMe ([#9366](https://github.com/linode/manager/pull/9366))
+
+### Tech Stories:
+
+- React Query methods for VPC ([#9361](https://github.com/linode/manager/pull/9361))
+- Made yarn up:expose actually expose Cloud Manager on all interfaces ([#9297](https://github.com/linode/manager/pull/9297))
+- MUI v5 Migration - `Components > InlineMenuAction` ([#9268](https://github.com/linode/manager/pull/9268))
+- MUI v5 Migration - `Components > LandingLoading` ([#9282](https://github.com/linode/manager/pull/9282))
+- Upgrade LaunchDarkly client library ([#9285](https://github.com/linode/manager/pull/9285))
+- MUI v5 Migration - `Components > LongviewLineGraph` ([#9291](https://github.com/linode/manager/pull/9291))
+- MUI v5 Migration - `Components > SingleTextFieldForm` ([#9292](https://github.com/linode/manager/pull/9292))
+- MUI v5 Migration - `Components > SelectableTableRow` ([#9299](https://github.com/linode/manager/pull/9299))
+- MUI v5 Migration - `Components > Chip` ([#9310](https://github.com/linode/manager/pull/9310))
+- MUI v5 Migration - `Components > Toolbar` ([#9319](https://github.com/linode/manager/pull/9319))
+- MUI v5 Migration - `Components > Accordion` (part 2) ([#9320](https://github.com/linode/manager/pull/9320))
+- MUI v5 Migration - `Components > AppBar` ([#9321](https://github.com/linode/manager/pull/9321))
+- MUI v5 Migration - `Components > Box` ([#9322](https://github.com/linode/manager/pull/9322))
+- MUI v5 Migration - `Components > CopyTooltip` ([#9323](https://github.com/linode/manager/pull/9323))
+- MUI v5 Migration - `Components > Button` ([#9325](https://github.com/linode/manager/pull/9325))
+- MUI v5 Migration - `Components > Hidden` ([#9326](https://github.com/linode/manager/pull/9326))
+- MUI v5 Migration - `Components > SelectionCard` ([#9327](https://github.com/linode/manager/pull/9327))
+- MUI v5 Migration - `Components > Typography` ([#9328](https://github.com/linode/manager/pull/9328))
+- MUI v5 Migration - `Components > Checkbox` (part 2) ([#9338](https://github.com/linode/manager/pull/9338))
+- MUI v5 Migration - `Components > Chip` ([#9339](https://github.com/linode/manager/pull/9339))
+- MUI v5 Migration - `Components > Snackbar` ([#9359](https://github.com/linode/manager/pull/9359))
+- MUI v5 Migration - `Components > Tooltip` ([#9369](https://github.com/linode/manager/pull/9369))
+- MUI v5 Migration - `Components > MenuItem` ([#9295](https://github.com/linode/manager/pull/9295))
+- MUI v5 Migration - `Components > Divider` ([#9353](https://github.com/linode/manager/pull/9353))
+- Remove old changelog scripting ([#9340](https://github.com/linode/manager/pull/9340))
+- Remove `withLoadingAndError` and clean up 2FA components ([#9318](https://github.com/linode/manager/pull/9318))
+- Link component: remove default export and improved Storybook story ([#9313](https://github.com/linode/manager/pull/9313))
+- Refactor components to use TypeToConfirmDialog ([#9175](https://github.com/linode/manager/pull/9175))
+
 ## [2023-06-29] - v1.96.2
 
 ### Fixed:

@@ -34,6 +34,7 @@ describe('username', () => {
         .type(newUsername);
 
       cy.get('[data-qa-textfield-label="Username"]')
+        .parent()
         .parent()
         .parent()
         .within(() => {

@@ -26,7 +26,7 @@ const getSecurityQuestionsSection = (): Cypress.Chainable => {
  * @returns Cypress chainable.
  */
 const getSecurityQuestion = (questionNumber: number): Cypress.Chainable => {
-  return cy.contains('label', `Question ${questionNumber}`).parent();
+  return cy.contains('label', `Question ${questionNumber}`).parent().parent();
 };
 
 /**
@@ -39,7 +39,7 @@ const getSecurityQuestion = (questionNumber: number): Cypress.Chainable => {
 const getSecurityQuestionAnswer = (
   questionNumber: number
 ): Cypress.Chainable => {
-  return cy.contains('label', `Answer ${questionNumber}`).parent();
+  return cy.contains('label', `Answer ${questionNumber}`).parent().parent();
 };
 
 /**

@@ -60,11 +60,7 @@ describe('LKE Create Cluster', () => {
     mockCreateCluster(mockCluster).as('createCluster');
     cy.visitWithLogin('/kubernetes/create');
     cy.findByText('Add Node Pools').should('be.visible');
-    cy.contains('Cluster Label')
-      .next()
-      .children()
-      .click()
-      .type(mockCluster.label);
+    cy.findByLabelText('Cluster Label').click().type(mockCluster.label);
     cy.findByLabelText('Region')
       .should('be.visible')
       .focus()

@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.96.2",
+  "version": "1.97.0",
   "private": true,
   "bugs": {
     "url": "https://github.com/Linode/manager/issues"

@@ -216,7 +216,7 @@ const Select = <
       filterOption={filterOption}
       isMulti={isMulti}
       classes={classes}
-      className={classNames(className, classes.root)}
+      className={classNames(classes.root, className)}
       classNamePrefix="react-select"
       inputId={
         inputId

@@ -1,19 +1,20 @@
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import Box from '@mui/material/Box';
+import { Theme } from '@mui/material/styles';
+import {
+  default as _TextField,
+  StandardTextFieldProps,
+} from '@mui/material/TextField';
 import { clamp } from 'ramda';
 import * as React from 'react';
 import { CircleProgress } from 'src/components/CircleProgress';
 import FormHelperText from 'src/components/core/FormHelperText';
 import InputAdornment from 'src/components/core/InputAdornment';
 import InputLabel from 'src/components/core/InputLabel';
-import { makeStyles } from 'tss-react/mui';
-import { Theme } from '@mui/material/styles';
-import {
-  default as _TextField,
-  StandardTextFieldProps,
-} from '@mui/material/TextField';
 import { TooltipProps as _TooltipProps } from 'src/components/Tooltip';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
+import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   helpWrapper: {
@@ -142,7 +143,11 @@ interface BaseProps {
 
 type Value = string | number | undefined | null;
 
-interface ToolTipProps {
+interface LabelToolTipProps {
+  labelTooltipText?: string | JSX.Element;
+}
+
+interface InputToolTipProps {
   tooltipPosition?: _TooltipProps['placement'];
   tooltipText?: string | JSX.Element;
   tooltipInteractive?: boolean;
@@ -155,7 +160,10 @@ interface TextFieldPropsOverrides extends StandardTextFieldProps {
   label: string;
 }
 
-export type TextFieldProps = BaseProps & TextFieldPropsOverrides & ToolTipProps;
+export type TextFieldProps = BaseProps &
+  TextFieldPropsOverrides &
+  LabelToolTipProps &
+  InputToolTipProps;
 
 export const TextField = (props: TextFieldProps) => {
   const { classes, cx } = useStyles();
@@ -178,6 +186,7 @@ export const TextField = (props: TextFieldProps) => {
     inputProps,
     InputProps,
     label,
+    labelTooltipText,
     loading,
     max,
     min,
@@ -273,22 +282,33 @@ export const TextField = (props: TextFieldProps) => {
         [errorScrollClassName]: !!errorText,
       })}
     >
-      <InputLabel
-        data-qa-textfield-label={label}
-        className={cx({
-          [classes.wrapper]: noMarginTop ? false : true,
-          [classes.noTransform]: true,
-          'visually-hidden': hideLabel,
-        })}
-        htmlFor={validInputId}
-      >
-        {label}
-        {required ? (
-          <span className={classes.label}> (required)</span>
-        ) : optional ? (
-          <span className={classes.label}> (optional)</span>
-        ) : null}
-      </InputLabel>
+      <Box display="flex">
+        <InputLabel
+          data-qa-textfield-label={label}
+          className={cx({
+            [classes.wrapper]: noMarginTop ? false : true,
+            [classes.noTransform]: true,
+            'visually-hidden': hideLabel,
+          })}
+          htmlFor={validInputId}
+        >
+          {label}
+          {required ? (
+            <span className={classes.label}> (required)</span>
+          ) : optional ? (
+            <span className={classes.label}> (optional)</span>
+          ) : null}
+        </InputLabel>
+        {labelTooltipText && (
+          <TooltipIcon
+            text={labelTooltipText}
+            status="help"
+            sxTooltipIcon={{
+              padding: '8px 0px 0px 8px',
+            }}
+          />
+        )}
+      </Box>
 
       {helperText && helperTextPosition === 'top' && (
         <FormHelperText

@@ -1,19 +1,20 @@
 import { Disk, getLinodeDisks } from '@linode/api-v4/lib/linodes';
 import { APIError } from '@linode/api-v4/lib/types';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+
 import { useSnackbar } from 'notistack';
 import { equals } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
+import { makeStyles } from '@mui/styles';
+import { Theme } from '@mui/material/styles';
+import { Typography } from 'src/components/Typography';
 import Drawer from 'src/components/Drawer';
 import { ErrorBoundary } from 'src/components/ErrorBoundary';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
-import { Typography } from 'src/components/Typography';
 import { IMAGE_DEFAULT_LIMIT } from 'src/constants';
 import { resetEventsPolling } from 'src/eventsPolling';
 import DiskSelect from 'src/features/Linodes/DiskSelect';
@@ -317,7 +318,7 @@ export const ImagesDrawer = (props: CombinedProps) => {
         ) : null}
         {generalError && <Notice error text={generalError} data-qa-notice />}
 
-        {notice && <Notice success text={notice} data-qa-notice />}
+        {notice && <Notice info text={notice} data-qa-notice />}
 
         {['create', 'restore'].includes(mode) && (
           <LinodeSelect

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Box } from 'src/components/Box';
 import { Accordion } from 'src/components/Accordion';
+import { Box } from 'src/components/Box';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { UserDataAccordionHeading } from './UserDataAccordionHeading';
-import { useExpandIconStyles } from './UserDataAccordion.styles';
 import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
+import { useExpandIconStyles } from './UserDataAccordion.styles';
+import { UserDataAccordionHeading } from './UserDataAccordionHeading';
 
 interface Props {
   createType?: CreateTypes;
@@ -58,36 +58,38 @@ export const UserDataAccordion = (props: Props) => {
 
   return (
     <Accordion
+      detailProps={{ sx: sxDetails }}
+      expandIconClassNames={fromBackupOrFromLinode ? expandIconStyles : ''}
       heading={<UserDataAccordionHeading createType={createType} />}
-      style={{
-        marginTop: renderNotice && renderCheckbox ? 0 : 24,
-      }} // for now, these props can be taken as an indicator we're in the Rebuild flow.
       headingProps={{
         variant: 'h2',
       }}
+      style={{
+        marginTop: renderNotice && renderCheckbox ? 0 : 24,
+      }} // for now, these props can be taken as an indicator we're in the Rebuild flow.
       summaryProps={{
         sx: {
           padding: '5px 24px 0px 24px',
           alignItems: fromBackupOrFromLinode ? 'flex-start' : 'center',
         },
       }}
-      detailProps={{ sx: sxDetails }}
       sx={{
         '&:before': {
           display: 'none',
         },
       }}
-      expandIconClassNames={fromBackupOrFromLinode ? expandIconStyles : ''}
     >
       {renderNotice ? (
         <Box marginBottom="16px" data-testid="render-notice">
           {renderNotice}
         </Box>
       ) : null}
-      <Typography sx={{ marginBottom: 3 }}>
-        User data is a virtual machine&rsquo;s cloud-init metadata relating to a
-        user&rsquo;s local account, including username and user group(s). <br />
-        User data must be added before the Linode provisions.{' '}
+      <Typography sx={{ marginBottom: 1 }}>
+        User data is a feature of the Metadata service that enables you to
+        perform system configuration tasks (such as adding users and installing
+        software) by providing custom instructions or scripts to cloud-init. Any
+        user data should be added at this step and cannot be modified after the
+        the Linode has been created.{' '}
         <Link to="https://www.linode.com/docs/products/compute/compute-instances/guides/metadata/">
           Learn more.
         </Link>{' '}
@@ -98,19 +100,20 @@ export const UserDataAccordion = (props: Props) => {
         </Notice>
       ) : null}
       <TextField
+        disabled={Boolean(disabled)}
+        expand
         label="User Data"
+        labelTooltipText="Compatible formats include cloud-config data and executable scripts."
         multiline
-        rows={1}
-        expand
+        onBlur={(e) =>
+          checkFormat({ userData: e.target.value, hasInputValueChanged: false })
+        }
         onChange={(e) => {
           checkFormat({ userData: e.target.value, hasInputValueChanged: true });
           onChange(e.target.value);
         }}
+        rows={1}
         value={userData}
-        disabled={Boolean(disabled)}
-        onBlur={(e) =>
-          checkFormat({ userData: e.target.value, hasInputValueChanged: false })
-        }
         data-qa-user-data-input
       />
       {renderCheckbox ?? null}