Merge pull request #11006 from linode/release-v1.129.0

Release v1.129.0 - release → staging

.gitignore

@@ -127,12 +127,7 @@ packages/manager/test-report.xml
 **/manager/cypress/videos/
 **/manager/cypress/downloads/
 **/manager/cypress/results/
-
-# ignore all screenshots except records
-# we ignore the png files, not the whole folder recursively
-# or the record files are ignored too
-**/manager/cypress/screenshots/**/*.png
-!**/manager/cypress/screenshots/**/record*.png
+**/manager/cypress/screenshots/
 
 packages/manager/cypress/fixtures/example.json
 
@@ -142,4 +137,4 @@ packages/manager/bundle_analyzer_report.html
 **/manager/src/dev-tools/*.local.*
 
 # vitepress
-docs/.vitepress/cache
+docs/.vitepress/cache

.husky/pre-commit

@@ -0,0 +1 @@
+yarn workspaces run precommit

docs/development-guide/05-fetching-data.md

@@ -253,7 +253,7 @@ Note: the legacy `scrollErrorIntoView` is deprecated in favor of `scrollErrorInt
 
 Since Cloud Manager uses different ways of handling forms and validation, the `scrollErrorIntoViewV2` util should be implemented using the following patterns to ensure consistency.
 
-##### Formik
+##### Formik (deprecated)
 ```Typescript
 import * as React from 'react';
 

docs/development-guide/09-mocking-data.md

@@ -41,6 +41,8 @@ const linodeList = linodeFactory.buildList(10, { region: "eu-west" });
 // [{ id: 3, label: 'linode-3', region: 'eu-west' }, ...9 more ]
 ```
 
+Because our factories are used by our dev tools, unit tests, and end-to-end tests, we should avoid creating factories with random or unpredictable default values (e.g. by using utilities like `pickRandom` to assign property values).
+
 ### Intercepting Requests
 
 The [Mock Service Worker](https://mswjs.io/) package intercepts requests at the network level and returns the response you defined in the relevant factory.

docs/development-guide/15-composition.md

@@ -0,0 +1,54 @@
+# Composition
+
+## Page Composition
+Composing pages in Cloud Manager is a multi-step process that involves several components and patterns. It usually involves using a combination of components already available to the developer, and organized according to the desired layout.
+
+It is best to avoid one off components for pages, or an excessive amount of custom CSS. It is likely that a component already exists to handle the desired layout or styling. It is often a good idea to spend some time looking through the codebase, at [storybook](https://design.linode.com/) or an existing feature of Cloud Manager before making certain composition decisions. It is also important to compose with markup semanticity in mind, and keep an eye on the render tree to avoid bloating the layout with unnecessary containers, wrappers etc, as well as ensuring that the page is accessible, performant, and has good test coverage. When in doubt, one can also check with the product or UX team to ensure that a component exists for the desired layout or styling.
+
+### Responsive Design
+
+While Cloud Manager layout and components are responsive out of the box, some extra handling may be needed for pages that have unique responsive requirements, or because the features has a more complex layout.
+A wide array of tools are available to help with responsive design, including media queries, CSS Grid & Flexbox, as well as the `<Hidden />` component, which can be used to hide elements at specific breakpoints.
+
+Some designs may not feature a mobile layout, and for those cases it is recommended to gather existing examples from the codebase, or from other pages that have a similar layout.
+
+## Form Composition
+
+### Formik
+Formik is now deprecated. Please use react-hook-form.
+
+### React Hook Form
+The preferred library for building forms in Cloud Manager is [react-hook-form](https://react-hook-form.com/). It is a complete set of tools for building complex forms, and is well documented.
+The general way to get started is to use the `useForm` hook, which returns a form context and a set of methods to interact with the form.
+
+```Typescript
+const methods = useForm<LinodeCreateFormValues>({
+  defaultValues,
+  mode: 'onBlur',
+  resolver: myResolvers,
+  // other methods
+});
+```
+
+`methods` is an object that contains the form context and a set of methods to interact with the form.
+It is passed to the `FormProvider` component, which is a wrapper that provides the form context to the form.
+
+```Typescript
+<FormProvider {...methods}>
+  <form onSubmit={methods.handleSubmit(onSubmit)}>
+    {/* form fields */}
+    <button type="submit">Submit</button>
+  </form>
+</FormProvider>
+```
+
+It is important to note that react-hook-form does not provide any UI components. It is the responsibility of the developer to provide the form fields and validation, as well as employing semantic markup for accessibility purposes.
+ex: a `<form>` element should have a corresponding `<button type="submit">` element to submit the form so that it is obvious to assistive technologies that the form can be submitted via keyboard.
+
+It is also important to remember to manage the form state through comprehensive context in order to avoid unnecessary rerenders.
+
+The Linode Create Page is a good example of a complex form that is built using react-hook-form, using the best practices mentioned above.
+
+### Uncontrolled Forms
+Uncontrolled forms are a type of form that does not have a state for its values. It is often used for simple forms that do not need to be controlled, such as forms with a single input field or call to action.
+

package.json

@@ -3,14 +3,9 @@
   "private": true,
   "license": "Apache-2.0",
   "devDependencies": {
-    "husky": "^3.0.1",
+    "husky": "^9.1.6",
     "typescript": "^5.5.4"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn workspaces run precommit"
-    }
-  },
   "scripts": {
     "lint": "yarn run eslint . --quiet --ext .js,.ts,.tsx",
     "cost-of-modules": "yarn global add cost-of-modules && cost-of-modules --less --no-install --include-dev",
@@ -44,7 +39,8 @@
     "coverage:summary": "yarn workspace linode-manager coverage:summary",
     "junit:summary": "ts-node scripts/junit-summary/index.ts",
     "generate-tod": "ts-node scripts/tod-payload/index.ts",
-    "docs": "bunx vitepress@1.0.0-rc.44 dev docs"
+    "docs": "bunx vitepress@1.0.0-rc.44 dev docs",
+    "prepare": "husky"
   },
   "resolutions": {
     "braces": "^3.0.3",

packages/api-v4/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [2024-09-30] - v0.127.0
+
+
+### Changed:
+
+- Make `replication_type` and `replication_commit_type` optional in MySQL and Postgres interfaces ([#10980](https://github.com/linode/manager/pull/10980))
+- DBaaS restore method name ([#10988](https://github.com/linode/manager/pull/10988))
+
+### Fixed:
+
+- Include `standby` field in `DatabaseHosts` interface ([#10989](https://github.com/linode/manager/pull/10989))
+
+### Upcoming Features:
+
+- DBaaS V2 readonly hosts ([#10939](https://github.com/linode/manager/pull/10939))
+
 ## [2024-09-16] - v0.126.0
 
 

packages/api-v4/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linode/api-v4",
-  "version": "0.126.0",
+  "version": "0.127.0",
   "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4",
   "bugs": {
     "url": "https://github.com/linode/manager/issues"
@@ -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}": [

packages/api-v4/src/account/types.ts

@@ -72,7 +72,7 @@ export type AccountCapability =
   | 'LKE HA Control Planes'
   | 'Machine Images'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'NodeBalancers'
   | 'Object Storage Access Key Regions'
   | 'Object Storage Endpoint Types'

packages/api-v4/src/databases/databases.ts

@@ -223,11 +223,11 @@ export const getDatabaseBackup = (
   );
 
 /**
- * restoreWithBackup
+ * legacyRestoreWithBackup
  *
  * Fully restore a backup to the cluster
  */
-export const restoreWithBackup = (
+export const legacyRestoreWithBackup = (
   engine: Engine,
   databaseID: number,
   backupID: number
@@ -243,6 +243,24 @@ export const restoreWithBackup = (
     setMethod('POST')
   );
 
+/**
+ * restoreWithBackup for the New Database
+ *
+ * Fully restore a backup to the cluster
+ */
+export const restoreWithBackup = (
+  engine: Engine,
+  fork: {
+    source: number;
+    restore_time?: string;
+  }
+) =>
+  Request<{}>(
+    setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/instances`),
+    setMethod('POST'),
+    setData({ fork })
+  );
+
 /**
  * getDatabaseCredentials
  *

packages/api-v4/src/databases/types.ts

@@ -54,7 +54,8 @@ export interface DatabaseCredentials {
 
 interface DatabaseHosts {
   primary: string;
-  secondary: string;
+  secondary?: string;
+  standby?: string;
 }
 
 export interface SSLFields {
@@ -151,10 +152,12 @@ export interface BaseDatabase {
    * A key/value object where the key is an IP address and the value is a member type.
    */
   members: Record<string, MemberType>;
+  platform?: string;
+  oldest_restore_time?: string;
 }
 
 export interface MySQLDatabase extends BaseDatabase {
-  replication_type: MySQLReplicationType;
+  replication_type?: MySQLReplicationType;
 }
 
 export type PostgresReplicationType = 'none' | 'synch' | 'asynch';
@@ -167,8 +170,8 @@ type ReplicationCommitTypes =
   | 'off';
 
 export interface PostgresDatabase extends BaseDatabase {
-  replication_type: PostgresReplicationType;
-  replication_commit_type: ReplicationCommitTypes;
+  replication_type?: PostgresReplicationType;
+  replication_commit_type?: ReplicationCommitTypes;
 }
 
 type MongoStorageEngine = 'wiredtiger' | 'mmapv1';

packages/api-v4/src/regions/types.ts

@@ -13,7 +13,6 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases V2'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'

packages/manager/.changeset/pr-11010-fixed-1727359551617.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Include platform header in DBaaS types call ([#11010](https://github.com/linode/manager/pull/11010))

packages/manager/.eslintrc.cjs

@@ -113,9 +113,10 @@ module.exports = {
     '@linode/eslint-plugin-cloud-manager',
   ],
   rules: {
+    '@linode/cloud-manager/deprecate-formik': 'warn',
     '@linode/cloud-manager/no-custom-fontWeight': 'error',
     '@typescript-eslint/camelcase': 'off',
-    "@typescript-eslint/consistent-type-imports": "warn",
+    '@typescript-eslint/consistent-type-imports': 'warn',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',

packages/manager/.storybook/main.ts

@@ -17,6 +17,7 @@ const config: StorybookConfig = {
     '@storybook/addon-actions',
     'storybook-dark-mode',
     '@storybook/addon-storysource',
+    '@storybook/addon-a11y',
   ],
   staticDirs: ['../public'],
   framework: {

packages/manager/CHANGELOG.md

@@ -4,6 +4,83 @@ 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-09-30] - v1.129.0
+
+
+### Added:
+
+- GPUv2 Plan Selection Egress Banner ([#10956](https://github.com/linode/manager/pull/10956))
+
+### Changed:
+
+- Move Region section above Images in Linode Create and update default OS to Ubuntu 24.04 LTS ([#10858](https://github.com/linode/manager/pull/10858))
+- VPC Assign Linodes table header ([#10940](https://github.com/linode/manager/pull/10940))
+- Copy updates in Create with CLI modal ([#10954](https://github.com/linode/manager/pull/10954))
+- Better 'Backups Enabled' default when cloning Linode ([#10959](https://github.com/linode/manager/pull/10959))
+- Disable 'Save' button in Change Avatar Color dialog until color is changed ([#10963](https://github.com/linode/manager/pull/10963))
+- Limits: surface new API errors in Linode and LKE flows ([#10969](https://github.com/linode/manager/pull/10969))
+- Update Images empty state as part of Image Service Gen2 ([#10985](https://github.com/linode/manager/pull/10985))
+- Update Image Upload dropzone copy as part of Image Service Gen2 ([#10986](https://github.com/linode/manager/pull/10986))
+
+### Fixed:
+
+- Missing radio button labels for User Permissions ([#10908](https://github.com/linode/manager/pull/10908))
+- Scrollbar showing briefly on Splash Screen ([#10922](https://github.com/linode/manager/pull/10922))
+- Misaligned DNS banner text ([#10924](https://github.com/linode/manager/pull/10924))
+- Objects Table Refreshing Logic Fixed ([#10927](https://github.com/linode/manager/pull/10927))
+- Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931))
+- Textarea tooltip icon focus area ([#10938](https://github.com/linode/manager/pull/10938))
+- Flickering on the user profile page when updating the currently signed in user's username ([#10947](https://github.com/linode/manager/pull/10947))
+- Linode IPv6 Range rDNS typo ([#10948](https://github.com/linode/manager/pull/10948))
+- Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog ([#10962](https://github.com/linode/manager/pull/10962))
+- Incorrect URL slug for Apache Spark Cluster Marketplace documentation ([#10965](https://github.com/linode/manager/pull/10965))
+- Incorrect timezone in Database Maintenance Window tooltip, inaccurate Resize status of Database, and unneeded `replication_type` in  v2 `createPayload` ([#10980](https://github.com/linode/manager/pull/10980))
+- DBaaS backups disable invalid dates ([#10988](https://github.com/linode/manager/pull/10988))
+- DBaaS V2 logo on empty landing ([#10993](https://github.com/linode/manager/pull/10993))
+- Enabled Shared CPU tab for 2-nodes Database Cluster Resize ([#10995](https://github.com/linode/manager/pull/10995))
+- Set full height to DX Tools Modal and add Linode API link ([#10998](https://github.com/linode/manager/pull/10998))
+- Database Detail page Summary tab display of username and read-only host ([#10989](https://github.com/linode/manager/pull/10989))
+
+### Removed:
+
+- Support for Gravatar as user profile avatars ([#10930](https://github.com/linode/manager/pull/10930))
+- `AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966))
+
+### Tech Stories:
+
+- Replace 'react-select' with Autocomplete in Profile ([#10780](https://github.com/linode/manager/pull/10780))
+- Update storybook to take care of tar vulnerability ([#10934](https://github.com/linode/manager/pull/10934))
+- Update dompurify and jsPDF packages to resolve dependabot security alerts ([#10955](https://github.com/linode/manager/pull/10955))
+- Remove Linode Create v1 ([#10958](https://github.com/linode/manager/pull/10958))
+- Update vite and related packages to latest versions ([#10960](https://github.com/linode/manager/pull/10960))
+- Update `husky` to latest ([#10990](https://github.com/linode/manager/pull/10990))
+- Add Accessibility tab to Storybook Stories ([#10942](https://github.com/linode/manager/pull/10942))
+- Mark formik as deprecated ([#10944](https://github.com/linode/manager/pull/10944))
+- Fix console error on Volume Create - Linode Config selection  ([#10970](https://github.com/linode/manager/pull/10970))
+
+### Tests:
+
+- Tag cypress tests by adding the "method:e2e" and "purpose:dcTesting" ([#10915](https://github.com/linode/manager/pull/10915))
+- Added unit tests for the NodeBalancerDetail package ([#10916](https://github.com/linode/manager/pull/10916))
+- Add unit tests for Dialog and DeletionDialog components ([#10917](https://github.com/linode/manager/pull/10917))
+- Add unit tests for rest of NodeBalancers package ([#10945](https://github.com/linode/manager/pull/10945))
+- Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))
+- Fix plan selection test always failing on reattempts ([#10976](https://github.com/linode/manager/pull/10976))
+- Fix test flake in `nodebalancers-create-in-complex-form.spec.ts` ([#10981](https://github.com/linode/manager/pull/10981))
+- Improve region selection RegEx to resolve test failures when selecting certain regions ([#10983](https://github.com/linode/manager/pull/10983))
+- Address Linode deletion test flakiness ([#10999](https://github.com/linode/manager/pull/10999))
+
+### Upcoming Features:
+
+- Add Landing Page and update Empty-State Landing page for DBaaS V2 ([#10823](https://github.com/linode/manager/pull/10823))
+- Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
+- Fix 'Create Volume' button state on Volume Create page when 'Encrypt Volume' checkbox is checked ([#10929](https://github.com/linode/manager/pull/10929))
+- DBaaS V2 enhancements to the Summary and Settings tabs ([#10939](https://github.com/linode/manager/pull/10939))
+- Enhance CSS for Cloudpulse widget and main bar components ([#10951](https://github.com/linode/manager/pull/10951))
+- DBaaS V2 enhancements to the Backups ([#10961](https://github.com/linode/manager/pull/10961))
+- Update URL for Volume Encryption guide ([#10973](https://github.com/linode/manager/pull/10973))
+- Update Region description helper text ([#10987](https://github.com/linode/manager/pull/10987))
+
 ## [2024-09-16] - v1.128.0
 
 

packages/manager/cypress/e2e/core/account/account-logout.spec.ts

@@ -4,7 +4,7 @@ import { ui } from 'support/ui';
 
 describe('Logout Test', () => {
   beforeEach(() => {
-    cy.tag('purpose:syntheticTesting');
+    cy.tag('purpose:syntheticTesting', 'method:e2e');
   });
 
   /*

packages/manager/cypress/e2e/core/account/security-questions.spec.ts

@@ -93,14 +93,14 @@ const setSecurityQuestionAnswer = (
   answer: string
 ) => {
   getSecurityQuestion(questionNumber).within(() => {
-    cy.get('[data-qa-enhanced-select]')
+    cy.findByLabelText(`Question ${questionNumber}`)
       .should('be.visible')
       .click()
       .type(`${question}{enter}`);
   });
 
   getSecurityQuestionAnswer(questionNumber).within(() => {
-    cy.get('[data-testid="textfield-input"]')
+    cy.findByLabelText(`Answer ${questionNumber}`)
       .should('be.visible')
       .should('be.enabled')
       .click()