diff --git a/.gitignore b/.gitignore index 3330338af8c..ebd28879c45 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ lib # editor configuration .vscode +.cursor .idea **/*.iml *.mdc diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 0b0cd6e2a24..a435d4ca663 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -39,6 +39,7 @@ Feel free to open an issue to report a bug or request a feature. `Added`, `Fixed`, `Changed`, `Removed`, `Tech Stories`, `Tests`, `Upcoming Features` - Select the changeset category that matches the commit type in your PR title. (Where this isn't a 1:1 match: generally, a `feat` commit type falls under an `Added` change and `refactor` falls under `Tech Stories`.) - Write your changeset by following our [best practices](#writing-a-changeset). +9. Automated tests and other CI checks will run automatically against the PR. It is the contributor's responsibility to ensure their changes pass the CI checks. Two reviews from members of the Cloud Manager team are required before merge. After approval, all pull requests are squash merged. diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md index bc3c7693905..6b94028a818 100644 --- a/docs/PULL_REQUEST_TEMPLATE.md +++ b/docs/PULL_REQUEST_TEMPLATE.md @@ -72,7 +72,7 @@ Please specify a release date (and environment, if applicable) to guarantee time ## As an Author, before moving this PR from Draft to Open, I confirmed ✅ -- [ ] All unit tests are passing +- [ ] All tests and CI checks are passing - [ ] TypeScript compilation succeeded without errors - [ ] Code passes all linting rules diff --git a/package.json b/package.json index d665df62ebf..8064a6eae5f 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "test:search": "pnpm run --filter @linode/search test", "test:ui": "pnpm run --filter @linode/ui test", "test:utilities": "pnpm run --filter @linode/utilities test", + "test:shared": "pnpm run --filter @linode/shared test", "coverage": "pnpm run --filter linode-manager coverage", "coverage:summary": "pnpm run --filter linode-manager coverage:summary", "cy:run": "pnpm run --filter linode-manager cy:run", diff --git a/packages/api-v4/CHANGELOG.md b/packages/api-v4/CHANGELOG.md index 76d1f846c34..c986fab758f 100644 --- a/packages/api-v4/CHANGELOG.md +++ b/packages/api-v4/CHANGELOG.md @@ -1,3 +1,21 @@ +## [2025-07-15] - v0.144.0 + + +### Changed: + +- ACLP:Alerting - fixed the typo from evaluation_periods_seconds to evaluation_period_seconds ([#12466](https://github.com/linode/manager/pull/12466)) +- Use `v4beta` for `/maintenance` endpoint ([#12519](https://github.com/linode/manager/pull/12519)) + +### Fixed: + +- Unnecessary 404 errors when components attempt to fetch deleted resources ([#12474](https://github.com/linode/manager/pull/12474)) + +### Upcoming Features: + +- CloudPulse: Update types in `alerts.ts` and `types.ts`; Linode: Update type in `types.ts` ([#12393](https://github.com/linode/manager/pull/12393)) +- CloudPulse: Update service type in `types.ts` ([#12401](https://github.com/linode/manager/pull/12401)) +- Add `regions` in `Alert` interface in `types.ts` file for cloudpulse ([#12435](https://github.com/linode/manager/pull/12435)) + ## [2025-07-01] - v0.143.0 ### Changed: diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json index 7227c650f0d..62830dd0482 100644 --- a/packages/api-v4/package.json +++ b/packages/api-v4/package.json @@ -1,6 +1,6 @@ { "name": "@linode/api-v4", - "version": "0.143.0", + "version": "0.144.0", "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4", "bugs": { "url": "https://github.com/linode/manager/issues" diff --git a/packages/api-v4/src/account/maintenance.ts b/packages/api-v4/src/account/maintenance.ts index 66a27b5212f..b4c0646892c 100644 --- a/packages/api-v4/src/account/maintenance.ts +++ b/packages/api-v4/src/account/maintenance.ts @@ -1,4 +1,4 @@ -import { API_ROOT, BETA_API_ROOT } from '../constants'; +import { BETA_API_ROOT } from '../constants'; import Request, { setMethod, setParams, setURL, setXFilter } from '../request'; import type { Filter, Params, ResourcePage } from '../types'; @@ -12,7 +12,7 @@ import type { AccountMaintenance, MaintenancePolicy } from './types'; */ export const getAccountMaintenance = (params?: Params, filter?: Filter) => Request>( - setURL(`${API_ROOT}/account/maintenance`), + setURL(`${BETA_API_ROOT}/account/maintenance`), setMethod('GET'), setParams(params), setXFilter(filter), diff --git a/packages/api-v4/src/cloudpulse/alerts.ts b/packages/api-v4/src/cloudpulse/alerts.ts index bdb3378efec..77f422890e9 100644 --- a/packages/api-v4/src/cloudpulse/alerts.ts +++ b/packages/api-v4/src/cloudpulse/alerts.ts @@ -16,6 +16,7 @@ import type { Filter, Params, ResourcePage } from '../types'; import type { Alert, AlertServiceType, + CloudPulseAlertsPayload, CreateAlertDefinitionPayload, EditAlertDefinitionPayload, NotificationChannel, @@ -126,3 +127,16 @@ export const deleteAlertDefinition = (serviceType: string, alertId: number) => ), setMethod('DELETE'), ); + +export const updateServiceAlerts = ( + serviceType: string, + entityId: string, + payload: CloudPulseAlertsPayload, +) => + Request<{}>( + setURL( + `${API_ROOT}/${serviceType}/instances/${encodeURIComponent(entityId)}`, + ), + setMethod('PUT'), + setData(payload), + ); diff --git a/packages/api-v4/src/cloudpulse/types.ts b/packages/api-v4/src/cloudpulse/types.ts index a9e0c410faa..dcd4fc68269 100644 --- a/packages/api-v4/src/cloudpulse/types.ts +++ b/packages/api-v4/src/cloudpulse/types.ts @@ -1,7 +1,10 @@ +import type { AccountCapability } from 'src/account'; + export type AlertSeverityType = 0 | 1 | 2 | 3; export type MetricAggregationType = 'avg' | 'count' | 'max' | 'min' | 'sum'; export type MetricOperatorType = 'eq' | 'gt' | 'gte' | 'lt' | 'lte'; export type AlertServiceType = 'dbaas' | 'linode'; +export type MetricsServiceType = 'dbaas' | 'linode' | 'nodebalancer'; export type AlertClass = 'dedicated' | 'shared'; export type DimensionFilterOperatorType = | 'endswith' @@ -165,7 +168,7 @@ export interface CloudPulseMetricsList { } export interface ServiceAlert { - evaluation_periods_seconds: number[]; + evaluation_period_seconds: number[]; polling_interval_seconds: number[]; scope: AlertDefinitionScope[]; } @@ -238,6 +241,7 @@ export interface Alert { has_more_resources: boolean; id: number; label: string; + regions?: string[]; rule_criteria: { rules: AlertDefinitionMetricCriteria[]; }; @@ -366,10 +370,18 @@ export interface CloudPulseAlertsPayload { * Array of enabled system alert IDs in ACLP (Beta) mode. * Only included in Beta mode. */ - system: number[]; + system?: number[]; /** * Array of enabled user alert IDs in ACLP (Beta) mode. * Only included in Beta mode. */ - user: number[]; -} + user?: number[]; +} +export const capabilityServiceTypeMapping: Record< + MetricsServiceType, + AccountCapability +> = { + linode: 'Linodes', + dbaas: 'Managed Databases', + nodebalancer: 'NodeBalancers', +}; diff --git a/packages/api-v4/src/iam/types.ts b/packages/api-v4/src/iam/types.ts index 534336be0c4..7259c9885af 100644 --- a/packages/api-v4/src/iam/types.ts +++ b/packages/api-v4/src/iam/types.ts @@ -64,46 +64,32 @@ export type EntityRoleType = export type RoleName = AccountRoleType | EntityRoleType; -/** Permissions associated with the "account_admin" role. */ +/** + * Permissions associated with the "account_admin" role. + * Note: Permissions associated with profile have been excluded as all users have access to their own profile. + * This is to align with the permissions API array. + */ export type AccountAdmin = | 'accept_service_transfer' | 'acknowledge_account_agreement' - | 'answer_profile_security_questions' | 'cancel_account' | 'cancel_service_transfer' - | 'create_profile_pat' - | 'create_profile_ssh_key' - | 'create_profile_tfa_secret' | 'create_service_transfer' | 'create_user' - | 'delete_profile_pat' - | 'delete_profile_phone_number' - | 'delete_profile_ssh_key' | 'delete_user' - | 'disable_profile_tfa' | 'enable_managed' - | 'enable_profile_tfa' | 'enroll_beta_program' | 'is_account_admin' | 'list_account_agreements' | 'list_account_logins' | 'list_available_services' | 'list_default_firewalls' - | 'list_enrolled_beta_programs' | 'list_service_transfers' | 'list_user_grants' - | 'revoke_profile_app' - | 'revoke_profile_device' - | 'send_profile_phone_number_verification_code' | 'update_account' | 'update_account_settings' - | 'update_profile' - | 'update_profile_pat' - | 'update_profile_ssh_key' | 'update_user' | 'update_user_grants' - | 'update_user_preferences' - | 'verify_profile_phone_number' | 'view_account' | 'view_account_login' | 'view_account_settings' @@ -114,13 +100,8 @@ export type AccountAdmin = | 'view_user' | 'view_user_preferences' | AccountBillingAdmin - | AccountEventViewer | AccountFirewallAdmin - | AccountLinodeAdmin - | AccountMaintenanceViewer - | AccountNotificationViewer - | AccountOauthClientAdmin - | AccountProfileViewer; + | AccountLinodeAdmin; /** Permissions associated with the "account_billing_admin" role. */ export type AccountBillingAdmin = diff --git a/packages/api-v4/src/linodes/types.ts b/packages/api-v4/src/linodes/types.ts index 6b1cdcb20e4..f246df28f16 100644 --- a/packages/api-v4/src/linodes/types.ts +++ b/packages/api-v4/src/linodes/types.ts @@ -56,12 +56,12 @@ export interface Linode { watchdog_enabled: boolean; } -export interface LinodeAlerts { - cpu: number; - io: number; - network_in: number; - network_out: number; - transfer_quota: number; +export interface LinodeAlerts extends CloudPulseAlertsPayload { + cpu?: number; + io?: number; + network_in?: number; + network_out?: number; + transfer_quota?: number; } export interface LinodeBackups { diff --git a/packages/manager/.changeset/pr-12441-fixed-1751029952198.md b/packages/manager/.changeset/pr-12441-fixed-1751029952198.md deleted file mode 100644 index cded7043d92..00000000000 --- a/packages/manager/.changeset/pr-12441-fixed-1751029952198.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@linode/manager": Fixed ---- - -ACLP: change `scope` in `CreateAlertDefinitionForm` to optional ([#12441](https://github.com/linode/manager/pull/12441)) diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md index a2a05778882..9408e55cc16 100644 --- a/packages/manager/CHANGELOG.md +++ b/packages/manager/CHANGELOG.md @@ -4,6 +4,87 @@ 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/). +## [2025-07-15] - v1.146.0 + + +### Added: + +- Unsaved Changes modal for Legacy Alerts on Linode Details page ([#12385](https://github.com/linode/manager/pull/12385)) +- 'New' Badge to APL section of Create Cluster flow ([#12461](https://github.com/linode/manager/pull/12461)) + +### Changed: + +- Replace the button component under DBAAS with Akamai CDS button web component ([#12148](https://github.com/linode/manager/pull/12148)) +- TooltipIcon help to info icon ([#12348](https://github.com/linode/manager/pull/12348)) +- Improve VLANSelect component behavior when creating a new VLAN ([#12380](https://github.com/linode/manager/pull/12380)) +- Alerts banner text in Legacy and Beta modes to match latest UX mocks ([#12419](https://github.com/linode/manager/pull/12419)) +- Update Linode and NodeBalancer create summary text ([#12455](https://github.com/linode/manager/pull/12455)) +- Use `Paper` in create page sidebars ([#12463](https://github.com/linode/manager/pull/12463)) +- Alerts subheading text in Legacy and Beta modes to match latest UX mocks ([#12465](https://github.com/linode/manager/pull/12465)) + +### Fixed: + +- Console error in Create NodeBalancer page and columns misalignment in Subnet NodeBalancers Table ([#12428](https://github.com/linode/manager/pull/12428)) +- Disable kubeconfig and upgrade options for users with read-only access ([#12430](https://github.com/linode/manager/pull/12430)) +- TOD payload script encoding error ([#12434](https://github.com/linode/manager/pull/12434)) +- Upgrade cluster version modal for LKE-E ([#12443](https://github.com/linode/manager/pull/12443)) +- Newly created VLANs not showing up in the VLAN select after creation when using Linode Interfaces ([#12448](https://github.com/linode/manager/pull/12448)) +- Extra background on code block copy icon ([#12456](https://github.com/linode/manager/pull/12456)) +- Unexpected Linode Create deep link behavior ([#12457](https://github.com/linode/manager/pull/12457)) +- Unsaved changes modal for upload image feature ([#12459](https://github.com/linode/manager/pull/12459)) +- APL header bolding in Create Cluster flow and GA code clean up ([#12461](https://github.com/linode/manager/pull/12461)) +- ACLP-Alerting: added fallback to the AlertsResources and DisplayAlertResources components ([#12467](https://github.com/linode/manager/pull/12467)) +- Volumes upgrade banner alignment ([#12471](https://github.com/linode/manager/pull/12471)) +- ACLP-Alerting: spacing instead of using sx: gap for DimensionFilter, add flexWrap, remove unnecessary Box spacing in Metric ([#12475](https://github.com/linode/manager/pull/12475)) +- Region select missing selected icon ([#12481](https://github.com/linode/manager/pull/12481)) + +### Removed: + +- Move EntityTransfers queries and dependencies to shared `queries` package ([#12406](https://github.com/linode/manager/pull/12406)) +- Move Databases queries and dependencies to shared `queries` package ([#12426](https://github.com/linode/manager/pull/12426)) +- Move Status Page queries and dependencies to shared `queries` package ([#12468](https://github.com/linode/manager/pull/12468)) + +### Tech Stories: + +- Reroute Linodes ([#12363](https://github.com/linode/manager/pull/12363)) +- Clean up authentication code post PKCE and decoupling of Redux ([#12405](https://github.com/linode/manager/pull/12405)) +- Use `REACT_APP_ENVIRONMENT_NAME` to set the Sentry environment ([#12450](https://github.com/linode/manager/pull/12450)) +- Clean up getLinodeXFilter function ([#12452](https://github.com/linode/manager/pull/12452)) +- Enhance devtools to support `aclpBetaServices` nested feature flags ([#12478](https://github.com/linode/manager/pull/12478)) +- Improve contribution guidelines related to CI checks ([#12480](https://github.com/linode/manager/pull/12480)) +- Clean up unused mock data and constants ([#12482](https://github.com/linode/manager/pull/12482)) +- Update usePagination hook to use TanStack router instead of react router ([#12424](https://github.com/linode/manager/pull/12424)) + +### Tests: + +- Add smoke tests for when aclpIntegration is disabled given varying user preferences ([#12310](https://github.com/linode/manager/pull/12310)) +- Clean up VPC unit tests and mock queries over relying on server handlers ([#12429](https://github.com/linode/manager/pull/12429)) +- Add Host Maintenance Policy account settings Cypress tests ([#12433](https://github.com/linode/manager/pull/12433)) +- Block analytics requests in Cypress tests by default ([#12438](https://github.com/linode/manager/pull/12438)) +- Add integration test to confirm manually assigning a VPC IPv4 when assigning a Linode to subnet ([#12445](https://github.com/linode/manager/pull/12445)) + +### Upcoming Features: + +- Add region filtering for VLANSelect in AddInterface form ([#12380](https://github.com/linode/manager/pull/12380)) +- Add scope column, handle bulk alert enablement in `AlertInformationActionTable.tsx`, add new alerts mutation query in `alerts.tsx` ([#12393](https://github.com/linode/manager/pull/12393)) +- CloudPulse: Add new port filter config in `FilterConfig.ts`, add new component `CloudPulsePortFilter.tsx`, update utilities in `utils.ts` ([#12401](https://github.com/linode/manager/pull/12401)) +- Show when public IPs are unreachable more accurately for Linode Interfaces ([#12408](https://github.com/linode/manager/pull/12408)) +- Add support for `nodebalancerIpv6` feature flag for NodeBalancer Dual Stack Support ([#12420](https://github.com/linode/manager/pull/12420)) +- DataStream: add Destinations empty state and Create Destination views ([#12422](https://github.com/linode/manager/pull/12422)) +- Add `CloudPulseModifyAlertRegions`, `AlertRegions` and `DisplayAlertRegions` component, add `getSupportedRegions` function in alert utils.ts file, add `regions` key in `CreateAlertDefinitionForm` ([#12435](https://github.com/linode/manager/pull/12435)) +- Add alerts object to `View Code Snippets` for beta Alerts opt-in users in Create Linode flow ([#12446](https://github.com/linode/manager/pull/12446)) +- Implement the new RBAC permission hook in Linodes configuration tab ([#12447](https://github.com/linode/manager/pull/12447)) +- Updating Stream Summary on form values change ([#12451](https://github.com/linode/manager/pull/12451)) +- Implement the new RBAC permission hook in Linode Network tab ([#12458](https://github.com/linode/manager/pull/12458)) +- Add "New" badge for VM Host Maintenance; Fix maintenance table loading state; Fix maintenance policy responsive behavior for Linode Create ([#12460](https://github.com/linode/manager/pull/12460)) +- CloudPulse: Add filters for new service - `nodebalancer` at `FilterConfig.ts` in metrics ([#12464](https://github.com/linode/manager/pull/12464)) +- ACLP-Alerting: using latest /services api data to fetch the evaluation period and polling interval time options ([#12466](https://github.com/linode/manager/pull/12466)) +- Add notice when changing policies for scheduled maintenances for VM Host Maintenance ([#12472](https://github.com/linode/manager/pull/12472)) +- Implement the new RBAC permission hook in Linodes alerts and settings tabs ([#12476](https://github.com/linode/manager/pull/12476)) +- Update legacy/beta toggle behavior for Metrics, Alerts and Banners ([#12479](https://github.com/linode/manager/pull/12479)) +- Implement the new RBAC permission hook in Linodes storage tab ([#12484](https://github.com/linode/manager/pull/12484)) +- Implement the new RBAC permission hook in Linodes Landing Page ([#12485](https://github.com/linode/manager/pull/12485)) + ## [2025-07-01] - v1.145.0 @@ -65,6 +146,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - Add VM Host Maintenance support to Linode headers and rows ([#12418](https://github.com/linode/manager/pull/12418)) - Fix incorrect filter for in-progress maintenance ([#12436](https://github.com/linode/manager/pull/12436)) - Add CRUD CloudNAT factories and mocks ([#12379](https://github.com/linode/manager/pull/12379)) +- ACLP: change `scope` in `CreateAlertDefinitionForm` to optional ([#12441](https://github.com/linode/manager/pull/12441)) ## [2025-06-17] - v1.144.0 @@ -84,7 +166,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Fixed: -- Inability for restricted users to configure High Availability or IP ACLs on LKE clusters ([#11274](https://github.com/linode/manager/pull/11274)) +- Inability for restricted users to configure High Availability or IP ACLs on LKE clusters ([#12374](https://github.com/linode/manager/pull/12374)) - Radio button size in plans table ([#12261](https://github.com/linode/manager/pull/12261)) - Styling issues in `DomainRecords` and `forwardRef` console errors in Object Storage Access ([#12279](https://github.com/linode/manager/pull/12279)) - Radio button styling inconsistencies across themes and states ([#12284](https://github.com/linode/manager/pull/12284)) diff --git a/packages/manager/cypress/e2e/core/account/host-maintenance-policy.spec.ts b/packages/manager/cypress/e2e/core/account/host-maintenance-policy.spec.ts new file mode 100644 index 00000000000..5a5e41f2ab2 --- /dev/null +++ b/packages/manager/cypress/e2e/core/account/host-maintenance-policy.spec.ts @@ -0,0 +1,199 @@ +/** + * Integration tests involving Host Maintenance Policy account settings. + */ + +import { + mockGetAccountSettings, + mockGetMaintenance, + mockUpdateAccountSettings, + mockUpdateAccountSettingsError, +} from 'support/intercepts/account'; +import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags'; +import { mockGetMaintenancePolicies } from 'support/intercepts/maintenance'; +import { ui } from 'support/ui'; + +import { accountSettingsFactory } from 'src/factories'; +import { accountMaintenanceFactory } from 'src/factories/accountMaintenance'; +import { maintenancePolicyFactory } from 'src/factories/maintenancePolicy'; + +describe('Host Maintenance Policy account settings', () => { + const mockMaintenancePolicies = [ + maintenancePolicyFactory.build({ + slug: 'linode/migrate', + label: 'Migrate', + type: 'linode_migrate', + }), + maintenancePolicyFactory.build({ + slug: 'linode/power_off_on', + label: 'Power Off / Power On', + type: 'linode_power_off_on', + }), + ]; + + describe('When feature flag is enabled', () => { + beforeEach(() => { + mockAppendFeatureFlags({ + vmHostMaintenance: { + enabled: true, + }, + }); + mockGetMaintenancePolicies(mockMaintenancePolicies); + }); + + /* + * - Confirms that the value of the "Maintenance Policy" drop-down matches the account setting on page load. + */ + it('shows the expected maintenance policy in the drop-down', () => { + mockMaintenancePolicies.forEach((maintenancePolicy) => { + mockGetAccountSettings( + accountSettingsFactory.build({ + maintenance_policy: maintenancePolicy.slug, + }) + ); + + cy.visitWithLogin('/account/settings'); + cy.findByText('Host Maintenance Policy') + .should('be.visible') + .closest('[data-qa-paper]') + .within(() => { + cy.findByLabelText('Maintenance Policy').should( + 'have.value', + maintenancePolicy.label + ); + }); + }); + }); + + /* + * - Confirms that the upcoming maintenance notice appears when there's a scheduled maintenance event + * with a different policy than the currently selected one. + */ + it('shows upcoming maintenance notice when policy differs from scheduled maintenance', () => { + // Mock account settings with 'linode/migrate' policy + mockGetAccountSettings( + accountSettingsFactory.build({ + maintenance_policy: 'linode/migrate', + }) + ); + + // Mock upcoming maintenance with 'linode/power_off_on' policy + const upcomingMaintenance = [ + accountMaintenanceFactory.build({ + entity: { + id: 123, + label: 'test-linode', + type: 'linode', + url: '/v4/linode/instances/123', + }, + maintenance_policy_set: 'linode/power_off_on', + status: 'scheduled', + }), + ]; + mockGetMaintenance(upcomingMaintenance, []); + + cy.visitWithLogin('/account/settings'); + cy.findByText('Host Maintenance Policy') + .should('be.visible') + .closest('[data-qa-paper]') + .within(() => { + // Verify the notice appears + cy.contains( + 'There are Linodes that have upcoming scheduled maintenance.' + ).should('be.visible'); + cy.contains( + 'Changes to this policy will not affect this existing planned maintenance event and, instead, will be applied to future maintenance events scheduled after the change is made.' + ).should('be.visible'); + }); + }); + + /* + * - Confirms that the user can update their default maintenance policy. + * - Confirms that Cloud Manager displays API errors upon unsuccessful account settings update. + * - Confirms that Cloud Manager shows toast notification upon successful account settings update. + */ + it('can update the default maintenance policy type', () => { + mockGetAccountSettings( + accountSettingsFactory.build({ + maintenance_policy: 'linode/migrate', + }) + ); + mockUpdateAccountSettingsError('An unknown error occurred', 500).as( + 'updateMaintenancePolicy' + ); + + cy.visitWithLogin('/account/settings'); + cy.findByText('Host Maintenance Policy') + .should('be.visible') + .closest('[data-qa-paper]') + .within(() => { + ui.button + .findByTitle('Save Maintenance Policy') + .should('be.disabled'); + + // Change the maintenance policy selection from "Migrate" to "Power Off / Power On". + cy.findByLabelText('Maintenance Policy').clear(); + ui.autocompletePopper.find().within(() => { + cy.contains('Power Off / Power On').should('be.visible').click(); + }); + cy.findByLabelText('Maintenance Policy').should( + 'have.value', + 'Power Off / Power On' + ); + + // Confirm that "Save Maintenance Policy" button becomes enabled and click it, + // then that Cloud Manager displays an error message if an API error occurs. + ui.button + .findByTitle('Save Maintenance Policy') + .should('be.enabled') + .click(); + cy.wait('@updateMaintenancePolicy'); + cy.findByText('An unknown error occurred').should('be.visible'); + + // Click the "Save Maintenance Policy" button again, this time confirm + // that Cloud responds as expected upon receiving a successful API response. + mockUpdateAccountSettings( + accountSettingsFactory.build({ + maintenance_policy: 'linode/power_off_on', + }) + ).as('updateMaintenancePolicy'); + + ui.button + .findByTitle('Save Maintenance Policy') + .should('be.enabled') + .click(); + cy.wait('@updateMaintenancePolicy').then((xhr) => { + expect(xhr.request.body.maintenance_policy).to.equal( + 'linode/power_off_on' + ); + }); + }); + + ui.toast.assertMessage('Host Maintenance Policy settings updated.'); + }); + }); + + // TODO M3-10046 - Delete feature flag negative tests when "vmHostMaintenance" feature flag is removed. + describe('When feature flag is disabled', () => { + /* + * - Confirms that the "Host Maintenance Policy" section is absent when `vmHostMaintenance` is disabled. + */ + it('does not show Host Maintenance Policy section on settings page', () => { + mockAppendFeatureFlags({ + vmHostMaintenance: { + enabled: false, + }, + }); + + cy.visitWithLogin('/account/settings'); + + // Confirm that page contents has loaded by confirming that certain content + // is visible. We'll assert that the Linode Managed informational text is present. + cy.contains( + 'Linode Managed includes Backups, Longview Pro, cPanel, and round-the-clock monitoring' + ); + + // Confirm that the "Host Maintenance Policy" section is absent. + cy.findByText('Host Maintenance Policy').should('not.exist'); + }); + }); +}); diff --git a/packages/manager/cypress/e2e/core/account/restricted-user-details-pages.spec.ts b/packages/manager/cypress/e2e/core/account/restricted-user-details-pages.spec.ts index 1a55c533762..ae937d44759 100644 --- a/packages/manager/cypress/e2e/core/account/restricted-user-details-pages.spec.ts +++ b/packages/manager/cypress/e2e/core/account/restricted-user-details-pages.spec.ts @@ -151,37 +151,30 @@ describe('restricted user details pages', () => { `You don't have permissions to edit this Linode. Please contact your ${ADMINISTRATOR} to request the necessary permissions.` ); - // Confirm that "Power On" button is disabled - ui.button - .findByTitle('Power On') - .should('be.visible') - .should('be.disabled'); - - // Confirm that "Reboot" button is disabled - ui.button.findByTitle('Reboot').should('be.visible').should('be.disabled'); - - // Confirm that "Launch LISH Console" button is disabled - ui.button - .findByTitle('Launch LISH Console') - .should('be.visible') - .should('be.disabled'); - // Confirm that the buttons in the action menu are disabled ui.actionMenu .findByTitle(`Action menu for Linode ${mockLinode.label}`) .should('be.visible') .should('be.enabled') .click(); - ['Clone', 'Resize', 'Rebuild', 'Rescue', 'Migrate', 'Delete'].forEach( - (menuItem: string) => { - const tooltipMessage = `You don't have permissions to ${menuItem.toLocaleLowerCase()} this Linode.`; - ui.actionMenuItem.findByTitle(menuItem).should('be.disabled'); - ui.button - .findByAttribute('aria-label', tooltipMessage) - .trigger('mouseover'); - ui.tooltip.findByText(tooltipMessage); - } - ); + + // Check all action menu items are disabled + [ + 'Power On', + 'Reboot', + 'Launch LISH Console', + 'Clone', + 'Resize', + 'Rebuild', + 'Rescue', + 'Migrate', + 'Delete', + ].forEach((menuItem: string) => { + const tooltipMessage = `You do not have permission to perform this action.`; + // Find the tooltip icon button and focus it + ui.actionMenuItem.findByTitle(menuItem).should('be.disabled').focus(); + ui.tooltip.findByText(tooltipMessage); + }); cy.reload(); // Confirm that "Add A Tag" button is disabled and @@ -385,8 +378,8 @@ describe('restricted user details pages', () => { ui.tabList.findTabByTitle('Resize').click(); // Confirm that "Resize Database Cluster" button is disabled - ui.button - .findByTitle('Resize Database Cluster') + ui.cdsButton + .findButtonByTitle('Resize Database Cluster') .should('be.visible') .should('be.disabled'); @@ -394,9 +387,12 @@ describe('restricted user details pages', () => { ui.tabList.findTabByTitle('Settings').click(); // Confirm that "Manage Access" button is disabled - cy.get('[data-testid="button-access-control"]') - .should('be.visible') - .should('be.disabled'); + cy.get('[data-testid="button-access-control"]').within(() => { + ui.cdsButton + .findButtonByTitle('Manage Access') + .should('be.visible') + .should('be.disabled'); + }); // Confirm that "Remove" button is disabled ui.button @@ -405,20 +401,20 @@ describe('restricted user details pages', () => { .should('be.disabled'); // Confirm that "Reset Root Password" button is disabled - ui.button - .findByTitle('Reset Root Password') + ui.cdsButton + .findButtonByTitle('Reset Root Password') .should('be.visible') .should('be.disabled'); // Confirm that "Delete Cluster" button is disabled - ui.button - .findByTitle('Delete Cluster') + ui.cdsButton + .findButtonByTitle('Delete Cluster') .should('be.visible') .should('be.disabled'); // Confirm that "Save Changes" button is disabled - ui.button - .findByTitle('Save Changes') + ui.cdsButton + .findButtonByTitle('Save Changes') .should('be.visible') .should('be.disabled'); }); diff --git a/packages/manager/cypress/e2e/core/cloudpulse/feature-flag-disabled.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/feature-flag-disabled.spec.ts new file mode 100644 index 00000000000..b61ec199da9 --- /dev/null +++ b/packages/manager/cypress/e2e/core/cloudpulse/feature-flag-disabled.spec.ts @@ -0,0 +1,138 @@ +import { regionFactory, userPreferencesFactory } from '@linode/utilities'; +import { linodeFactory } from '@linode/utilities'; +import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags'; +import { mockGetLinodeDetails } from 'support/intercepts/linodes'; +import { mockGetUserPreferences } from 'support/intercepts/profile'; +import { mockGetRegions } from 'support/intercepts/regions'; +import { randomLabel, randomNumber } from 'support/util/random'; + +import type { UserPreferences } from '@linode/api-v4'; + +describe('User preferences for alerts and metrics have no effect when aclpBetaServices alerts/metrics feature flag is disabled', () => { + beforeEach(() => { + mockAppendFeatureFlags({ + aclpBetaServices: { + linode: { + alerts: false, + metrics: false, + }, + }, + }).as('getFeatureFlags'); + const mockRegion = regionFactory.build({ + capabilities: ['Managed Databases'], + monitors: { + alerts: ['Linodes'], + metrics: ['Linodes'], + }, + }); + mockGetRegions([mockRegion]).as('getRegions'); + const mockLinode = linodeFactory.build({ + id: randomNumber(), + label: randomLabel(), + region: mockRegion.id, + }); + mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode'); + cy.wrap(mockLinode).as('mockLinode'); + }); + + it('Alerts banner does not display when isAclpAlertsBeta is false', function () { + const userPreferences = userPreferencesFactory.build({ + isAclpAlertsBeta: false, + } as Partial); + mockGetUserPreferences(userPreferences).as('getUserPreferences'); + cy.visitWithLogin(`/linodes/${this.mockLinode.id}/alerts`); + cy.wait([ + '@getFeatureFlags', + '@getUserPreferences', + '@getRegions', + '@getLinode', + ]); + + cy.get('[data-reach-tab-panels]') + .should('be.visible') + .within(() => { + // upgrade banner does not display + cy.get('[data-testid="alerts-preference-banner-text"]').should( + 'not.exist' + ); + // downgrade button is not visible + cy.findByText('Switch to legacy Alerts').should('not.exist'); + }); + }); + + it('Alerts downgrade button does not appear and legacy UI displays when isAclpAlertsBeta is true', function () { + const userPreferences = userPreferencesFactory.build({ + isAclpAlertsBeta: true, + } as Partial); + mockGetUserPreferences(userPreferences).as('getUserPreferences'); + + cy.visitWithLogin(`/linodes/${this.mockLinode.id}/alerts`); + cy.wait([ + '@getFeatureFlags', + '@getUserPreferences', + '@getRegions', + '@getLinode', + ]); + + cy.get('[data-reach-tab-panels]') + .should('be.visible') + .within(() => { + // upgrade banner is not visible + cy.get('[data-testid="alerts-preference-banner-text"]').should( + 'not.exist' + ); + // downgrade button is not visible + cy.findByText('Switch to legacy Alerts').should('not.exist'); + }); + }); + + it('Metrics banner does not display when isAclpMetricsBeta is false', function () { + const userPreferences = userPreferencesFactory.build({ + isAclpMetricsBeta: false, + } as Partial); + mockGetUserPreferences(userPreferences).as('getUserPreferences'); + cy.visitWithLogin(`/linodes/${this.mockLinode.id}/metrics`); + cy.wait([ + '@getFeatureFlags', + '@getUserPreferences', + '@getRegions', + '@getLinode', + ]); + + cy.get('[data-reach-tab-panels]') + .should('be.visible') + .within(() => { + // upgrade banner is not visible + cy.get('[data-testid="metrics-preference-banner-text"]').should( + 'not.exist' + ); + // downgrade button is not visible + cy.findByText('Switch to legacy Metrics').should('not.exist'); + }); + }); + + it('Metrics downgrade button does not appear and legacy UI displays when isAclpMetricsBeta is true', function () { + const userPreferences = userPreferencesFactory.build({ + isAclpMetricsBeta: true, + } as Partial); + mockGetUserPreferences(userPreferences).as('getUserPreferences'); + cy.visitWithLogin(`/linodes/${this.mockLinode.id}/metrics`); + cy.wait([ + '@getFeatureFlags', + '@getUserPreferences', + '@getRegions', + '@getLinode', + ]); + + cy.get('[data-reach-tab-panels]') + .should('be.visible') + .within(() => { + // upgrade banner is not visible + cy.get('[data-testid="metrics-preference-banner-text"]').should( + 'not.exist' + ); + // downgrade button is not visible + cy.findByText('Switch to legacy Metrics').should('not.exist'); + }); + }); +}); diff --git a/packages/manager/cypress/e2e/core/databases/advanced-configuration.spec.ts b/packages/manager/cypress/e2e/core/databases/advanced-configuration.spec.ts index b0f3beeaba4..5a00b2188bb 100644 --- a/packages/manager/cypress/e2e/core/databases/advanced-configuration.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/advanced-configuration.spec.ts @@ -131,10 +131,13 @@ const addConfigsToUI = ( cy.contains(flatKey).should('be.visible').click(); - ui.button.findByTitle('Add').click(); + ui.cdsButton.findButtonByTitle('Add').then((btn) => { + btn[0].click(); // Native DOM click + }); // Type value for non-boolean configs if (value.type !== 'boolean') { + cy.get(`[name="${flatKey}"]`).scrollIntoView(); cy.get(`[name="${flatKey}"]`).should('be.visible').clear(); cy.get(`[name="${flatKey}"]`).type(additionalConfigs[flatKey]); } @@ -208,17 +211,17 @@ describe('Update database clusters', () => { cy.findByText(defaultConfig).should('be.visible'); }); - // Confirms all teh buttons are in the initial state - enabled/disabled - ui.button - .findByTitle('Configure') + // Confirms all the buttons are in the initial state - enabled/disabled + ui.cdsButton + .findButtonByTitle('Configure') .should('be.visible') .should('be.enabled') .click(); ui.drawer.findByTitle('Advanced Configuration').should('be.visible'); - ui.button - .findByTitle('Add') - .should('be.visible') + ui.cdsButton + .findButtonByTitle('Add') + .should('exist') .should('be.disabled'); ui.button .findByTitle('Save') @@ -233,11 +236,12 @@ describe('Update database clusters', () => { .should('be.enabled') .click(); - ui.button - .findByTitle('Configure') + ui.cdsButton + .findButtonByTitle('Configure') .should('be.visible') .should('be.enabled') .click(); + ui.drawer.findByTitle('Advanced Configuration').should('be.visible'); cy.get('[aria-label="Close drawer"]') .should('be.visible') @@ -289,8 +293,8 @@ describe('Update database clusters', () => { cy.wait(['@getDatabase', '@getDatabaseTypes']); // Expand configure drawer to add configs - ui.button - .findByTitle('Configure') + ui.cdsButton + .findButtonByTitle('Configure') .should('be.visible') .should('be.enabled') .click(); @@ -377,8 +381,8 @@ describe('Update database clusters', () => { cy.wait(['@getDatabase', '@getDatabaseTypes']); // Expand configure drawer to add configs - ui.button - .findByTitle('Configure') + ui.cdsButton + .findButtonByTitle('Configure') .should('be.visible') .should('be.enabled') .click(); @@ -462,8 +466,8 @@ describe('Update database clusters', () => { cy.wait(['@getDatabase', '@getDatabaseTypes']); // Expand configure drawer to add configs - ui.button - .findByTitle('Configure') + ui.cdsButton + .findButtonByTitle('Configure') .should('be.visible') .should('be.enabled') .click(); @@ -495,9 +499,12 @@ describe('Update database clusters', () => { cy.contains(flatKey).should('be.visible').click(); - ui.button.findByTitle('Add').click(); + ui.cdsButton.findButtonByTitle('Add').then((btn) => { + btn[0].click(); // Native DOM click + }); // Validate value for inline minimum limit + cy.get(`[name="${flatKey}"]`).scrollIntoView(); cy.get(`[name="${flatKey}"]`).should('be.visible').clear(); cy.get(`[name="${flatKey}"]`).type(`${value.minimum - 1}`); cy.get(`[name="${flatKey}"]`).blur(); diff --git a/packages/manager/cypress/e2e/core/databases/create-database.spec.ts b/packages/manager/cypress/e2e/core/databases/create-database.spec.ts index 53413c184b8..0da780014d4 100644 --- a/packages/manager/cypress/e2e/core/databases/create-database.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/create-database.spec.ts @@ -194,7 +194,11 @@ describe('create a database cluster, mocked data', () => { cy.findAllByTestId('currentSummary').should('be.visible'); // Create database, confirm redirect, and that new instance is listed. - cy.findByText('Create Database Cluster').should('be.visible').click(); + ui.cdsButton + .findButtonByTitle('Create Database Cluster') + .then((btn) => { + btn[0].click(); // Native DOM click + }); cy.wait('@createDatabase'); // TODO Update assertions upon completion of M3-7030. @@ -327,11 +331,10 @@ describe('restricted user cannot create database', () => { // table present for restricted user but its inputs will be disabled cy.get('table[aria-label="List of Linode Plans"]').should('exist'); // Assert that Create Database button is visible and disabled - ui.button - .findByTitle('Create Database Cluster') + ui.cdsButton + .findButtonByTitle('Create Database Cluster') .should('be.visible') - .and('be.disabled') - .trigger('mouseover'); + .should('be.disabled'); // Info message is visible cy.findByText( diff --git a/packages/manager/cypress/e2e/core/databases/delete-database.spec.ts b/packages/manager/cypress/e2e/core/databases/delete-database.spec.ts index a80b2d93b4e..ae2874ce427 100644 --- a/packages/manager/cypress/e2e/core/databases/delete-database.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/delete-database.spec.ts @@ -53,8 +53,8 @@ describe('Delete database clusters', () => { cy.wait(['@getAccount', '@getDatabase', '@getDatabaseTypes']); // Click "Delete Cluster" button. - ui.button - .findByAttribute('data-qa-settings-button', 'Delete Cluster') + ui.cdsButton + .findButtonByTitle('Delete Cluster') .should('be.visible') .click(); @@ -116,8 +116,8 @@ describe('Delete database clusters', () => { cy.wait(['@getAccount', '@getDatabase', '@getDatabaseTypes']); // Click "Delete Cluster" button. - ui.button - .findByAttribute('data-qa-settings-button', 'Delete Cluster') + ui.cdsButton + .findButtonByTitle('Delete Cluster') .should('be.visible') .click(); diff --git a/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts b/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts index 2680ac03fa9..509bdd9ded2 100644 --- a/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts @@ -32,8 +32,8 @@ import type { DatabaseClusterConfiguration } from 'support/constants/databases'; */ const resizeDatabase = (initialLabel: string) => { - ui.button - .findByTitle('Resize Database Cluster') + ui.cdsButton + .findButtonByTitle('Resize Database Cluster') .should('be.visible') .should('be.enabled') .click(); @@ -98,8 +98,8 @@ describe('Resizing existing clusters', () => { cy.get('[data-reach-tab-list]').within(() => { cy.findByText('Resize').should('be.visible').click(); }); - ui.button - .findByTitle('Resize Database Cluster') + ui.cdsButton + .findButtonByTitle('Resize Database Cluster') .should('be.visible') .should('be.disabled'); @@ -246,8 +246,9 @@ describe('Resizing existing clusters', () => { cy.get('[data-reach-tab-list]').within(() => { cy.findByText('Resize').should('be.visible').click(); }); - ui.button - .findByTitle('Resize Database Cluster') + + ui.cdsButton + .findButtonByTitle('Resize Database Cluster') .should('be.visible') .should('be.disabled'); diff --git a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts index 53018ea5ee5..f82641e1065 100644 --- a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts @@ -99,7 +99,9 @@ const removeAllowedIp = (allowedIp: string) => { * @param existingIps - The number of existing IPs. Optional, default is `0`. */ const manageAccessControl = (allowedIps: string[], existingIps: number = 0) => { - cy.findByTestId('button-access-control').click(); + cy.get('[data-testid="button-access-control"]').within(() => { + ui.cdsButton.findButtonByTitle('Manage Access').click(); + }); ui.drawer .findByTitle('Manage Access') @@ -132,8 +134,8 @@ const manageAccessControl = (allowedIps: string[], existingIps: number = 0) => { * made on the result of the root password reset attempt. */ const resetRootPassword = () => { - ui.button - .findByAttribute('data-qa-settings-button', 'Reset Root Password') + ui.cdsButton + .findButtonByTitle('Reset Root Password') .should('be.visible') .click(); @@ -165,7 +167,7 @@ const upgradeEngineVersion = (engine: string, version: string) => { cy.findByText('Maintenance'); cy.findByText('Version'); cy.findByText(`${dbEngine} v${version}`); - ui.button.findByTitle('Upgrade Version').should('be.visible'); + ui.cdsButton.findButtonByTitle('Upgrade Version').should('be.visible'); }); }; @@ -180,11 +182,16 @@ const upgradeEngineVersion = (engine: string, version: string) => { */ const modifyMaintenanceWindow = (label: string, windowValue: string) => { cy.findByText('Set a Weekly Maintenance Window'); - cy.findByTitle('Save Changes').should('be.visible').should('be.disabled'); + ui.cdsButton + .findButtonByTitle('Save Changes') + .should('be.visible') + .should('be.disabled'); ui.autocomplete.findByLabel(label).should('be.visible').type(windowValue); cy.contains(windowValue).should('be.visible').click(); - ui.button.findByTitle('Save Changes').should('be.visible').click(); + ui.cdsButton.findButtonByTitle('Save Changes').then((btn) => { + btn[0].click(); // Native DOM click + }); }; /** @@ -253,7 +260,7 @@ const validateSuspendResume = ( cy.findByText(hostnameRegex).should('be.visible'); // DBaaS passwords cannot be revealed when database/cluster is suspended or resuming. - ui.button.findByTitle('Show').should('be.visible').should('be.enabled'); + ui.cdsButton.findButtonByTitle('Show').should('be.enabled'); // Navigate to "Settings" tab. ui.tabList.findTabByTitle('Settings').click(); @@ -393,18 +400,14 @@ describe('Update database clusters', () => { cy.findByText('Connection Details'); // "Show" button should be enabled to reveal password when DB is active. - ui.button - .findByTitle('Show') - .should('be.visible') - .should('be.enabled') - .click(); + ui.cdsButton.findButtonByTitle('Show').should('be.enabled').click(); cy.wait('@getCredentials'); cy.findByText(`${initialPassword}`); // "Hide" button should be enabled to hide password when password is revealed. - ui.button - .findByTitle('Hide') + ui.cdsButton + .findButtonByTitle('Hide') .should('be.visible') .should('be.enabled') .click(); @@ -523,8 +526,8 @@ describe('Update database clusters', () => { cy.findByText('Connection Details'); // DBaaS passwords cannot be revealed until database/cluster has provisioned. - ui.button - .findByTitle('Show') + ui.cdsButton + .findButtonByTitle('Show') .should('be.visible') .should('be.disabled'); @@ -542,6 +545,14 @@ describe('Update database clusters', () => { // Navigate to "Settings" tab. ui.tabList.findTabByTitle('Settings').click(); + cy.get('[data-testid="settings-button-Suspend Cluster"]').within( + () => { + ui.cdsButton + .findButtonByTitle('Suspend Cluster') + .should('be.disabled'); + } + ); + // Reset root password. resetRootPassword(); cy.wait('@resetRootPassword'); @@ -576,10 +587,6 @@ describe('Update database clusters', () => { 'Maintenance Window settings saved successfully.' ); - cy.get('[data-qa-settings-button="Suspend Cluster"]').should( - 'be.disabled' - ); - // Navigate to "Networking" tab. ui.tabList.findTabByTitle('Networking').click(); @@ -670,7 +677,15 @@ describe('Update database clusters', () => { ui.tabList.findTabByTitle('Settings').click(); // Suspend an active cluster - cy.get('[data-qa-settings-button="Suspend Cluster"]').click(); + cy.get('[data-testid="settings-button-Suspend Cluster"]').within( + () => { + ui.cdsButton + .findButtonByTitle('Suspend Cluster') + .should('be.visible') + .should('be.enabled') + .click(); + } + ); suspendCluster(initialLabel); cy.wait('@suspendDatabase'); diff --git a/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts index f8a0a34eb79..4a280e30bb1 100644 --- a/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts +++ b/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts @@ -123,7 +123,7 @@ describe('create firewall', () => { cy.findByText(firewall.label) .closest('tr') .within(() => { - cy.findByText(firewall.label).should('be.visible'); + cy.findByText(firewall.label).should('be.visible'); // FAILED cy.findByText('Enabled').should('be.visible'); cy.findByText('No rules').should('be.visible'); cy.findByText(linode.label).should('be.visible'); diff --git a/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts index a99b70fc142..f9d50935a75 100644 --- a/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts +++ b/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts @@ -41,13 +41,18 @@ describe('delete firewall', () => { cy.visitWithLogin('/firewalls'); // Confirm that firewall is listed and initiate deletion. - cy.findByText(firewall.label) + cy.findByText(firewall.label).should('be.visible'); + + ui.actionMenu + .findByTitle(`Action menu for Firewall ${firewall.label}`) .should('be.visible') - .closest('tr') - .within(() => { - cy.findByText('Delete').should('be.visible'); - cy.findByText('Delete').click(); - }); + .should('be.enabled') + .click(); + ui.actionMenuItem + .findByTitle('Delete') + .should('be.visible') + .should('be.enabled') + .click(); // Cancel deletion when prompted to confirm. ui.dialog @@ -62,13 +67,18 @@ describe('delete firewall', () => { }); // Confirm that firewall is still listed and initiate deletion again. - cy.findByText(firewall.label) + cy.findByText(firewall.label).should('be.visible'); + + ui.actionMenu + .findByTitle(`Action menu for Firewall ${firewall.label}`) .should('be.visible') - .closest('tr') - .within(() => { - cy.findByText('Delete').should('be.visible'); - cy.findByText('Delete').click(); - }); + .should('be.enabled') + .click(); + ui.actionMenuItem + .findByTitle('Delete') + .should('be.visible') + .should('be.enabled') + .click(); // Confirm deletion. ui.dialog @@ -142,29 +152,35 @@ describe('delete firewall', () => { .closest('tr') .within(() => { cy.findByText('DEFAULT').should('be.visible'); - ui.button - .findByTitle('Disable') + + ui.actionMenu + .findByTitle(`Action menu for Firewall ${mockFirewall.label}`) .should('be.visible') - .should('be.disabled') - .focus(); + .should('be.enabled') + .click(); + }); - ui.tooltip - .findByText(DEFAULT_FIREWALL_TOOLTIP_TEXT) - .should('be.visible'); + ui.actionMenuItem + .findByTitle('Disable') + .should('be.visible') + .should('be.disabled') + .focus(); - ui.button - .findByTitle('Delete') - .should('be.visible') - .should('be.disabled') - .focus(); + ui.tooltip.findByText(DEFAULT_FIREWALL_TOOLTIP_TEXT).should('be.visible'); - ui.tooltip - .findByText(DEFAULT_FIREWALL_TOOLTIP_TEXT) - .should('be.visible'); + ui.actionMenuItem + .findByTitle('Delete') + .should('be.visible') + .should('be.disabled') + .focus(); - // Dismiss the tooltip by focusing on another element. - cy.findByText(mockFirewall.label).focus(); - }); + ui.tooltip.findByText(DEFAULT_FIREWALL_TOOLTIP_TEXT).should('be.visible'); + + // Dismiss the tooltip by focusing on another element. + cy.findByText(mockFirewall.label).focus(); + + // Dismiss the action menu by typing the `escape` key. + cy.get('body').type('{esc}'); }); // Confirm that Firewalls that are not designated as default can be disabled @@ -174,14 +190,19 @@ describe('delete firewall', () => { .closest('tr') .within(() => { cy.findByText('DEFAULT').should('not.exist'); - - ui.button - .findByTitle('Disable') - .should('be.visible') - .should('be.enabled') - .click(); }); + ui.actionMenu + .findByTitle(`Action menu for Firewall ${mockFirewallNotDefault.label}`) + .should('be.visible') + .should('be.enabled') + .click(); + ui.actionMenuItem + .findByTitle('Disable') + .should('be.visible') + .should('be.enabled') + .click(); + ui.dialog .findByTitle(`Disable Firewall ${mockFirewallNotDefault.label}?`) .should('be.visible') @@ -189,16 +210,18 @@ describe('delete firewall', () => { ui.button.findByTitle('Cancel').should('be.visible').click(); }); - cy.findByText(mockFirewallNotDefault.label) + cy.findByText(mockFirewallNotDefault.label).should('be.visible'); + + ui.actionMenu + .findByTitle(`Action menu for Firewall ${mockFirewallNotDefault.label}`) .should('be.visible') - .closest('tr') - .within(() => { - ui.button - .findByTitle('Delete') - .should('be.visible') - .should('be.enabled') - .click(); - }); + .should('be.enabled') + .click(); + ui.actionMenuItem + .findByTitle('Delete') + .should('be.visible') + .should('be.enabled') + .click(); ui.dialog .findByTitle(`Delete Firewall ${mockFirewallNotDefault.label}?`) diff --git a/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts index a7b47ce4906..60999c917d6 100644 --- a/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts +++ b/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts @@ -349,10 +349,18 @@ describe('update firewall', () => { .should('be.visible') .closest('tr') .within(() => { - cy.findByText('Disable').should('be.visible'); - cy.findByText('Disable').click(); + ui.actionMenu + .findByTitle(`Action menu for Firewall ${firewall.label}`) + .should('be.visible') + .click(); }); + ui.actionMenuItem + .findByTitle('Disable') + .should('be.visible') + .should('be.enabled') + .click(); + ui.dialog .findByTitle(`Disable Firewall ${firewall.label}?`) .should('be.visible') @@ -378,10 +386,18 @@ describe('update firewall', () => { .should('be.visible') .closest('tr') .within(() => { - cy.findByText('Enable').should('be.visible'); - cy.findByText('Enable').click(); + ui.actionMenu + .findByTitle(`Action menu for Firewall ${firewall.label}`) + .should('be.visible') + .click(); }); + ui.actionMenuItem + .findByTitle('Enable') + .should('be.visible') + .should('be.enabled') + .click(); + ui.dialog .findByTitle(`Enable Firewall ${firewall.label}?`) .should('be.visible') diff --git a/packages/manager/cypress/e2e/core/general/account-login-redirect.spec.ts b/packages/manager/cypress/e2e/core/general/account-login-redirect.spec.ts index b67f7448da7..8bec02bed7d 100644 --- a/packages/manager/cypress/e2e/core/general/account-login-redirect.spec.ts +++ b/packages/manager/cypress/e2e/core/general/account-login-redirect.spec.ts @@ -1,22 +1,49 @@ import { loginBaseUrl } from 'support/constants/login'; import { mockApiRequestWithError } from 'support/intercepts/general'; +import { mockGetSSHKeysError } from 'support/intercepts/profile'; +import { ui } from 'support/ui'; +import { getOrigin } from 'support/util/local-storage'; + +const tokenLocalStorageKey = 'authentication/token'; describe('account login redirect', () => { /** - * The API will return 401 with the body below for all the endpoints. + * The API will return 401 with the body below for all the endpoints if + * - Their token is expired + * - Their token is non-existant + * - Their token is invalid * - * { "errors": [ { "reason": "Your account must be authorized to use this endpoint" } ] } + * { "errors": [ { "reason": "Invalid Token" } ] } */ - it('should redirect to the login page when the user is not authorized', () => { - const errorReason = 'Your account must be authorized to use this endpoint'; - - mockApiRequestWithError(401, errorReason); + it('should redirect to the login page when the API responds with a 401', () => { + mockApiRequestWithError(401, 'Invalid Token'); cy.visitWithLogin('/linodes/create'); cy.url().should('contain', `${loginBaseUrl}/login?`, { exact: false }); }); + it('should remove the authentication token from local storage when the API responds with a 401', () => { + cy.visitWithLogin('/profile'); + + cy.getAllLocalStorage().then((localStorageData) => { + const origin = getOrigin(); + expect(localStorageData[origin][tokenLocalStorageKey]).to.exist; + expect(localStorageData[origin][tokenLocalStorageKey]).to.be.a('string'); + }); + + mockGetSSHKeysError('Invalid Token', 401); + + ui.tabList.findTabByTitle('SSH Keys').click(); + + cy.url().should('contain', `${loginBaseUrl}/login?`, { exact: false }); + + cy.getAllLocalStorage().then((localStorageData) => { + const origin = getOrigin(); + expect(localStorageData[origin][tokenLocalStorageKey]).to.be.undefined; + }); + }); + /** * This test validates that the encoded redirect param is valid and can be properly decoded when the user is redirected to our application. */ @@ -24,7 +51,7 @@ describe('account login redirect', () => { cy.visitWithLogin('/linodes/create?type=Images'); cy.url().should('contain', '/linodes/create'); - cy.clearLocalStorage('authentication/token'); + cy.clearLocalStorage(tokenLocalStorageKey); cy.reload(); cy.url().should( 'contain', diff --git a/packages/manager/cypress/e2e/core/general/analytics.spec.ts b/packages/manager/cypress/e2e/core/general/analytics.spec.ts index 3ac17080cc3..c1d06fed318 100644 --- a/packages/manager/cypress/e2e/core/general/analytics.spec.ts +++ b/packages/manager/cypress/e2e/core/general/analytics.spec.ts @@ -9,6 +9,18 @@ const ADOBE_LAUNCH_URLS = [ describe('Script loading and user interaction test', () => { beforeEach(() => { cy.visitWithLogin('/'); + // Allow Adobe analytics scripts to be loaded for this test only. + // By default, requests to Adobe Analytics URLs get blocked. + // See also `cypress/support/setup/block-analytics.ts`. + cy.intercept( + { + method: '*', + url: 'https://*.adobedtm.com/**/*', + }, + (req) => { + req.continue(); + } + ); }); it("checks if each environment's Adobe Launch script is loaded and the page is responsive to user interaction", () => { diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts index 88a41f98ea7..628ed2d921f 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts @@ -2,7 +2,6 @@ * @file LKE creation end-to-end tests. */ import { - accountBetaFactory, dedicatedTypeFactory, linodeTypeFactory, pluralize, @@ -22,7 +21,6 @@ import { latestKubernetesVersion, } from 'support/constants/lke'; import { mockGetAccount } from 'support/intercepts/account'; -import { mockGetAccountBeta } from 'support/intercepts/betas'; import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags'; import { mockGetLinodeTypes } from 'support/intercepts/linodes'; import { @@ -435,17 +433,8 @@ describe('LKE Cluster Creation with APL enabled', () => { ]; mockAppendFeatureFlags({ apl: true, - aplGeneralAvailability: false, + aplGeneralAvailability: true, }).as('getFeatureFlags'); - mockGetAccountBeta({ - description: - 'Akamai App Platform is a platform that combines developer and operations-centric tools, automation and self-service to streamline the application lifecycle when using Kubernetes. This process will pre-register you for an upcoming beta.', - ended: null, - enrolled: '2024-11-04T21:39:41', - id: 'apl', - label: 'Akamai App Platform Beta', - started: '2024-10-31T18:00:00', - }).as('getAccountBeta'); mockCreateCluster(mockedLKECluster).as('createCluster'); mockGetCluster(mockedLKECluster).as('getCluster'); mockGetClusterPools(mockedLKECluster.id, mockedLKEClusterPools).as( @@ -462,12 +451,7 @@ describe('LKE Cluster Creation with APL enabled', () => { cy.visitWithLogin('/kubernetes/create'); - cy.wait([ - '@getFeatureFlags', - '@getAccountBeta', - '@getLinodeTypes', - '@getLKEClusterTypes', - ]); + cy.wait(['@getFeatureFlags', '@getLinodeTypes', '@getLKEClusterTypes']); // Enter cluster details cy.get('[data-qa-textfield-label="Cluster Label"]') @@ -478,7 +462,9 @@ describe('LKE Cluster Creation with APL enabled', () => { ui.regionSelect.find().click().type(`${clusterRegion.label}{enter}`); cy.findByTestId('apl-label').should('have.text', 'Akamai App Platform'); - cy.findByTestId('apl-beta-chip').should('have.text', 'BETA'); + cy.findByTestId('newFeatureChip') + .should('be.visible') + .should('have.text', 'new'); cy.findByTestId('apl-radio-button-yes').should('be.visible').click(); cy.findByTestId('ha-radio-button-yes').should('be.disabled'); cy.get( @@ -1340,12 +1326,6 @@ describe('LKE Cluster Creation with LKE-E', () => { mockGetControlPlaneACL(mockedEnterpriseCluster.id, mockACL).as( 'getControlPlaneACL' ); - mockGetAccountBeta( - accountBetaFactory.build({ - id: 'apl', - label: 'Akamai App Platform Beta', - }) - ).as('getAccountBeta'); mockGetAccount( accountFactory.build({ capabilities: ['Kubernetes Enterprise'], @@ -1461,9 +1441,9 @@ describe('LKE Cluster Creation with LKE-E', () => { // Confirm the APL section is disabled and unsupported. cy.findByTestId('apl-label').should('be.visible'); - cy.findByTestId('apl-beta-chip').should( + cy.findByTestId('apl-coming-soon-chip').should( 'have.text', - 'BETA - COMING SOON' + 'coming soon' ); cy.findByTestId('apl-radio-button-yes').should('be.disabled'); cy.findByTestId('apl-radio-button-no').within(() => { diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-landing-page.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-landing-page.spec.ts index 2f5036f9daa..237c2ae472a 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-landing-page.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-landing-page.spec.ts @@ -247,6 +247,7 @@ describe('LKE landing page', () => { const cluster = kubernetesClusterFactory.build({ k8s_version: oldVersion, + tier: 'standard', }); const updatedCluster = { ...cluster, k8s_version: newVersion }; @@ -355,17 +356,8 @@ describe('LKE landing page', () => { cy.wait(['@updateCluster', '@getClusters']); - ui.dialog.findByTitle('Upgrade complete').should('be.visible'); - - ui.button - .findByTitle('Recycle All Nodes') - .should('be.visible') - .should('be.enabled') - .click(); - - cy.wait('@recycleAllNodes'); - - ui.toast.assertMessage('Recycle started successfully.'); + // Verify the second step in the banner is not shown for LKE-E. + cy.findByText('Upgrade complete').should('not.exist'); cy.findByText(newVersion).should('be.visible'); }); diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts index 25cfe3dd3cc..dbdcb3f019c 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts @@ -149,6 +149,7 @@ describe('LKE cluster updates', () => { const mockCluster = kubernetesClusterFactory.build({ k8s_version: oldVersion, + tier: 'standard', }); const mockClusterUpdated = { @@ -159,7 +160,8 @@ describe('LKE cluster updates', () => { const upgradePrompt = 'A new version of Kubernetes is available (1.26).'; const upgradeNotes = [ - 'This upgrades the control plane on your cluster and ensures that any new worker nodes are created using the newer Kubernetes version.', + 'This upgrades the control plane on your cluster', + 'and ensures that any new worker nodes are created using the newer Kubernetes version.', // Confirm that the old version and new version are both shown. oldVersion, newVersion, @@ -289,7 +291,8 @@ describe('LKE cluster updates', () => { 'A new version of Kubernetes is available (1.31.1+lke2).'; const upgradeNotes = [ - 'This upgrades the control plane on your cluster and ensures that any new worker nodes are created using the newer Kubernetes version.', + 'This upgrades the control plane on your cluster', + 'Worker nodes within each node pool can then be upgraded separately.', // Confirm that the old version and new version are both shown. oldVersion, newVersion, @@ -342,49 +345,15 @@ describe('LKE cluster updates', () => { // Wait for API response and assert toast message is shown. cy.wait('@updateCluster'); - // Verify the banner goes away because the version update has happened + // Verify the banner is still gone after the flow cy.findByText(upgradePrompt).should('not.exist'); - mockRecycleAllNodes(mockCluster.id).as('recycleAllNodes'); - + // Verify the second step in the banner is not shown for LKE-E. const stepTwoDialogTitle = 'Upgrade complete'; - - ui.dialog - .findByTitle(stepTwoDialogTitle) - .should('be.visible') - .within(() => { - cy.findByText( - 'The cluster’s Kubernetes version has been updated successfully', - { - exact: false, - } - ).should('be.visible'); - - cy.findByText( - 'To upgrade your existing worker nodes, you can recycle all nodes (which may have a performance impact) or perform other upgrade methods.', - { exact: false } - ).should('be.visible'); - - ui.button - .findByTitle('Recycle All Nodes') - .should('be.visible') - .should('be.enabled') - .click(); - }); - - // Verify clicking the "Recycle All Nodes" makes an API call - cy.wait('@recycleAllNodes'); - - // Verify the upgrade dialog closed cy.findByText(stepTwoDialogTitle).should('not.exist'); - // Verify the banner is still gone after the flow - cy.findByText(upgradePrompt).should('not.exist'); - // Verify the version is correct after the update cy.findByText(`Version ${newVersion}`); - - ui.toast.findByMessage('Recycle started successfully.'); }); /* @@ -1051,6 +1020,7 @@ describe('LKE cluster updates', () => { ui.button .findByTitle('Add pool') + .scrollIntoView() .should('be.visible') .should('be.enabled') .click(); diff --git a/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts index d42fe32577c..6211d15746a 100644 --- a/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts @@ -59,7 +59,7 @@ import type { Event, Linode } from '@linode/api-v4'; const getLinodeCloneUrl = (linode: Linode): string => { const regionQuery = `®ionID=${linode.region}`; const typeQuery = linode.type ? `&typeID=${linode.type}` : ''; - return `/linodes/create?linodeID=${linode.id}${regionQuery}&type=Clone+Linode${typeQuery}`; + return `/linodes/create?linodeID=${linode.id}${regionQuery}&type=Clone%20Linode${typeQuery}`; }; authenticate(); @@ -251,7 +251,7 @@ describe('clone linode', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts index d7cacd55378..fd96e194f24 100644 --- a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts @@ -92,7 +92,7 @@ describe('Create Linode with VLANs (Legacy)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button @@ -178,7 +178,7 @@ describe('Create Linode with VLANs (Legacy)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button @@ -333,8 +333,7 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button @@ -415,8 +414,7 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button @@ -494,8 +492,7 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button @@ -576,8 +573,7 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { // Confirm that VLAN attachment is listed in summary, then create Linode. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VLAN Attached').should('be.visible'); + cy.findByText('VLAN').should('be.visible'); }); ui.button diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts index 7b77bfef6c2..8cfa98bd68e 100644 --- a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts @@ -140,7 +140,7 @@ describe('Create Linode with VPCs (Legacy)', () => { // Confirm VPC assignment indicator is shown in Linode summary. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - cy.findByText('VPC Assigned').should('be.visible'); + cy.findByText('VPC').should('be.visible'); }); // Create Linode and confirm contents of outgoing API request payload. @@ -500,8 +500,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { // Confirm VPC assignment indicator is shown in Linode summary. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VPC Assigned').should('be.visible'); + cy.findByText('VPC').should('be.visible'); }); // Create Linode and confirm contents of outgoing API request payload. @@ -640,8 +639,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { // Confirm VPC assignment indicator is shown in Linode summary. cy.get('[data-qa-linode-create-summary]').scrollIntoView(); cy.get('[data-qa-linode-create-summary]').within(() => { - // TODO: M3-9955 Missing info in Summary section - // cy.findByText('VPC Assigned').should('be.visible'); + cy.findByText('VPC').should('be.visible'); }); // Create Linode and confirm contents of outgoing API request payload. diff --git a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts index 835a396b0b7..30f8bf3f87a 100644 --- a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts @@ -230,7 +230,13 @@ describe('Linode Config management', () => { // Confirm that config is listed as expected, then click "Edit". cy.contains(`${config.label} – ${kernel.label}`).should('be.visible'); - cy.findByText('Edit').click(); + + ui.actionMenu + .findByTitle(`Action menu for Linode Config ${config.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem.findByTitle('Edit').should('be.visible').click(); // Enter a new IPAM address for eth1 (VLAN), then click "Save Changes" ui.dialog @@ -290,12 +296,13 @@ describe('Linode Config management', () => { interceptRebootLinode(linode.id).as('rebootLinode'); // Confirm that Linode config is listed, then click its "Boot" button. - cy.findByText(`${config.label} – ${kernel.label}`) + cy.findByText(`${config.label} – ${kernel.label}`).should('be.visible'); + ui.actionMenu + .findByTitle(`Action menu for Linode Config ${config.label}`) .should('be.visible') - .closest('tr') - .within(() => { - cy.findByText('Boot').click(); - }); + .click(); + + ui.actionMenuItem.findByTitle('Boot').should('be.visible').click(); // Proceed through boot confirmation dialog. ui.dialog @@ -664,14 +671,18 @@ describe('Linode Config management', () => { // Find configuration in list and click its "Edit" button. cy.findByLabelText('List of Configurations').within(() => { - cy.findByText(`${mockConfig.label} – ${mockKernel.label}`) - .should('be.visible') - .closest('tr') - .within(() => { - ui.button.findByTitle('Edit').click(); - }); + cy.findByText(`${mockConfig.label} – ${mockKernel.label}`).should( + 'be.visible' + ); }); + ui.actionMenu + .findByTitle(`Action menu for Linode Config ${mockConfig.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem.findByTitle('Edit').should('be.visible').click(); + // Set up mocks for config update. mockGetVLANs(mockVLANs); mockGetVPC(mockVPC).as('getVPC'); @@ -910,15 +921,18 @@ describe('Linode Config management', () => { cy.visitWithLogin(`/linodes/${mockLinode.id}/configurations`); - cy.findByLabelText('List of Configurations') + cy.findByLabelText('List of Configurations').should('be.visible'); + + ui.actionMenu + .findByTitle(`Action menu for Linode Config ${mockConfig.label}`) .should('be.visible') - .within(() => { - ui.button - .findByTitle('Edit') - .should('be.visible') - .should('be.enabled') - .click(); - }); + .click(); + + ui.actionMenuItem + .findByTitle('Edit') + .should('be.visible') + .should('be.enabled') + .click(); // Confirm absence of the interfaces section when editing an existing config. ui.dialog diff --git a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts index 9c25e0ea761..7249eef4ba5 100644 --- a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts @@ -40,11 +40,6 @@ const DISK_RESIZE_SIZE_MB = 768; const deleteInUseDisk = (diskName: string) => { waitForProvision(); - ui.actionMenu - .findByTitle(`Action menu for Disk ${diskName}`) - .should('be.visible') - .click(); - ui.actionMenuItem .findByTitle('Delete') .should('be.visible') @@ -151,9 +146,14 @@ describe('linode storage tab', () => { ui.button.findByTitle('Add a Disk').should('be.disabled'); cy.get(`[data-qa-disk="${diskName}"]`).within(() => { - cy.contains('Resize').should('be.disabled'); + ui.actionMenu + .findByTitle(`Action menu for Disk ${diskName}`) + .should('be.visible') + .click(); }); + ui.actionMenuItem.findByTitle('Resize').should('be.disabled'); + deleteInUseDisk(diskName); ui.button.findByTitle('Add a Disk').should('be.disabled'); @@ -238,9 +238,14 @@ describe('linode storage tab', () => { }); cy.get(`[data-qa-disk="${diskName}"]`).within(() => { - cy.findByText('Resize').should('be.visible').click(); + ui.actionMenu + .findByTitle(`Action menu for Disk ${diskName}`) + .should('be.visible') + .click(); }); + ui.actionMenuItem.findByTitle('Resize').should('be.visible').click(); + ui.drawer .findByTitle(`Resize ${diskName}`) .should('be.visible') diff --git a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts index c70b301fd7e..cf426d672d3 100644 --- a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts @@ -202,34 +202,55 @@ describe('resize linode', () => { // its disk. cy.visitWithLogin(`/linodes/${linode.id}/storage`); - // Power off the Linode to resize the disk - ui.button.findByTitle('Power Off').should('be.visible').click(); + // Check Linode status and power off if needed + cy.findByText('RUNNING').then(($runningStatus) => { + if ($runningStatus.length > 0) { + // Linode is running, need to power it off + ui.actionMenu + .findByTitle(`Action menu for Linode ${linode.label}`) + .click(); - ui.dialog - .findByTitle(`Power Off Linode ${linode.label}?`) - .should('be.visible') - .then(() => { - ui.button - .findByTitle(`Power Off Linode`) + ui.actionMenuItem + .findByTitle('Power Off') .should('be.visible') + .should('be.enabled') .click(); - }); - // Wait for Linode to power off, then resize the disk to 50 GB. - cy.findByText('OFFLINE', { timeout: LINODE_CREATE_TIMEOUT }).should( - 'be.visible' - ); + ui.dialog + .findByTitle(`Power Off Linode ${linode.label}?`) + .should('be.visible') + .within(() => { + ui.button + .findByTitle(`Power Off Linode`) + .should('be.visible') + .click(); + }); + + // Wait for Linode to power off + cy.findByText('OFFLINE', { timeout: LINODE_CREATE_TIMEOUT }).should( + 'be.visible' + ); + } + // If Linode is already offline, continue with the test + }); + cy.findByText(diskName) .should('be.visible') .closest('tr') .within(() => { - ui.button - .findByTitle('Resize') + ui.actionMenu + .findByTitle(`Action menu for Disk ${diskName}`) .should('be.visible') .should('be.enabled') .click(); }); + ui.actionMenuItem + .findByTitle('Resize') + .should('be.visible') + .should('be.enabled') + .click(); + ui.drawer .findByTitle(`Resize ${diskName}`) .should('be.visible') diff --git a/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts b/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts index ae678525720..88ab9e12e04 100644 --- a/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts @@ -82,7 +82,13 @@ describe('switch linode state', () => { ); cy.findByText(linode.label).should('be.visible'); - cy.findByText('Power Off').should('be.visible').click(); + ui.actionMenu + .findByTitle(`Action menu for Linode ${linode.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem.findByTitle('Power Off').should('be.visible').click(); + ui.dialog .findByTitle(`Power Off Linode ${linode.label}?`) .should('be.visible') @@ -161,7 +167,13 @@ describe('switch linode state', () => { ); cy.findByText(linode.label).should('be.visible'); - cy.findByText('Power On').should('be.visible').click(); + ui.actionMenu + .findByTitle(`Action menu for Linode ${linode.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem.findByTitle('Power On').should('be.visible').click(); + ui.dialog .findByTitle(`Power On Linode ${linode.label}?`) .should('be.visible') @@ -247,7 +259,13 @@ describe('switch linode state', () => { ); cy.findByText(linode.label).should('be.visible'); - cy.findByText('Reboot').should('be.visible').click(); + ui.actionMenu + .findByTitle(`Action menu for Linode ${linode.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem.findByTitle('Reboot').should('be.visible').click(); + ui.dialog .findByTitle(`Reboot Linode ${linode.label}?`) .should('be.visible') diff --git a/packages/manager/cypress/e2e/core/linodes/upgrade-linode-interface.spec.ts b/packages/manager/cypress/e2e/core/linodes/upgrade-linode-interface.spec.ts index 95c1dbcd082..2cc7e4d58b5 100644 --- a/packages/manager/cypress/e2e/core/linodes/upgrade-linode-interface.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/upgrade-linode-interface.spec.ts @@ -89,15 +89,14 @@ describe('upgrade to new Linode Interface flow', () => { cy.get('[data-testid="Configurations"]').should('be.visible').click(); - cy.findByLabelText('List of Configurations') + cy.findByLabelText('List of Configurations').should('be.visible'); + + ui.actionMenu + .findByTitle(`Action menu for Linode Config ${mockConfig.label}`) .should('be.visible') - .within(() => { - ui.button - .findByTitle('Edit') - .should('be.visible') - .should('be.enabled') - .click(); - }); + .click(); + + ui.actionMenuItem.findByTitle('Edit').should('be.visible').click(); // Confirm absence of the interfaces section when editing an existing config. ui.dialog @@ -373,7 +372,7 @@ describe('upgrade to new Linode Interface flow', () => { }); // Confirm can navigate to Linode after success - cy.url().should('endWith', `linodes/${mockLinode.id}`); + cy.url().should('endWith', `linodes/${mockLinode.id}/configurations`); }); /* diff --git a/packages/manager/cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts b/packages/manager/cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts index 4bcf0b1f6ed..ab42ce93398 100644 --- a/packages/manager/cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts +++ b/packages/manager/cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts @@ -21,8 +21,8 @@ describe('Event fetching and polling', () => { mockGetEvents([]).as('getEvents'); - cy.clock(mockNow.toJSDate()); cy.visitWithLogin('/'); + cy.clock(mockNow.toJSDate()); cy.wait('@getEvents').then((xhr) => { const filters = xhr.request.headers['x-filter']; const lastWeekTimestamp = mockNow @@ -122,11 +122,10 @@ describe('Event fetching and polling', () => { mockGetEvents([mockEvent]).as('getEventsInitialFetches'); + cy.visitWithLogin('/'); // We need access to the `clock` object directly since we cannot call `cy.clock()` inside // a `should(() => {})` callback because Cypress commands are disallowed there. cy.clock(mockNow.toJSDate()).then((clock) => { - cy.visitWithLogin('/'); - // Confirm that Cloud manager polls the requests endpoint no more than // once every 16 seconds. mockGetEventsPolling([mockEvent], mockNowTimestamp).as('getEventsPoll'); @@ -191,11 +190,11 @@ describe('Event fetching and polling', () => { // initial polling request. mockGetEvents(mockEvents).as('getEventsInitialFetches'); + cy.visitWithLogin('/'); + // We need access to the `clock` object directly since we cannot call `cy.clock()` inside // a `should(() => {})` callback because Cypress commands are disallowed there. cy.clock(Date.now()).then((clock) => { - cy.visitWithLogin('/'); - // Confirm that Cloud manager polls the requests endpoint no more than once // every 2 seconds. mockGetEventsPolling(mockEvents, mockNowTimestamp).as('getEventsPoll'); diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts index ad30bf81a72..28bfbc2dd53 100644 --- a/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts +++ b/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts @@ -12,12 +12,13 @@ import { vpcLinodeInterfaceShutDownNotice, } from 'support/constants/vpc'; import { - mockCreateLinodeConfigInterfaces, + mockAppendConfigInterface, mockDeleteLinodeConfigInterface, + mockGetLinodeConfig, mockGetLinodeConfigs, } from 'support/intercepts/configs'; import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags'; -import { mockGetLinodes } from 'support/intercepts/linodes'; +import { mockGetLinode, mockGetLinodes } from 'support/intercepts/linodes'; import { mockCreateSubnet, mockGetSubnet, @@ -164,11 +165,159 @@ describe('VPC assign/unassign flows', () => { .should('be.visible') .click(); + // Auto-assign IPv4 checkbox checked by default + cy.findByLabelText( + 'Auto-assign a VPC IPv4 address for this Linode' + ).should('be.checked'); + cy.wait('@getLinodeConfigs'); - mockCreateLinodeConfigInterfaces(mockLinode.id, mockConfig).as( - 'createLinodeConfigInterfaces' + mockAppendConfigInterface( + mockLinode.id, + mockConfig.id, + linodeConfigInterfaceFactoryWithVPC.build() + ).as('appendConfigInterface'); + mockGetVPC(mockVPCAfterLinodeAssignment).as('getVPCLinodeAssignment'); + mockGetSubnets(mockVPC.id, [mockSubnetAfterLinodeAssignment]).as( + 'getSubnetsLinodeAssignment' + ); + ui.button + .findByTitle('Assign Linode') + .should('be.visible') + .should('be.enabled') + .click(); + cy.wait([ + '@appendConfigInterface', + '@getVPCLinodeAssignment', + '@getSubnetsLinodeAssignment', + ]); + + ui.button + .findByTitle('Done') + .should('be.visible') + .should('be.enabled') + .click(); + }); + + cy.get('[data-qa-table-row="collapsible-table-headers-row"]') + .siblings('tbody') + .within(() => { + // after assigning Linode(s) to a VPC, VPC page increases number in 'Linodes' column + cy.findByText('1').should('be.visible'); + }); + }); + + it('can assign a Linode without auto-assigning an IPv4 to a VPC', () => { + const mockVPCInterface = linodeConfigInterfaceFactoryWithVPC.build({ + ipv4: { + nat_1_1: '172.111.111.111', + vpc: '10.0.0.7', + }, + ip_ranges: [], + }); + const mockUpdatedConfig: Config = { + ...mockConfig, + interfaces: [mockVPCInterface], + }; + + const mockSubnet = subnetFactory.build({ + id: randomNumber(2), + label: randomLabel(), + linodes: [], + }); + + const mockVPC = vpcFactory.build({ + id: randomNumber(), + label: randomLabel(), + subnets: [mockSubnet], + }); + + const mockSubnetAfterLinodeAssignment = subnetFactory.build({ + ...mockSubnet, + linodes: [ + { + id: mockLinode.id, + interfaces: [ + { + config_id: mockConfig.id, + active: true, + id: mockVPCInterface.id, + }, + ], + }, + ], + }); + + const mockVPCAfterLinodeAssignment = vpcFactory.build({ + ...mockVPC, + subnets: [mockSubnetAfterLinodeAssignment], + }); + + mockGetVPC(mockVPC).as('getVPC'); + mockGetSubnets(mockVPC.id, [mockSubnet]).as('getSubnets'); + mockGetSubnet(mockVPC.id, mockSubnet.id, mockSubnet); + mockGetLinodes([mockLinode]).as('getLinodes'); + + cy.visitWithLogin(`/vpcs/${mockVPC.id}`); + cy.wait(['@getVPC', '@getSubnets', '@getFeatureFlags']); + + // confirm that vpc and subnet details get displayed + cy.findByText(mockVPC.label).should('be.visible'); + cy.findByText('Subnets (1)'); + cy.findByText(mockSubnet.label).should('be.visible'); + + // assign a linode to the subnet + ui.actionMenu + .findByTitle(`Action menu for Subnet ${mockSubnet.label}`) + .should('be.visible') + .click(); + + ui.actionMenuItem + .findByTitle('Assign Linodes') + .should('be.visible') + .click(); + + ui.drawer + .findByTitle(`Assign Linodes to subnet: ${mockSubnet.label} (0.0.0.0/0)`) + .should('be.visible') + .within(() => { + // confirm that the user is warned that a reboot / shutdown is required + cy.findByText(vpcLinodeInterfaceShutDownNotice).should('be.visible'); + cy.findByText(vpcConfigProfileInterfaceRebootNotice).should( + 'be.visible' + ); + + ui.button + .findByTitle('Assign Linode') + .should('be.visible') + .should('be.disabled'); + + mockGetLinodeConfigs(mockLinode.id, [mockConfig]).as( + 'getLinodeConfigs' ); + cy.findByLabelText('Linode').should('be.visible').click(); + cy.focused().type(mockLinode.label); + cy.focused().should('have.value', mockLinode.label); + + ui.autocompletePopper + .findByTitle(mockLinode.label) + .should('be.visible') + .click(); + + // Uncheck auto-assign checkbox and type in VPC IPv4 + cy.findByLabelText('Auto-assign a VPC IPv4 address for this Linode') + .should('be.checked') + .click(); + cy.findByLabelText('VPC IPv4').should('be.visible').click(); + cy.focused().type(mockVPCInterface.ipv4?.vpc ?? '10.0.0.7'); + + cy.wait('@getLinodeConfigs'); + + mockAppendConfigInterface( + mockLinode.id, + mockConfig.id, + mockVPCInterface + ).as('appendConfigInterface'); mockGetVPC(mockVPCAfterLinodeAssignment).as('getVPCLinodeAssignment'); mockGetSubnets(mockVPC.id, [mockSubnetAfterLinodeAssignment]).as( 'getSubnetsLinodeAssignment' @@ -179,7 +328,7 @@ describe('VPC assign/unassign flows', () => { .should('be.enabled') .click(); cy.wait([ - '@createLinodeConfigInterfaces', + '@appendConfigInterface', '@getVPCLinodeAssignment', '@getSubnetsLinodeAssignment', ]); @@ -191,12 +340,22 @@ describe('VPC assign/unassign flows', () => { .click(); }); + mockGetLinode(mockLinode.id, mockLinode).as('getLinodes'); + mockGetLinodeConfig(mockLinode.id, mockUpdatedConfig).as('getLinodeConfig'); + cy.get('[data-qa-table-row="collapsible-table-headers-row"]') .siblings('tbody') .within(() => { // after assigning Linode(s) to a VPC, VPC page increases number in 'Linodes' column cy.findByText('1').should('be.visible'); }); + + // confirm VPC IPv4 matches mock + cy.findByLabelText(`expand ${mockSubnet.label} row`) + .should('be.visible') + .should('be.enabled') + .click(); + cy.findByText('10.0.0.7'); }); /* diff --git a/packages/manager/cypress/support/e2e.ts b/packages/manager/cypress/support/e2e.ts index ae88f94a9f1..7c1503df93a 100644 --- a/packages/manager/cypress/support/e2e.ts +++ b/packages/manager/cypress/support/e2e.ts @@ -61,6 +61,7 @@ chai.use(function (chai, utils) { }); // Test setup. +import { blockAnalytics } from './setup/block-analytics'; import { deleteInternalHeader } from './setup/delete-internal-header'; import { mockFeatureFlagClientstream } from './setup/feature-flag-clientstream'; import { mockAccountRequest } from './setup/mock-account-request'; @@ -72,3 +73,4 @@ mockAccountRequest(); mockFeatureFlagRequests(); mockFeatureFlagClientstream(); deleteInternalHeader(); +blockAnalytics(); diff --git a/packages/manager/cypress/support/intercepts/configs.ts b/packages/manager/cypress/support/intercepts/configs.ts index 467ac166ed9..5a312f0d686 100644 --- a/packages/manager/cypress/support/intercepts/configs.ts +++ b/packages/manager/cypress/support/intercepts/configs.ts @@ -206,13 +206,14 @@ export const mockCreateLinodeConfigs = ( * * @returns Cypress chainable. */ -export const mockCreateLinodeConfigInterfaces = ( +export const mockAppendConfigInterface = ( linodeId: number, - config: Config + configId: number, + iface: Interface ): Cypress.Chainable => { return cy.intercept( 'POST', - apiMatcher(`linode/instances/${linodeId}/configs/${config.id}/interfaces`), - config.interfaces ?? undefined + apiMatcher(`linode/instances/${linodeId}/configs/${configId}/interfaces`), + iface ); }; diff --git a/packages/manager/cypress/support/intercepts/linodes.ts b/packages/manager/cypress/support/intercepts/linodes.ts index e6459c25926..f6d42673ea7 100644 --- a/packages/manager/cypress/support/intercepts/linodes.ts +++ b/packages/manager/cypress/support/intercepts/linodes.ts @@ -102,6 +102,25 @@ export const interceptGetLinode = ( return cy.intercept('GET', apiMatcher(`linode/instances/${linodeId}`)); }; +/** + * Intercepts GET request to get a Linode and mocks response + * + * @param linodeId - ID of Linode to fetch. + * @param linode - linode to return + * + * @returns Cypress chainable. + */ +export const mockGetLinode = ( + linodeId: number, + linode: Linode +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher(`linode/instances/${linodeId}`), + makeResponse(linode) + ); +}; + /** * Intercepts GET request to get all Linodes. * diff --git a/packages/manager/cypress/support/intercepts/maintenance.ts b/packages/manager/cypress/support/intercepts/maintenance.ts new file mode 100644 index 00000000000..fbbac65d657 --- /dev/null +++ b/packages/manager/cypress/support/intercepts/maintenance.ts @@ -0,0 +1,20 @@ +import { apiMatcher } from 'support/util/intercepts'; +import { paginateResponse } from 'support/util/paginate'; + +import type { MaintenancePolicy } from '@linode/api-v4'; + +/** + * Intercepts request to retrieve maintenance policies and mocks the response. + * + * @param policies - Maintenance policies with which to mock response. + * + * @returns Cypress chainable. + */ +export const mockGetMaintenancePolicies = ( + policies: MaintenancePolicy[] +): Cypress.Chainable => { + return cy.intercept( + apiMatcher('maintenance/policies*'), + paginateResponse(policies) + ); +}; diff --git a/packages/manager/cypress/support/intercepts/profile.ts b/packages/manager/cypress/support/intercepts/profile.ts index cff28207bf3..b2c93eaf4d6 100644 --- a/packages/manager/cypress/support/intercepts/profile.ts +++ b/packages/manager/cypress/support/intercepts/profile.ts @@ -425,6 +425,25 @@ export const mockGetSSHKeys = (sshKeys: SSHKey[]): Cypress.Chainable => { ); }; +/** + * Intercepts GET request to fetch SSH keys and mocks an error response. + * + * @param errorMessage - Error message to include in mock error response. + * @param status - HTTP status for mock error response. + * + * @returns Cypress chainable. + */ +export const mockGetSSHKeysError = ( + errorMessage: string, + status: number = 400 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher('/profile/sshkeys*'), + makeErrorResponse(errorMessage, status) + ); +}; + /** * Intercepts GET request to fetch an SSH key and mocks the response. * diff --git a/packages/manager/cypress/support/setup/block-analytics.ts b/packages/manager/cypress/support/setup/block-analytics.ts new file mode 100644 index 00000000000..22ff9fd4cfa --- /dev/null +++ b/packages/manager/cypress/support/setup/block-analytics.ts @@ -0,0 +1,42 @@ +/** + * Block HTTP requests to domains needed by our analytics and monitoring scripts. + * + * This is intended to avoid sending data resulting from e.g. running our tests + * against environments where analytics scripts are present. + */ +export const blockAnalytics = () => { + const blockPatterns = [ + // Akamai mPulse. + 'https://*.akstat.io/*', + 'https://*.akstat.io/**/*', + 'https://*.go-mpulse.net/**/*', + + // Akamai (Unknown). + 'https://*.akamaihd.net/**/*', + + // Sentry + 'https://*.ingest.sentry.io/**/*', + + // Adobe Analytics/DTM + 'https://*.adobedtm.com/**/*', + + // New Relic + 'https://js-agent.newrelic.com/*', + 'https://js-agent.newrelic.com/**/*', + 'https://bam.nr-data.net/**/*', + ]; + + beforeEach(() => { + blockPatterns.forEach((pattern) => { + cy.intercept( + { + method: '*', + url: pattern, + }, + (req) => { + req.destroy(); + } + ); + }); + }); +}; diff --git a/packages/manager/cypress/support/ui/buttons.ts b/packages/manager/cypress/support/ui/buttons.ts index 2ccfe45567b..d54dad6188c 100644 --- a/packages/manager/cypress/support/ui/buttons.ts +++ b/packages/manager/cypress/support/ui/buttons.ts @@ -62,3 +62,20 @@ export const buttonGroup = { .closest('button'); }, }; + +export const cdsButton = { + /** + * Finds a cds button within shadow DOM by its title and returns the Cypress chainable. + * + * @param cdsButtonTitle - Title of cds button to find + * + * @returns Cypress chainable. + */ + findButtonByTitle: (cdsButtonTitle: string): Cypress.Chainable => { + return cy + .findByText(cdsButtonTitle) + .closest('cds-button') + .shadow() + .find('button'); + }, +}; diff --git a/packages/manager/cypress/support/util/local-storage.ts b/packages/manager/cypress/support/util/local-storage.ts index db748cb4105..710217069b5 100644 --- a/packages/manager/cypress/support/util/local-storage.ts +++ b/packages/manager/cypress/support/util/local-storage.ts @@ -2,6 +2,20 @@ * @file Utilities to access and validate Local Storage data. */ +/** + * Gets the Cloud Manager origin for the purposes of testing localstorage + * + * @returns the Cloud Manager origin + */ +export const getOrigin = () => { + const origin = Cypress.config('baseUrl'); + if (!origin) { + // This should never happen in practice. + throw new Error('Unable to retrieve Cypress base URL configuration'); + } + return origin; +}; + /** * Asserts that a local storage item has a given value. * @@ -10,11 +24,7 @@ */ export const assertLocalStorageValue = (key: string, value: any) => { cy.getAllLocalStorage().then((localStorageData: any) => { - const origin = Cypress.config('baseUrl'); - if (!origin) { - // This should never happen in practice. - throw new Error('Unable to retrieve Cypress base URL configuration'); - } + const origin = getOrigin(); if (!localStorageData[origin]) { throw new Error( `Unable to retrieve local storage data from origin '${origin}'` diff --git a/packages/manager/eslint.config.js b/packages/manager/eslint.config.js index 7b5fbd8dd72..0de8306be5e 100644 --- a/packages/manager/eslint.config.js +++ b/packages/manager/eslint.config.js @@ -418,6 +418,7 @@ export const baseConfig = [ 'src/features/IAM/**/*', 'src/features/Images/**/*', 'src/features/Kubernetes/**/*', + 'src/features/Linodes/**/*', 'src/features/Longview/**/*', 'src/features/Managed/**/*', 'src/features/NodeBalancers/**/*', diff --git a/packages/manager/package.json b/packages/manager/package.json index 85cec5cae60..b9429f8ca8f 100644 --- 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.145.0", + "version": "1.146.0", "private": true, "type": "module", "bugs": { @@ -45,7 +45,7 @@ "@tanstack/react-query-devtools": "5.51.24", "@tanstack/react-router": "^1.111.11", "@xterm/xterm": "^5.5.0", - "akamai-cds-react-components": "0.0.1-alpha.6", + "akamai-cds-react-components": "0.0.1-alpha.11", "algoliasearch": "^4.14.3", "axios": "~1.8.3", "braintree-web": "^3.92.2", diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx index ec9db86268a..4b50f49f28f 100644 --- a/packages/manager/src/App.tsx +++ b/packages/manager/src/App.tsx @@ -14,15 +14,13 @@ import { useAdobeAnalytics } from './hooks/useAdobeAnalytics'; import { useInitialRequests } from './hooks/useInitialRequests'; import { useNewRelic } from './hooks/useNewRelic'; import { usePendo } from './hooks/usePendo'; +import { useSessionExpiryToast } from './hooks/useSessionExpiryToast'; import { MainContent } from './MainContent'; import { useEventsPoller } from './queries/events/events'; // import { Router } from './Router'; import { useSetupFeatureFlags } from './useSetupFeatureFlags'; -// Ensure component's display name is 'App' -export const App = () => ; - -const BaseApp = withDocumentTitleProvider( +export const App = withDocumentTitleProvider( withFeatureFlagProvider(() => { const { isLoading } = useInitialRequests(); @@ -63,5 +61,6 @@ const GlobalListeners = () => { useAdobeAnalytics(); usePendo(); useNewRelic(); + useSessionExpiryToast(); return null; }; diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx index 54c01403d56..635f8815806 100644 --- a/packages/manager/src/MainContent.tsx +++ b/packages/manager/src/MainContent.tsx @@ -105,12 +105,6 @@ const useStyles = makeStyles()((theme: Theme) => ({ }, })); -const LinodesRoutes = React.lazy(() => - import('src/features/Linodes').then((module) => ({ - default: module.LinodesRoutes, - })) -); - export const MainContent = () => { const contentRef = React.useRef(null); const { classes, cx } = useStyles(); @@ -273,10 +267,6 @@ export const MainContent = () => { }> - {/** We don't want to break any bookmarks. This can probably be removed eventually. */} diff --git a/packages/manager/src/OAuth/LoginAsCustomerCallback.tsx b/packages/manager/src/OAuth/LoginAsCustomerCallback.tsx new file mode 100644 index 00000000000..4b67b40ddc3 --- /dev/null +++ b/packages/manager/src/OAuth/LoginAsCustomerCallback.tsx @@ -0,0 +1,42 @@ +import * as Sentry from '@sentry/react'; +import React, { useEffect } from 'react'; +import type { RouteComponentProps } from 'react-router-dom'; + +import { SplashScreen } from 'src/components/SplashScreen'; +import { + clearStorageAndRedirectToLogout, + handleLoginAsCustomerCallback, +} from 'src/OAuth/oauth'; + +/** + * This component is similar to the OAuth component, in that it's main + * purpose is to consume the data given from the hash params provided from + * where the user was navigated from. In the case of this component, the user + * was navigated from Admin and the query params differ from what they would be + * if the user navigated from Login. Further, we are doing no nonce checking here. + * + * Admin will redirect to Cloud Manager with a URL like: + * https://cloud.linode.com/admin/callback#access_token=fjhwehkfg&destination=dashboard&expires_in=900&token_type=Admin + */ +export const LoginAsCustomerCallback = (props: RouteComponentProps) => { + const authenticate = async () => { + try { + const { returnTo } = await handleLoginAsCustomerCallback({ + params: location.hash.substring(1), // substring is called to remove the leading "#" from the hash params + }); + + props.history.push(returnTo); + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + Sentry.captureException(error); + clearStorageAndRedirectToLogout(); + } + }; + + useEffect(() => { + authenticate(); + }, []); + + return ; +}; diff --git a/packages/manager/src/layouts/Logout.tsx b/packages/manager/src/OAuth/Logout.tsx similarity index 58% rename from packages/manager/src/layouts/Logout.tsx rename to packages/manager/src/OAuth/Logout.tsx index 6dc1aeebb4b..86f66237f07 100644 --- a/packages/manager/src/layouts/Logout.tsx +++ b/packages/manager/src/OAuth/Logout.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import React, { useEffect } from 'react'; import { SplashScreen } from 'src/components/SplashScreen'; -import { logout } from 'src/OAuth/utils'; +import { logout } from 'src/OAuth/oauth'; export const Logout = () => { - React.useEffect(() => { + useEffect(() => { logout(); }, []); diff --git a/packages/manager/src/OAuth/OAuthCallback.tsx b/packages/manager/src/OAuth/OAuthCallback.tsx new file mode 100644 index 00000000000..3775f135f12 --- /dev/null +++ b/packages/manager/src/OAuth/OAuthCallback.tsx @@ -0,0 +1,36 @@ +import * as Sentry from '@sentry/react'; +import React from 'react'; +import type { RouteComponentProps } from 'react-router-dom'; + +import { SplashScreen } from 'src/components/SplashScreen'; + +import { clearStorageAndRedirectToLogout, handleOAuthCallback } from './oauth'; + +/** + * Login will redirect back to Cloud Manager with a URL like: + * https://cloud.linode.com/oauth/callback?returnTo=%2F&state=066a6ad9-b19a-43bb-b99a-ef0b5d4fc58d&code=42ddf75dfa2cacbad897 + * + * We will handle taking the code, turning it into an access token, and start a Cloud Manager session. + */ +export const OAuthCallback = (props: RouteComponentProps) => { + const authenticate = async () => { + try { + const { returnTo } = await handleOAuthCallback({ + params: location.search, + }); + + props.history.push(returnTo); + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + Sentry.captureException(error); + clearStorageAndRedirectToLogout(); + } + }; + + React.useEffect(() => { + authenticate(); + }, []); + + return ; +}; diff --git a/packages/manager/src/OAuth/constants.ts b/packages/manager/src/OAuth/constants.ts new file mode 100644 index 00000000000..2ce00bb1790 --- /dev/null +++ b/packages/manager/src/OAuth/constants.ts @@ -0,0 +1,58 @@ +import { getEnvLocalStorageOverrides } from 'src/utilities/storage'; + +const DEFAULT_APP_ROOT = 'http://localhost:3000'; +const DEFAULT_LOGIN_ROOT = 'https://login.linode.com'; + +/** + * Use this as the source of truth for getting the login server's root URL. + * + * Specify a `REACT_APP_LOGIN_ROOT` in your environment to set this value. + * + * In local dev, this URL may be pulled from localstorage to allow for environment switching. + * + * @returns The Login server's root URL + * @default https://login.linode.com + */ +export function getLoginURL() { + const localStorageOverrides = getEnvLocalStorageOverrides(); + + return ( + localStorageOverrides?.loginRoot ?? + import.meta.env.REACT_APP_LOGIN_ROOT ?? + DEFAULT_LOGIN_ROOT + ); +} + +/** + * Use this as the source of truth for getting the app's client id. + * + * `REACT_APP_CLIENT_ID` is required for the app to function + * + * You can generate a client id by navigating to https://cloud.linode.com/profile/clients + * + * In local dev, a CLIENT_ID may be pulled from localstorage to allow for environment switching. + */ +export function getClientId() { + const localStorageOverrides = getEnvLocalStorageOverrides(); + + const clientId = + localStorageOverrides?.clientID ?? import.meta.env.REACT_APP_CLIENT_ID; + + if (!clientId) { + throw new Error('No CLIENT_ID specified.'); + } + + return clientId; +} + +/** + * Use this as the source of truth for getting the app's root URL. + * + * Specify a `REACT_APP_APP_ROOT` in your environment to set this value. + * + * @returns The apps root URL + * @default http://localhost:3000 + */ +export function getAppRoot() { + return import.meta.env.REACT_APP_APP_ROOT ?? DEFAULT_APP_ROOT; +} diff --git a/packages/manager/src/OAuth/oauth.test.tsx b/packages/manager/src/OAuth/oauth.test.tsx new file mode 100644 index 00000000000..92029f12fa8 --- /dev/null +++ b/packages/manager/src/OAuth/oauth.test.tsx @@ -0,0 +1,318 @@ +import { http, HttpResponse, server } from 'src/mocks/testServer'; +import { storage } from 'src/utilities/storage'; + +import { + generateOAuthAuthorizeEndpoint, + getIsLoggedInAsCustomer, + handleLoginAsCustomerCallback, + handleOAuthCallback, + logout, +} from './oauth'; + +import type { TokenResponse } from './types'; + +describe('getIsLoggedInAsCustomer', () => { + it('returns true if an Admin token is stored', () => { + storage.authentication.token.set( + 'Admin d245a30e8fe88dce34f44772bf922d94b606fe6thisisfakesodontcomplaindf51ce87f7e68' + ); + + expect(getIsLoggedInAsCustomer()).toBe(true); + }); + + it('returns false if a Bearer token is stored', () => { + storage.authentication.token.set( + 'Bearer d245a30e8fe88dce34f44772bf922d94b606fe6thisisfakesodontcomplaindf51c8ea87df' + ); + + expect(getIsLoggedInAsCustomer()).toBe(false); + }); +}); + +describe('generateOAuthAuthorizeEndpoint', () => { + beforeAll(() => { + vi.stubEnv('REACT_APP_APP_ROOT', 'https://cloud.fake.linode.com'); + vi.stubEnv('REACT_APP_LOGIN_ROOT', 'https://login.fake.linode.com'); + vi.stubEnv('REACT_APP_CLIENT_ID', '9l424eefake9h4fead4d09'); + }); + + afterAll(() => { + vi.unstubAllEnvs(); + }); + + it('includes the CLIENT_ID from the env', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url).toContain('client_id=9l424eefake9h4fead4d09'); + }); + + it('includes the LOGIN_ROOT from the env', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url.startsWith('https://login.fake.linode.com')).toBe(true); + }); + + it('includes the redirect_uri based on the APP_ROOT from the env and the returnTo path', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url).toContain( + 'redirect_uri=https%3A%2F%2Fcloud.fake.linode.com%2Foauth%2Fcallback%3FreturnTo%3D%2Flinodes' + ); + }); + + it('includes the expected code_challenge_method', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url).toContain('code_challenge_method=S256'); + }); + + it('includes the expected respone_type', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url).toContain('response_type=code'); + }); + + it('includes a code_challenge', async () => { + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + expect(url).toContain('code_challenge='); + }); + + it('generates a "state" (aka nonce), stores it in local storage, and includes it in the url', async () => { + storage.authentication.nonce.clear(); + + expect(storage.authentication.nonce.get()).toBeNull(); + + const url = await generateOAuthAuthorizeEndpoint('/linodes'); + + const nonceInStorage = storage.authentication.nonce.get(); + + expect(nonceInStorage).toBeDefined(); + expect(url).toContain(`state=${nonceInStorage}`); + }); + + it('generates a code verifier and stores it in local storage', async () => { + storage.authentication.codeVerifier.clear(); + + expect(storage.authentication.codeVerifier.get()).toBeNull(); + + await generateOAuthAuthorizeEndpoint('/linodes'); + + const codeVerifierInStorage = storage.authentication.codeVerifier.get(); + + expect(codeVerifierInStorage).toBeDefined(); + }); +}); + +describe('handleOAuthCallback', () => { + beforeAll(() => { + vi.stubEnv('REACT_APP_CLIENT_ID', 'fgejgjefejhg'); + }); + afterAll(() => { + vi.unstubAllEnvs(); + }); + + it('should throw if the callback search params are empty', async () => { + await expect(handleOAuthCallback({ params: '' })).rejects.toThrowError( + 'Error parsing search params on OAuth callback.' + ); + }); + + it('should throw if the callback search params are not valid (the "state" param is missing)', async () => { + await expect( + handleOAuthCallback({ + params: '?returnTo=%2F&code=42ddf75dfa2cacbad897', + }) + ).rejects.toThrowError('Error parsing search params on OAuth callback.'); + }); + + it('should throw if there is no code verifier found in local storage', async () => { + storage.authentication.codeVerifier.clear(); + + await expect( + handleOAuthCallback({ + params: 'state=fehgefhgkefghk&code=gyuwyutfetyfew', + }) + ).rejects.toThrowError( + 'No code codeVerifier found in local storage when running OAuth callback.' + ); + }); + + it('should throw if there is no nonce found in local storage', async () => { + storage.authentication.codeVerifier.set('fakecodeverifier'); + storage.authentication.nonce.clear(); + + await expect( + handleOAuthCallback({ + params: 'state=fehgefhgkefghk&code=gyuwyutfetyfew', + }) + ).rejects.toThrowError( + 'No nonce found in local storage when running OAuth callback.' + ); + }); + + it('should throw if the nonce in local storage does not match the "state" sent back by login', async () => { + storage.authentication.codeVerifier.set('fakecodeverifier'); + storage.authentication.nonce.set('fakenonce'); + + await expect( + handleOAuthCallback({ + params: 'state=incorrectnonce&code=gyuwyutfetyfew', + }) + ).rejects.toThrowError( + 'Stored nonce is not the same nonce as the one sent by login.' + ); + }); + + it('should throw if the request to /oauth/token was unsuccessful', async () => { + storage.authentication.codeVerifier.set('fakecodeverifier'); + storage.authentication.nonce.set('fakenonce'); + + server.use( + http.post('*/oauth/token', () => { + return HttpResponse.json( + { error: 'Login server error.' }, + { status: 500 } + ); + }) + ); + + await expect( + handleOAuthCallback({ + params: 'state=fakenonce&code=gyuwyutfetyfew', + }) + ).rejects.toThrowError('Request to POST /oauth/token was not ok.'); + }); + + it('should throw if the /oauth/token response is not valid JSON', async () => { + storage.authentication.codeVerifier.set('fakecodeverifier'); + storage.authentication.nonce.set('fakenonce'); + + server.use( + http.post('*/oauth/token', () => { + return HttpResponse.xml(``); + }) + ); + + await expect( + handleOAuthCallback({ + params: 'state=fakenonce&code=gyuwyutfetyfew', + }) + ).rejects.toThrowError( + 'Unable to parse the response of POST /oauth/token as JSON.' + ); + }); + + it('should store an auth token and return data if the request to /oauth/token was successful', async () => { + storage.authentication.codeVerifier.set('fakecodeverifier'); + storage.authentication.nonce.set('fakenonce'); + storage.authentication.token.clear(); + + const tokenResponse: TokenResponse = { + access_token: 'fakeaccesstoken', + expires_in: 7200, + refresh_token: null, + scopes: '*', + token_type: 'bearer', + }; + + server.use( + http.post('*/oauth/token', () => { + return HttpResponse.json(tokenResponse); + }) + ); + + const result = await handleOAuthCallback({ + params: 'state=fakenonce&code=gyuwyutfetyfew&returnTo=/profile', + }); + + expect(storage.authentication.token.get()).toBe('Bearer fakeaccesstoken'); + + expect(result).toStrictEqual({ + returnTo: '/profile', + expiresIn: 7200, + }); + }); +}); + +describe('handleLoginAsCustomerCallback', () => { + it('should throw if the callback hash params are empty', async () => { + await expect( + handleLoginAsCustomerCallback({ params: '' }) + ).rejects.toThrowError( + 'Unable to login as customer. Admin did not send expected params in location hash.' + ); + }); + + it('should throw if any of the callback hash params are invalid (expires_in is not a number)', async () => { + await expect( + handleLoginAsCustomerCallback({ + params: + 'access_token=fjhwehkfg&destination=dashboard&expires_in=invalidexpire&token_type=Admin', + }) + ).rejects.toThrowError( + 'Unable to login as customer. Admin did not send expected params in location hash.' + ); + }); + + it('should throw if any of the callback hash params are invalid (access_token is missing in the params)', async () => { + await expect( + handleLoginAsCustomerCallback({ + params: + 'destination=dashboard&expires_in=invalidexpire&token_type=Admin', + }) + ).rejects.toThrowError( + 'Unable to login as customer. Admin did not send expected params in location hash.' + ); + }); + + it('should set the token in local storage and return data if there are no errors', async () => { + storage.authentication.token.clear(); + + const result = await handleLoginAsCustomerCallback({ + params: + 'access_token=fakeadmintoken&destination=dashboard&expires_in=100&token_type=Admin', + }); + + expect(result).toStrictEqual({ expiresIn: 100, returnTo: '/dashboard' }); + expect(storage.authentication.token.get()).toBe(`Admin fakeadmintoken`); + }); +}); + +describe('logout', () => { + beforeAll(() => { + vi.stubEnv('REACT_APP_LOGIN_ROOT', 'https://login.fake.linode.com'); + vi.stubEnv('REACT_APP_CLIENT_ID', '9l424eefake9h4fead4d09'); + }); + + afterAll(() => { + vi.unstubAllEnvs(); + }); + + it('clears the auth token', async () => { + storage.authentication.token.set('Bearer faketoken'); + + await logout(); + + expect(storage.authentication.token.get()).toBeNull(); + }); + + it('makes an API call to login to revoke the token', async () => { + storage.authentication.token.set('Bearer faketoken'); + + const onRevoke = vi.fn(); + + server.use( + http.post('*/oauth/revoke', async (data) => { + const payload = await data.request.text(); + onRevoke(payload); + }) + ); + + await logout(); + + expect(onRevoke).toHaveBeenCalledWith( + 'client_id=9l424eefake9h4fead4d09&token=faketoken' + ); + }); +}); diff --git a/packages/manager/src/OAuth/oauth.ts b/packages/manager/src/OAuth/oauth.ts new file mode 100644 index 00000000000..85b08c4618b --- /dev/null +++ b/packages/manager/src/OAuth/oauth.ts @@ -0,0 +1,325 @@ +import { + capitalize, + getQueryParamsFromQueryString, + tryCatch, +} from '@linode/utilities'; +import * as Sentry from '@sentry/react'; + +import { clearUserInput, storage } from 'src/utilities/storage'; + +import { getAppRoot, getClientId, getLoginURL } from './constants'; +import { generateCodeChallenge, generateCodeVerifier } from './pkce'; +import { + LoginAsCustomerCallbackParamsSchema, + OAuthCallbackParamsSchema, +} from './schemas'; +import { AuthenticationError } from './types'; + +import type { + AuthCallbackOptions, + TokenInfoToStore, + TokenResponse, +} from './types'; + +export function setAuthDataInLocalStorage({ + scopes, + token, + expires, +}: TokenInfoToStore) { + storage.authentication.scopes.set(scopes); + storage.authentication.token.set(token); + storage.authentication.expire.set(expires); +} + +export function clearAuthDataFromLocalStorage() { + storage.authentication.scopes.clear(); + storage.authentication.token.clear(); + storage.authentication.expire.clear(); +} + +function clearNonceAndCodeVerifierFromLocalStorage() { + storage.authentication.nonce.clear(); + storage.authentication.codeVerifier.clear(); +} + +function clearAllAuthDataFromLocalStorage() { + clearNonceAndCodeVerifierFromLocalStorage(); + clearAuthDataFromLocalStorage(); +} + +export function clearStorageAndRedirectToLogout() { + clearAllAuthDataFromLocalStorage(); + const loginUrl = getLoginURL(); + window.location.assign(loginUrl + '/logout'); +} + +export function getIsAdminToken(token: string) { + return token.toLowerCase().startsWith('admin'); +} + +export function getIsLoggedInAsCustomer() { + const token = storage.authentication.token.get(); + + if (!token) { + return false; + } + + return getIsAdminToken(token); +} + +async function generateCodeVerifierAndChallenge() { + const codeVerifier = await generateCodeVerifier(); + const codeChallenge = await generateCodeChallenge(codeVerifier); + storage.authentication.codeVerifier.set(codeVerifier); + return { codeVerifier, codeChallenge }; +} + +function generateNonce() { + const nonce = window.crypto.randomUUID(); + storage.authentication.nonce.set(nonce); + return { nonce }; +} + +function getPKCETokenRequestFormData( + code: string, + nonce: string, + codeVerifier: string +) { + const formData = new FormData(); + formData.append('grant_type', 'authorization_code'); + formData.append('client_id', getClientId()); + formData.append('code', code); + formData.append('state', nonce); + formData.append('code_verifier', codeVerifier); + return formData; +} + +/** + * Attempts to revoke the user's current token, then redirects the user to the + * "logout" page of the Login server (https://login.linode.com/logout). + */ +export async function logout() { + const loginUrl = getLoginURL(); + const clientId = getClientId(); + const token = storage.authentication.token.get(); + + clearUserInput(); + clearAuthDataFromLocalStorage(); + + if (token) { + const tokenWithoutPrefix = token.split(' ')[1]; + + try { + const response = await fetch(`${getLoginURL()}/oauth/revoke`, { + body: new URLSearchParams({ + client_id: clientId, + token: tokenWithoutPrefix, + }).toString(), + headers: { + 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', + }, + method: 'POST', + }); + + if (!response.ok) { + const error = new AuthenticationError( + 'Request to POST /oauth/revoke was not ok.' + ); + Sentry.captureException(error, { + extra: { statusCode: response.status }, + }); + } + } catch (fetchError) { + const error = new AuthenticationError( + `Unable to revoke OAuth token because POST /oauth/revoke failed.`, + fetchError + ); + Sentry.captureException(error); + } + } + + window.location.assign(`${loginUrl}/logout`); +} + +/** + * Generates an authorization URL for purposes of authorizating with the Login server + * + * @param returnTo the path in Cloud Manager to return to + * @returns a URL that we will redirect the user to in order to authenticate + * @example "https://login.fake.linode.com/oauth/authorize?client_id=9l424eefake9h4fead4d09&code_challenge=GDke2FgbFIlc1LICA5jXbUuvY1dThEDDtOI8roA17Io&code_challenge_method=S256&redirect_uri=https%3A%2F%2Fcloud.fake.linode.com%2Foauth%2Fcallback%3FreturnTo%3D%2Flinodes&response_type=code&scope=*&state=99b64f1f-0174-4c7b-a3ab-d6807de5f524" + */ +export async function generateOAuthAuthorizeEndpoint(returnTo: string) { + // Generate and store the nonce and code challenge for verification later + const { nonce } = generateNonce(); + const { codeChallenge } = await generateCodeVerifierAndChallenge(); + + const query = new URLSearchParams({ + client_id: getClientId(), + code_challenge: codeChallenge, + code_challenge_method: 'S256', + redirect_uri: `${getAppRoot()}/oauth/callback?returnTo=${returnTo}`, + response_type: 'code', + scope: '*', + state: nonce, + }); + + return `${getLoginURL()}/oauth/authorize?${query.toString()}`; +} + +/** + * Generates prerequisite data needed for authentication then redirects the user to the login server to authenticate. + */ +export async function redirectToLogin() { + // Retain the user's current path and search params so that login redirects + // the user back to where they left off. + const returnTo = `${window.location.pathname}${window.location.search}`; + + const authorizeUrl = await generateOAuthAuthorizeEndpoint(returnTo); + + window.location.assign(authorizeUrl); +} + +/** + * Handles an OAuth callback to a URL like: + * https://cloud.linode.com/oauth/callback?returnTo=%2F&state=066a6ad9-b19a-43bb-b99a-ef0b5d4fc58d&code=42ddf75dfa2cacbad897 + * + * @throws {AuthenticationError} if anything went wrong when starting session + * @returns Some information about the new session because authentication was successfull + */ +export async function handleOAuthCallback(options: AuthCallbackOptions) { + const { data: params, error: parseParamsError } = await tryCatch( + OAuthCallbackParamsSchema.validate( + getQueryParamsFromQueryString(options.params) + ) + ); + + if (parseParamsError) { + throw new AuthenticationError( + 'Error parsing search params on OAuth callback.', + parseParamsError + ); + } + + const codeVerifier = storage.authentication.codeVerifier.get(); + + if (!codeVerifier) { + throw new AuthenticationError( + 'No code codeVerifier found in local storage when running OAuth callback.' + ); + } + + storage.authentication.codeVerifier.clear(); + + const storedNonce = storage.authentication.nonce.get(); + + if (!storedNonce) { + throw new AuthenticationError( + 'No nonce found in local storage when running OAuth callback.' + ); + } + + storage.authentication.nonce.clear(); + + /** + * We need to validate that the nonce returned (comes from the location query param as the state param) + * matches the one we stored when authentication was started. This confirms the initiator + * and receiver are the same. + */ + if (storedNonce !== params.state) { + throw new AuthenticationError( + 'Stored nonce is not the same nonce as the one sent by login.' + ); + } + + const formData = getPKCETokenRequestFormData( + params.code, + params.state, + codeVerifier + ); + + const tokenCreatedAtDate = new Date(); + + const { data: response, error: tokenError } = await tryCatch( + fetch(`${getLoginURL()}/oauth/token`, { + body: formData, + method: 'POST', + }) + ); + + if (tokenError) { + throw new AuthenticationError( + 'Request to POST /oauth/token failed.', + tokenError + ); + } + + if (!response.ok) { + Sentry.setExtra('status_code', response.status); + throw new AuthenticationError('Request to POST /oauth/token was not ok.'); + } + + const { data: tokenParams, error: parseJSONError } = + await tryCatch(response.json()); + + if (parseJSONError) { + throw new AuthenticationError( + 'Unable to parse the response of POST /oauth/token as JSON.', + parseJSONError + ); + } + + // We multiply the expiration time by 1000 because JS returns time in ms, while OAuth expresses the expiry time in seconds + const tokenExpiresAt = + tokenCreatedAtDate.getTime() + tokenParams.expires_in * 1000; + + setAuthDataInLocalStorage({ + token: `${capitalize(tokenParams.token_type)} ${tokenParams.access_token}`, + scopes: tokenParams.scopes, + expires: String(tokenExpiresAt), + }); + + return { + returnTo: params.returnTo, + expiresIn: tokenParams.expires_in, + }; +} + +/** + * Handles a "Login as Customer" callback to a URL like: + * https://cloud.linode.com/admin/callback#access_token=fjhwehkfg&destination=dashboard&expires_in=900&token_type=Admin + * + * @throws {AuthenticationError} if anything went wrong when starting session + * @returns Some information about the new session because authentication was successfull + */ +export async function handleLoginAsCustomerCallback( + options: AuthCallbackOptions +) { + const { data: params, error } = await tryCatch( + LoginAsCustomerCallbackParamsSchema.validate( + getQueryParamsFromQueryString(options.params) + ) + ); + + if (error) { + throw new AuthenticationError( + 'Unable to login as customer. Admin did not send expected params in location hash.' + ); + } + + // We multiply the expiration time by 1000 because JS returns time in ms, while OAuth expresses the expiry time in seconds + const tokenExpiresAt = Date.now() + params.expires_in * 1000; + + /** + * We have all the information we need and can persist it to localStorage + */ + setAuthDataInLocalStorage({ + token: `${capitalize(params.token_type)} ${params.access_token}`, + scopes: '*', + expires: String(tokenExpiresAt), + }); + + return { + returnTo: `/${params.destination}`, // The destination from admin does not include a leading slash + expiresIn: params.expires_in, + }; +} diff --git a/packages/manager/src/pkce.ts b/packages/manager/src/OAuth/pkce.ts similarity index 100% rename from packages/manager/src/pkce.ts rename to packages/manager/src/OAuth/pkce.ts diff --git a/packages/manager/src/OAuth/schemas.ts b/packages/manager/src/OAuth/schemas.ts new file mode 100644 index 00000000000..b032878047a --- /dev/null +++ b/packages/manager/src/OAuth/schemas.ts @@ -0,0 +1,26 @@ +import { number, object, string } from 'yup'; + +/** + * Used to validate query params for the OAuth callback + * + * The URL would look like: + * https://cloud.linode.com/oauth/callback?returnTo=%2F&state=066a6ad9-b19a-43bb-b99a-ef0b5d4fc58d&code=42ddf75dfa2cacbad897 + */ +export const OAuthCallbackParamsSchema = object({ + returnTo: string().default('/'), + code: string().required(), + state: string().required(), // aka "nonce" +}); + +/** + * Used to validate hash params for the "Login as Customer" callback + * + * The URL would look like: + * https://cloud.linode.com/admin/callback#access_token=fjhwehkfg&destination=dashboard&expires_in=900&token_type=Admin + */ +export const LoginAsCustomerCallbackParamsSchema = object({ + access_token: string().required(), + destination: string().default('/'), + expires_in: number().required(), + token_type: string().required().oneOf(['Admin']), +}); diff --git a/packages/manager/src/OAuth/types.ts b/packages/manager/src/OAuth/types.ts new file mode 100644 index 00000000000..6dd3e5d14a4 --- /dev/null +++ b/packages/manager/src/OAuth/types.ts @@ -0,0 +1,80 @@ +/** + * Represents the response type of POST https://login.linode.com/oauth/token + */ +export interface TokenResponse { + /** + * An access token that you use as the Bearer token when making API requests + * + * @example "59340e48bb1f64970c0e1c15a3833c6adf8cf97f478252eee8764b152704d447" + */ + access_token: string; + /** + * The lifetime of the access_token (in seconds) + * + * @example 7200 + */ + expires_in: number; + /** + * Currently not supported I guess. + */ + refresh_token: null; + /** + * The scope of the access_token. + * + * @example "*" + */ + scopes: string; + /** + * The type of the access token + * @example "bearer" + */ + token_type: 'bearer'; +} + +export interface TokenInfoToStore { + /** + * The expiry timestamp for the the token + * + * This is a unix timestamp (milliseconds since the Unix epoch) + * + * @example "1750130180465" + */ + expires: string; + /** + * The OAuth scopes + * + * @example "*" + */ + scopes: string; + /** + * The token including the prefix + * + * @example "Bearer 12345" or "Admin 12345" + */ + token: string; +} + +/** + * Options that can be provided to our OAuth Callback handler functions + */ +export interface AuthCallbackOptions { + /** + * The raw search or has params sent by the login server + */ + params: string; +} + +/** + * A custom error type for distinguishing auth-related errors. + * + * This helps identify them in tooling like Sentry. + */ +export class AuthenticationError extends Error { + public cause?: Error; + + constructor(message: string, cause?: Error) { + super(message); + this.cause = cause; + this.name = 'AuthenticationError'; + } +} diff --git a/packages/manager/src/OAuth/utils.ts b/packages/manager/src/OAuth/utils.ts deleted file mode 100644 index a3ffee228a2..00000000000 --- a/packages/manager/src/OAuth/utils.ts +++ /dev/null @@ -1,103 +0,0 @@ -/* eslint-disable no-console */ -import { CLIENT_ID, LOGIN_ROOT } from 'src/constants'; -import { revokeToken } from 'src/session'; -import { - clearUserInput, - getEnvLocalStorageOverrides, - storage, -} from 'src/utilities/storage'; - -interface TokensWithExpiry { - /** - * The expiry of the token - * - * I don't know why someone decided to store this as a crazy string. - * - * @example "Wed Jun 04 2025 23:29:48 GMT-0400 (Eastern Daylight Time)" - */ - expires: string; - /** - * The OAuth scopes - * - * @example "*" - */ - scopes: string; - /** - * The token including the prefix - * - * @example "Bearer 12345" or "Admin 12345" - */ - token: string; -} - -export function setAuthDataInLocalStorage({ - scopes, - token, - expires, -}: TokensWithExpiry) { - storage.authentication.scopes.set(scopes); - storage.authentication.token.set(token); - storage.authentication.expire.set(expires); -} - -export function clearAuthDataFromLocalStorage() { - storage.authentication.scopes.clear(); - storage.authentication.token.clear(); - storage.authentication.expire.clear(); -} - -export function clearNonceAndCodeVerifierFromLocalStorage() { - storage.authentication.nonce.clear(); - storage.authentication.codeVerifier.clear(); -} - -export function getIsLoggedInAsCustomer() { - const token = storage.authentication.token.get(); - - if (!token) { - return false; - } - - return token.toLowerCase().includes('admin'); -} - -function getSafeLoginURL() { - const localStorageOverrides = getEnvLocalStorageOverrides(); - - let loginUrl = LOGIN_ROOT; - - if (localStorageOverrides?.loginRoot) { - try { - loginUrl = new URL(localStorageOverrides.loginRoot).toString(); - } catch (error) { - console.error('The currently selected Login URL is invalid.', error); - } - } - - return loginUrl; -} - -export async function logout() { - const localStorageOverrides = getEnvLocalStorageOverrides(); - const loginUrl = getSafeLoginURL(); - const clientId = localStorageOverrides?.clientID ?? CLIENT_ID; - const token = storage.authentication.token.get(); - - clearUserInput(); - clearAuthDataFromLocalStorage(); - - if (clientId && token) { - const tokenWithoutPrefix = token.split(' ')[1]; - - try { - await revokeToken(clientId, tokenWithoutPrefix); - } catch (error) { - console.error( - `Unable to revoke OAuth token by calling POST ${loginUrl}/oauth/revoke.`, - error - ); - } - } - - window.location.assign(`${loginUrl}/logout`); -} diff --git a/packages/manager/src/__data__/LinodesWithBackups.ts b/packages/manager/src/__data__/LinodesWithBackups.ts deleted file mode 100644 index 3fed8d6dd8c..00000000000 --- a/packages/manager/src/__data__/LinodesWithBackups.ts +++ /dev/null @@ -1,97 +0,0 @@ -import type { - Hypervisor, - LinodeBackupStatus, - LinodeBackupType, - LinodeStatus, -} from '@linode/api-v4/lib/linodes'; - -export const LinodesWithBackups = [ - { - alerts: { - cpu: 90, - io: 10000, - network_in: 10, - network_out: 10, - transfer_quota: 80, - }, - backups: { - enabled: true, - schedule: { - day: 'Scheduling', - window: 'Scheduling', - }, - }, - created: '2018-06-05T16:15:03', - currentBackups: { - automatic: [ - { - configs: ['Restore 121454 - My Arch Linux Disk Profile'], - created: '2018-06-06T00:23:17', - disks: [ - { - filesystem: 'ext4', - label: 'Restore 121454 - Arch Linux Disk', - size: 1753, - }, - { - filesystem: 'swap', - label: 'Restore 121454 - 512 MB Swap Image', - size: 0, - }, - ], - finished: '2018-06-06T00:25:25', - id: 94825693, - label: null, - region: 'us-central', - status: 'successful' as LinodeBackupStatus, - type: 'auto' as LinodeBackupType, - updated: '2018-06-06T00:29:07', - }, - ], - snapshot: { - current: { - configs: ['Restore 121454 - My Arch Linux Disk Profile'], - created: '2018-06-05T16:29:15', - disks: [ - { - filesystem: 'ext4', - label: 'Restore 121454 - Arch Linux Disk', - size: 1753, - }, - { - filesystem: 'swap', - label: 'Restore 121454 - 512 MB Swap Image', - size: 0, - }, - ], - finished: '2018-06-05T16:32:12', - id: 94805928, - label: 'testing', - region: 'us-central', - status: 'successful' as LinodeBackupStatus, - type: 'snapshot' as LinodeBackupType, - updated: '2018-06-05T16:32:12', - }, - in_progress: null, - }, - }, - group: '', - hypervisor: 'kvm' as Hypervisor, - id: 8284376, - image: null, - ipv4: ['45.79.8.50', '192.168.211.88'], - ipv6: '2600:3c00::f03c:91ff:fed8:fd36/64', - label: 'fromnanoooooooode', - region: 'us-central', - specs: { - disk: 81920, - memory: 4096, - transfer: 4000, - vcpus: 2, - }, - status: 'offline' as LinodeStatus, - type: 'g6-standard-2' as LinodeBackupType, - updated: '2018-06-05T16:20:08', - watchdog_enabled: false, - }, -]; diff --git a/packages/manager/src/__data__/axios.ts b/packages/manager/src/__data__/axios.ts deleted file mode 100644 index 0c81215f337..00000000000 --- a/packages/manager/src/__data__/axios.ts +++ /dev/null @@ -1,20 +0,0 @@ -export const mockAxiosError = { - config: {}, - message: 'error', - name: 'hello world', -}; - -export const mockAxiosErrorWithAPIErrorContent = { - config: {}, - message: 'error', - name: 'hello world', - response: { - config: {}, - data: { - errors: [{ field: 'Error', reason: 'A reason' }], - }, - headers: null, - status: 0, - statusText: 'status', - }, -}; diff --git a/packages/manager/src/__data__/buckets.ts b/packages/manager/src/__data__/buckets.ts deleted file mode 100644 index 94e4be2e771..00000000000 --- a/packages/manager/src/__data__/buckets.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage'; - -export const buckets: ObjectStorageBucket[] = [ - { - cluster: 'us-east-1', - created: '2017-12-11T16:35:31', - hostname: 'test-bucket-001.alpha.linodeobjects.com', - label: 'test-bucket-001', - objects: 2, - region: 'us-east', - size: 5418860544, - }, - { - cluster: 'a-cluster', - created: '2017-12-11T16:35:31', - hostname: 'test-bucket-002.alpha.linodeobjects.com', - label: 'test-bucket-002', - objects: 4, - region: 'us-east', - size: 1240, - }, -]; diff --git a/packages/manager/src/__data__/domains.ts b/packages/manager/src/__data__/domains.ts index e31a037f7b6..683bacaa5c4 100644 --- a/packages/manager/src/__data__/domains.ts +++ b/packages/manager/src/__data__/domains.ts @@ -1,60 +1,4 @@ -import type { Domain, DomainRecord } from '@linode/api-v4/lib/domains'; - -export const domain1: Domain = { - axfr_ips: [], - description: '', - domain: 'domain1.com', - expire_sec: 0, - group: 'Production', - id: 9999997, - master_ips: [], - refresh_sec: 0, - retry_sec: 0, - soa_email: 'user@host.com', - status: 'active', - tags: ['app'], - ttl_sec: 0, - type: 'master', - updated: '2020-05-03 00:00:00', -}; - -export const domain2: Domain = { - axfr_ips: [], - description: '', - domain: 'domain2.com', - expire_sec: 0, - group: '', - id: 9999998, - master_ips: [], - refresh_sec: 0, - retry_sec: 0, - soa_email: 'user@host.com', - status: 'active', - tags: ['app2'], - ttl_sec: 0, - type: 'master', - updated: '2020-05-02 00:00:00', -}; - -export const domain3: Domain = { - axfr_ips: [], - description: '', - domain: 'domain3.com', - expire_sec: 0, - group: 'Production', - id: 9999999, - master_ips: [], - refresh_sec: 0, - retry_sec: 0, - soa_email: 'user@host.com', - status: 'active', - tags: ['Production', 'app'], - ttl_sec: 0, - type: 'master', - updated: '2020-05-01 00:00:00', -}; - -export const domains = [domain1, domain2, domain3]; +import type { DomainRecord } from '@linode/api-v4'; export const domainRecord1: DomainRecord = { created: '2020-05-03 00:00:00', diff --git a/packages/manager/src/__data__/firewallDevices.ts b/packages/manager/src/__data__/firewallDevices.ts deleted file mode 100644 index 1fa2e81c0d9..00000000000 --- a/packages/manager/src/__data__/firewallDevices.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { FirewallDevice } from '@linode/api-v4/lib/firewalls'; - -export const device: FirewallDevice = { - created: '2020-01-01', - entity: { - id: 16621754, - label: 'Some Linode', - type: 'linode' as any, - url: 'v4/linode/instances/16621754', - parent_entity: null, - }, - id: 1, - updated: '2020-01-01', -}; - -export const device2: FirewallDevice = { - created: '2020-01-01', - entity: { - id: 15922741, - label: 'Other Linode', - type: 'linode' as any, - url: 'v4/linode/instances/15922741', - parent_entity: null, - }, - id: 2, - updated: '2020-01-01', -}; - -export const devices = [device, device2]; diff --git a/packages/manager/src/__data__/firewalls.ts b/packages/manager/src/__data__/firewalls.ts deleted file mode 100644 index 29eb3dcdd0c..00000000000 --- a/packages/manager/src/__data__/firewalls.ts +++ /dev/null @@ -1,83 +0,0 @@ -import type { Firewall } from '@linode/api-v4/lib/firewalls'; -import type { FirewallDeviceEntityType } from '@linode/api-v4/lib/firewalls'; - -export const firewall: Firewall = { - created: '2019-09-11T19:44:38.526Z', - entities: [ - { - id: 1, - label: 'my-linode', - type: 'linode' as FirewallDeviceEntityType, - url: '/test', - parent_entity: null, - }, - ], - id: 1, - label: 'my-firewall', - rules: { - fingerprint: '8a545843', - inbound: [ - { - action: 'ACCEPT', - ports: '443', - protocol: 'ALL', - }, - ], - inbound_policy: 'DROP', - outbound: [ - { - action: 'ACCEPT', - addresses: { - ipv4: ['12.12.12.12'], - ipv6: ['192.168.12.12'], - }, - ports: '22', - protocol: 'UDP', - }, - ], - outbound_policy: 'DROP', - version: 1, - }, - status: 'enabled', - tags: [], - updated: '2019-09-11T19:44:38.526Z', -}; - -export const firewall2: Firewall = { - created: '2019-12-11T19:44:38.526Z', - entities: [ - { - id: 1, - label: 'my-linode', - type: 'linode' as FirewallDeviceEntityType, - url: '/test', - parent_entity: null, - }, - ], - id: 2, - label: 'zzz', - rules: { - fingerprint: '8a545843', - inbound: [], - inbound_policy: 'DROP', - outbound: [ - { - action: 'ACCEPT', - ports: '443', - protocol: 'ALL', - }, - { - action: 'ACCEPT', - ports: '80', - protocol: 'ALL', - }, - ], - outbound_policy: 'DROP', - version: 1, - }, - status: 'disabled', - tags: [], - updated: '2019-12-11T19:44:38.526Z', -}; - -export const firewalls = [firewall, firewall2]; diff --git a/packages/manager/src/__data__/index.ts b/packages/manager/src/__data__/index.ts deleted file mode 100644 index dac1d15e6d2..00000000000 --- a/packages/manager/src/__data__/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './domains'; -export * from './ExtendedType'; -export * from './LinodesWithBackups'; diff --git a/packages/manager/src/__data__/ldClient.ts b/packages/manager/src/__data__/ldClient.ts deleted file mode 100644 index ab550b3aea1..00000000000 --- a/packages/manager/src/__data__/ldClient.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { LDClient } from 'launchdarkly-js-client-sdk'; - -const client: LDClient = { - allFlags: vi.fn(), - close: vi.fn(), - flush: vi.fn(), - getContext: vi.fn(), - identify: vi.fn(), - off: vi.fn(), - on: vi.fn(), - setStreaming: vi.fn(), - track: vi.fn(), - variation: vi.fn(), - variationDetail: vi.fn(), - waitForInitialization: vi.fn(), - waitUntilGoalsReady: vi.fn(), - waitUntilReady: vi.fn(), -}; - -export default client; diff --git a/packages/manager/src/__data__/managedCredentials.ts b/packages/manager/src/__data__/managedCredentials.ts deleted file mode 100644 index 40631f4b197..00000000000 --- a/packages/manager/src/__data__/managedCredentials.ts +++ /dev/null @@ -1,17 +0,0 @@ -export const credentials = [ - { - id: 1, - label: 'credential-1', - last_decrypted: '2019-07-01', - }, - { - id: 2, - label: 'credential-2', - last_decrypted: '2019-07-01', - }, - { - id: 3, - label: 'credential-3', - last_decrypted: null, - }, -]; diff --git a/packages/manager/src/__data__/nodeBalConfigs.ts b/packages/manager/src/__data__/nodeBalConfigs.ts deleted file mode 100644 index 9106f6cf57a..00000000000 --- a/packages/manager/src/__data__/nodeBalConfigs.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { NodeBalancerConfigNode } from '@linode/api-v4/lib/nodebalancers'; - -export const nodes: NodeBalancerConfigNode[] = [ - { - address: '192.168.160.160:80', - config_id: 1, - id: 571, - label: 'config 1', - mode: 'accept', - nodebalancer_id: 642, - status: 'UP', - weight: 100, - }, - { - address: '192.168.160.160:80', - config_id: 1, - id: 572, - label: 'config 2', - mode: 'accept', - nodebalancer_id: 642, - status: 'UP', - weight: 100, - }, - { - address: '192.168.160.160:80', - config_id: 1, - id: 573, - label: 'config 3', - mode: 'accept', - nodebalancer_id: 642, - status: 'UP', - weight: 100, - }, -]; diff --git a/packages/manager/src/__data__/notifications.ts b/packages/manager/src/__data__/notifications.ts deleted file mode 100644 index 9b3dd42078a..00000000000 --- a/packages/manager/src/__data__/notifications.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Notification } from '@linode/api-v4/lib/account'; - -export const mockNotification: Notification = { - body: null, - entity: { - id: 8675309, - label: 'my-linode', - type: 'linode', - url: 'doesnt/matter/', - }, - label: "Here's a notification!", - message: 'Something something... whatever.', - severity: 'major', - type: 'migration_pending', - until: null, - when: null, -}; - -export const abuseTicketNotification: Notification = { - body: null, - entity: { - id: 123456, - label: 'Abuse Ticket', - type: 'ticket', - url: '/support/tickets/123456 ', - }, - label: 'You have an open abuse ticket!', - message: 'You have an open abuse ticket!', - severity: 'major', - type: 'ticket_abuse', - until: null, - when: null, -}; diff --git a/packages/manager/src/__data__/objectStorageClusters.ts b/packages/manager/src/__data__/objectStorageClusters.ts deleted file mode 100644 index fb116e5966d..00000000000 --- a/packages/manager/src/__data__/objectStorageClusters.ts +++ /dev/null @@ -1,25 +0,0 @@ -import type { ObjectStorageCluster } from '@linode/api-v4/lib/object-storage'; - -export const objectStorageClusters: ObjectStorageCluster[] = [ - { - domain: 'us-east-1.linodeobjects.com', - id: 'us-east-1', - region: 'us-east', - static_site_domain: 'website-us-east-1.linodeobjects.com', - status: 'available', - }, - { - domain: 'eu-central-1.linodeobjects.com', - id: 'eu-central-1', - region: 'eu-central', - static_site_domain: 'website-eu-central-1.linodeobjects.com', - status: 'available', - }, - { - domain: 'ap-south-1.linodeobjects.com', - id: 'ap-south-1', - region: 'ap-south', - static_site_domain: 'website-ap-south-1.linodeobjects.com', - status: 'available', - }, -]; diff --git a/packages/manager/src/__data__/objectStorageKeys.ts b/packages/manager/src/__data__/objectStorageKeys.ts deleted file mode 100644 index 6ffebaf5e24..00000000000 --- a/packages/manager/src/__data__/objectStorageKeys.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { ObjectStorageKey } from '@linode/api-v4/lib/object-storage'; - -export const objectStorageKey1: ObjectStorageKey = { - access_key: '123ABC', - bucket_access: null, - id: 1, - label: 'test-obj-storage-key-01', - limited: false, - regions: [{ id: 'us-east', s3_endpoint: 'us-east.com' }], - secret_key: '[REDACTED]', -}; - -export const objectStorageKey2: ObjectStorageKey = { - access_key: '234BCD', - bucket_access: null, - id: 2, - label: 'test-obj-storage-key-02', - limited: false, - regions: [{ id: 'us-east', s3_endpoint: 'us-east.com' }], - secret_key: '[REDACTED]', -}; - -export const objectStorageKey3: ObjectStorageKey = { - access_key: '345CDE', - bucket_access: null, - id: 3, - label: 'test-obj-storage-key-03', - limited: false, - regions: [{ id: 'us-east', s3_endpoint: 'us-east.com' }], - secret_key: '[REDACTED]', -}; - -export default [objectStorageKey1, objectStorageKey2, objectStorageKey3]; diff --git a/packages/manager/src/__data__/personalAccessTokens.ts b/packages/manager/src/__data__/personalAccessTokens.ts deleted file mode 100644 index 4b04f8b88a7..00000000000 --- a/packages/manager/src/__data__/personalAccessTokens.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { DateTime } from 'luxon'; - -import type { Token } from '@linode/api-v4/lib/profile'; - -export const personalAccessTokens: Token[] = [ - { - created: '2018-04-09T20:00:00', - expiry: DateTime.utc().minus({ days: 1 }).toISO(), - id: 1, - label: 'test-1', - scopes: 'account:read_write', - token: 'aa588915b6368b80', - }, - { - created: '2017-04-09T20:00:00', - expiry: DateTime.utc().plus({ months: 3 }).toISO(), - id: 2, - label: 'test-2', - scopes: 'account:read_only', - token: 'ae8adb9a37263b4d', - }, - { - created: '2018-04-09T20:00:00', - expiry: DateTime.utc().plus({ years: 1 }).toISO(), - id: 3, - label: 'test-3', - scopes: 'account:read_write', - token: '019774b077bb5fda', - }, - { - created: '2011-04-09T20:00:00', - expiry: DateTime.utc().plus({ years: 1 }).toISO(), - id: 4, - label: 'test-4', - scopes: 'account:read_write', - token: '019774b077bb5fda', - }, -]; diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx index bfa7483ff4a..171f75f2c37 100644 --- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx +++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import { accountUserFactory } from 'src/factories/accountUsers'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { UserSSHKeyPanel } from './UserSSHKeyPanel'; @@ -25,7 +25,7 @@ describe('UserSSHKeyPanel', () => { return HttpResponse.json(makeResourcePage([]), { status: 403 }); }) ); - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( ); await waitFor(() => { @@ -49,7 +49,7 @@ describe('UserSSHKeyPanel', () => { return HttpResponse.json(makeResourcePage([]), { status: 403 }); }) ); - const { getByText } = renderWithTheme( + const { getByText } = await renderWithThemeAndRouter( ); await waitFor(() => { @@ -72,7 +72,7 @@ describe('UserSSHKeyPanel', () => { return HttpResponse.json(makeResourcePage(users)); }) ); - const { getByText } = renderWithTheme( + const { getByText } = await renderWithThemeAndRouter( ); await waitFor(() => { @@ -100,7 +100,7 @@ describe('UserSSHKeyPanel', () => { setAuthorizedUsers: vi.fn(), }; - const { getByRole, getByText } = renderWithTheme( + const { getByRole, getByText } = await renderWithThemeAndRouter( ); await waitFor(() => { diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.tsx index a0d4e3b4d6f..c51f734de97 100644 --- a/packages/manager/src/components/ActionMenu/ActionMenu.tsx +++ b/packages/manager/src/components/ActionMenu/ActionMenu.tsx @@ -163,7 +163,7 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => { {a.tooltip && ( { { +export const CheckoutBar = (props: CheckoutBarProps) => { const { additionalPricing, agreement, @@ -85,54 +80,51 @@ const CheckoutBar = (props: CheckoutBarProps) => { const price = calculatedPrice ?? 0; return ( - - - {heading} - - {children} - { - - {(price >= 0 && !disabled) || price ? ( - <> - - {additionalPricing} - - ) : ( - {priceSelectionText} - )} - {priceHelperText && price > 0 && ( - - {priceHelperText} - - )} - - } - {agreement ? agreement : null} - - {submitText ?? 'Create'} - - {footer ? footer : null} - + + + + {heading} + + {(price >= 0 && !disabled) || price ? ( + <> + {children} + + + + {additionalPricing} + + ) : ( + {priceSelectionText} + )} + {priceHelperText && price > 0 && ( + {priceHelperText} + )} + {agreement ? agreement : null} + + {footer ? footer : null} + + ); }; - -export { CheckoutBar }; diff --git a/packages/manager/src/components/CheckoutBar/DisplaySection.tsx b/packages/manager/src/components/CheckoutBar/DisplaySection.tsx deleted file mode 100644 index b36b304ea48..00000000000 --- a/packages/manager/src/components/CheckoutBar/DisplaySection.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Typography } from '@linode/ui'; -import * as React from 'react'; - -import { StyledCheckoutSection, SxTypography } from './styles'; - -export interface DisplaySectionProps { - details?: number | string; - title: string; -} - -const DisplaySection = React.memo((props: DisplaySectionProps) => { - const { details, title } = props; - - return ( - - {title && ( - - {title} - - )} - {details ? ( - - {details} - - ) : null} - - ); -}); - -export { DisplaySection }; diff --git a/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx b/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx deleted file mode 100644 index 479695ebeb6..00000000000 --- a/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Divider } from '@linode/ui'; -import * as React from 'react'; - -import { DisplaySection } from './DisplaySection'; - -interface DisplaySectionListProps { - displaySections?: { details?: number | string; title: string }[]; -} - -const DisplaySectionList = ({ displaySections }: DisplaySectionListProps) => { - if (!displaySections) { - return null; - } - return ( - <> - {displaySections.map(({ details, title }, idx) => ( - - {idx !== 0 && } - - - ))} - - ); -}; - -export { DisplaySectionList }; diff --git a/packages/manager/src/components/CheckoutBar/styles.ts b/packages/manager/src/components/CheckoutBar/styles.ts index 11a972df665..0feee24a3dc 100644 --- a/packages/manager/src/components/CheckoutBar/styles.ts +++ b/packages/manager/src/components/CheckoutBar/styles.ts @@ -1,35 +1,6 @@ -import { Button } from '@linode/ui'; -import { styled, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; -const StyledButton = styled(Button)(({ theme }) => ({ - marginTop: 18, - [theme.breakpoints.up('lg')]: { - width: '100%', - }, -})); - -const StyledRoot = styled('div')(({ theme }) => ({ - minHeight: '24px', - minWidth: '24px', - [theme.breakpoints.down(1280)]: { - background: theme.color.white, - bottom: '0 !important' as '0', - left: '0 !important' as '0', - padding: theme.spacing(2), - position: 'relative !important' as 'relative', - }, -})); - -const StyledCheckoutSection = styled('div')(({ theme }) => ({ - padding: '12px 0', - [theme.breakpoints.down('md')]: { - '& button': { - marginLeft: 0, - }, - }, -})); - -const SxTypography = () => { +export const SxTypography = () => { const theme = useTheme(); return { @@ -38,5 +9,3 @@ const SxTypography = () => { lineHeight: '1.5em', }; }; - -export { StyledButton, StyledCheckoutSection, StyledRoot, SxTypography }; diff --git a/packages/manager/src/components/CodeBlock/CodeBlock.styles.ts b/packages/manager/src/components/CodeBlock/CodeBlock.styles.ts index 12144b542e4..ed317778ece 100644 --- a/packages/manager/src/components/CodeBlock/CodeBlock.styles.ts +++ b/packages/manager/src/components/CodeBlock/CodeBlock.styles.ts @@ -15,7 +15,6 @@ export const useCodeBlockStyles = makeStyles()((theme) => ({ right: 0, paddingRight: `${theme.spacing(1)}`, top: `${theme.spacing(1)}`, - backgroundColor: theme.tokens.alias.Background.Neutral, }, lineNumbers: { code: { diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.tsx b/packages/manager/src/components/DescriptionList/DescriptionList.tsx index 1f25c1e9a23..c9e3b18e43e 100644 --- a/packages/manager/src/components/DescriptionList/DescriptionList.tsx +++ b/packages/manager/src/components/DescriptionList/DescriptionList.tsx @@ -134,7 +134,7 @@ export const DescriptionList = (props: DescriptionListProps) => { {description} {tooltip && ( `$${price.toFixed(2)}`; export const DisplayPrice = (props: DisplayPriceProps) => { const theme = useTheme(); - const { decimalPlaces, fontSize, interval, price } = props; + const { decimalPlaces, fontSize, interval, price, variant = 'h3' } = props; const sx: SxProps = { color: theme.palette.text.primary, @@ -42,11 +48,11 @@ export const DisplayPrice = (props: DisplayPriceProps) => { return ( <> - + {interval && ( - + /{interval} )} diff --git a/packages/manager/src/components/Encryption/Encryption.tsx b/packages/manager/src/components/Encryption/Encryption.tsx index 17b66bb61d3..9290ff8f3f2 100644 --- a/packages/manager/src/components/Encryption/Encryption.tsx +++ b/packages/manager/src/components/Encryption/Encryption.tsx @@ -51,14 +51,7 @@ export const Encryption = (props: EncryptionProps) => { )} - + void; textFieldProps?: Partial; - value?: 'linode/migrate' | 'linode/power_off_on' | null; + value?: 'linode/migrate' | 'linode/power_off_on'; } export const MaintenancePolicySelect = (props: Props) => { @@ -49,10 +49,10 @@ export const MaintenancePolicySelect = (props: Props) => { accountSettings?.maintenance_policy ?? policies?.find((p) => p.is_default)?.slug; - const selectedOption = - (value - ? options.find((o) => o.slug === value) - : options.find((o) => o.is_default)) ?? null; + // Return null (controlled) instead of undefined (uncontrolled) to keep Autocomplete controlled + const selectedOption = value + ? (options.find((o) => o.slug === value) ?? null) + : (options.find((o) => o.is_default) ?? null); return ( {
{title} ({ + useIsIAMEnabled: vi.fn(() => ({ + isIAMBeta: false, + isIAMEnabled: false, + })), + usePreferences: vi.fn().mockReturnValue({}), +})); + +vi.mock('src/features/IAM/hooks/useIsIAMEnabled', () => ({ + useIsIAMEnabled: queryMocks.useIsIAMEnabled, +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + usePreferences: queryMocks.usePreferences, + }; +}); + describe('PrimaryNav', () => { const preference: ManagerPreferences['collapsedSideNavProductFamilies'] = []; - const queryMocks = vi.hoisted(() => ({ - usePreferences: vi.fn().mockReturnValue({}), - })); - - vi.mock('@linode/queries', async () => { - const actual = await vi.importActual('@linode/queries'); - return { - ...actual, - usePreferences: queryMocks.usePreferences, - }; - }); - it('only contains a "Managed" menu link if the user has Managed services.', async () => { server.use( http.get('*/account/maintenance', () => { diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index a4347adc667..d137cef6064 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -126,7 +126,7 @@ export const RegionSelect = < onChange={onChange} options={regionOptions} placeholder={placeholder ?? 'Select a Region'} - renderOption={(props, region) => { + renderOption={(props, region, { selected }) => { const { key, ...rest } = props; return ( @@ -136,6 +136,7 @@ export const RegionSelect = < item={region} key={`${region.id}-${key}`} props={rest} + selected={selected} /> ); }} diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx index 2cebc83a4a1..0c82224aa7b 100644 --- a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx +++ b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx @@ -13,6 +13,12 @@ beforeAll(() => mockMatchMedia()); const testId = 'select-firewall-panel'; +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: vi.fn(() => ({ + permissions: { delete_firewall: true, update_firewall: true }, + })), +})); + describe('SelectFirewallPanel', () => { it('should render', async () => { const wrapper = renderWithTheme( diff --git a/packages/manager/src/components/Snackbar/Snackbar.tsx b/packages/manager/src/components/Snackbar/Snackbar.tsx index 41c9c8d4acf..cf9168e7407 100644 --- a/packages/manager/src/components/Snackbar/Snackbar.tsx +++ b/packages/manager/src/components/Snackbar/Snackbar.tsx @@ -30,7 +30,11 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)( }, '#notistack-snackbar > svg': { position: 'absolute', - left: '-45px', + left: '-48px', + top: 6, + '& path': { + fill: theme.notificationToast.default.icon, + }, }, '&.notistack-MuiContent': { color: theme.notificationToast.default.color, @@ -61,6 +65,9 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)( '&.notistack-MuiContent-warning': { backgroundColor: theme.notificationToast.warning.backgroundColor, borderLeft: theme.notificationToast.warning.borderLeft, + '& #notistack-snackbar svg > path': { + fill: theme.notificationToast.warning.icon, + }, }, '& #notistack-snackbar + div': { alignSelf: 'flex-start', diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index c2e20398410..28b4dad8960 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/packages/manager/src/components/StackScript/StackScript.tsx @@ -258,7 +258,7 @@ export const StackScript = React.memo((props: StackScriptProps) => { > Deprecated Images { <> {props.children} diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialogHeader.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialogHeader.tsx index e68a914b5be..285e0a11086 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialogHeader.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialogHeader.tsx @@ -28,7 +28,7 @@ export const TransferDisplayDialogHeader = React.memo((props: Props) => { }, }, }} - status="help" + status="info" sxTooltipIcon={{ left: -2, top: -2 }} text={tooltipText} /> diff --git a/packages/manager/src/components/VLANSelect.tsx b/packages/manager/src/components/VLANSelect.tsx index 90a91ecded8..b334058c98b 100644 --- a/packages/manager/src/components/VLANSelect.tsx +++ b/packages/manager/src/components/VLANSelect.tsx @@ -109,26 +109,23 @@ export const VLANSelect = (props: Props) => { } helperText={helperText} inputValue={selectedVLAN ? selectedVLAN.label : inputValue} - isOptionEqualToValue={(option1, options2) => - option1.label === options2.label + isOptionEqualToValue={(option1, option2) => + option1.label === option2.label } label="VLAN" - ListboxProps={{ - onScroll: (event: React.SyntheticEvent) => { - const listboxNode = event.currentTarget; - if ( - listboxNode.scrollTop + listboxNode.clientHeight >= - listboxNode.scrollHeight && - hasNextPage - ) { - fetchNextPage(); - } - }, - }} loading={isFetching} noMarginTop noOptionsText="You have no VLANs in this region. Type to create one." - onBlur={onBlur} + onBlur={() => { + if (onBlur) { + onBlur(); + } + if (onChange && inputValue && inputValue !== value) { + // if input value has changed, select that value. This handles the case where users + // expect the new VLAN to be selected onBlur if the only option that exists is to create it + onChange(inputValue); + } + }} onChange={(event, value) => { if (onChange) { onChange(value?.label ?? null); @@ -151,6 +148,20 @@ export const VLANSelect = (props: Props) => { open={open} options={vlans} placeholder="Create or select a VLAN" + slotProps={{ + listbox: { + onScroll: (event: React.SyntheticEvent) => { + const listboxNode = event.currentTarget; + if ( + listboxNode.scrollTop + listboxNode.clientHeight >= + listboxNode.scrollHeight && + hasNextPage + ) { + fetchNextPage(); + } + }, + }, + }} sx={sx} value={selectedVLAN} /> diff --git a/packages/manager/src/constants.ts b/packages/manager/src/constants.ts index b756a55a048..3fdc894ec3b 100644 --- a/packages/manager/src/constants.ts +++ b/packages/manager/src/constants.ts @@ -1,8 +1,7 @@ -// whether or not this is a Vite production build -// This does not necessarily mean Cloud is running in a production environment. - import { getBooleanEnv } from '@linode/utilities'; +// Whether or not this is a Vite production build +// This does not necessarily mean Cloud is running in a production environment. // For example, cloud.dev.linode.com is technically a production build. export const isProductionBuild = import.meta.env.PROD; @@ -13,8 +12,9 @@ export const ENABLE_DEV_TOOLS = : getBooleanEnv(import.meta.env.REACT_APP_ENABLE_DEV_TOOLS); // allow us to explicity enable maintenance mode -export const ENABLE_MAINTENANCE_MODE = - import.meta.env.REACT_APP_ENABLE_MAINTENANCE_MODE === 'true'; +export const ENABLE_MAINTENANCE_MODE = getBooleanEnv( + import.meta.env.REACT_APP_ENABLE_MAINTENANCE_MODE +); /** * Because Cloud Manager uses two different search implementations depending on the account's @@ -25,16 +25,16 @@ export const ENABLE_MAINTENANCE_MODE = */ export const FORCE_SEARCH_TYPE = import.meta.env.REACT_APP_FORCE_SEARCH_TYPE; -/** required for the app to function */ -export const APP_ROOT = - import.meta.env.REACT_APP_APP_ROOT || 'http://localhost:3000'; -export const LOGIN_ROOT = - import.meta.env.REACT_APP_LOGIN_ROOT || 'https://login.linode.com'; export const API_ROOT = import.meta.env.REACT_APP_API_ROOT || 'https://api.linode.com/v4'; -export const BETA_API_ROOT = API_ROOT + 'beta'; -/** generate a client_id by navigating to https://cloud.linode.com/profile/clients */ -export const CLIENT_ID = import.meta.env.REACT_APP_CLIENT_ID; + +/** + * A display name for the current environment. + * This exists so we can dynamically set our Sentry environment. + */ +export const ENVIRONMENT_NAME = + import.meta.env.REACT_APP_ENVIRONMENT_NAME ?? 'local'; + /** All of the following used specifically for Algolia search */ export const DOCS_BASE_URL = 'https://linode.com'; export const COMMUNITY_BASE_URL = 'https://linode.com/community/'; @@ -71,8 +71,6 @@ export const LONGVIEW_ROOT = 'https://longview.linode.com/fetch'; /** optional variables */ export const SENTRY_URL = import.meta.env.REACT_APP_SENTRY_URL; -export const LOGIN_SESSION_LIFETIME_MS = 45 * 60 * 1000; -export const OAUTH_TOKEN_REFRESH_TIMEOUT = LOGIN_SESSION_LIFETIME_MS / 2; /** Adobe Analytics */ export const ADOBE_ANALYTICS_URL = import.meta.env @@ -84,13 +82,6 @@ export const PENDO_API_KEY = import.meta.env.REACT_APP_PENDO_API_KEY; /** for hard-coding token used for API Requests. Example: "Bearer 1234" */ export const ACCESS_TOKEN = import.meta.env.REACT_APP_ACCESS_TOKEN; -export const LOG_PERFORMANCE_METRICS = - !isProductionBuild && - import.meta.env.REACT_APP_LOG_PERFORMANCE_METRICS === 'true'; - -export const DISABLE_EVENT_THROTTLE = - Boolean(import.meta.env.REACT_APP_DISABLE_EVENT_THROTTLE) || false; - // read about luxon formats https://moment.github.io/luxon/docs/manual/formatting.html // this format is not ISO export const DATETIME_DISPLAY_FORMAT = 'yyyy-MM-dd HH:mm'; @@ -127,17 +118,9 @@ export const POLLING_INTERVALS = { IN_PROGRESS: 2_000, } as const; -/** - * Time after which data from the API is considered stale (half an hour) - */ -export const REFRESH_INTERVAL = 60 * 30 * 1000; - // Default error message for non-API errors export const DEFAULT_ERROR_MESSAGE = 'An unexpected error occurred.'; -// Default size limit for Images (some users have custom limits) -export const IMAGE_DEFAULT_LIMIT = 6144; - export const allowedHTMLTagsStrict: string[] = [ 'a', 'p', @@ -206,12 +189,6 @@ export const LINODE_NETWORK_IN = 40; */ export const nonClickEvents = ['profile_update']; -/** - * Root URL for Object Storage clusters and buckets. - * A bucket can be accessed at: {bucket}.{cluster}.OBJECT_STORAGE_ROOT - */ -export const OBJECT_STORAGE_ROOT = 'linodeobjects.com'; - /** * This delimiter is used to retrieve objects at just one hierarchical level. * As an example, assume the following objects are in a bucket: @@ -229,10 +206,6 @@ export const OBJECT_STORAGE_DELIMITER = '/'; // Value from 1-4 reflecting a minimum score from zxcvbn export const MINIMUM_PASSWORD_STRENGTH = 4; -// When true, use the mock API defined in serverHandlers.ts instead of making network requests -export const MOCK_SERVICE_WORKER = - import.meta.env.REACT_APP_MOCK_SERVICE_WORKER === 'true'; - // Maximum payment methods export const MAXIMUM_PAYMENT_METHODS = 6; @@ -275,12 +248,6 @@ export const ADDRESSES = { }, }; -export const ACCESS_LEVELS = { - none: 'none', - readOnly: 'read_only', - readWrite: 'read_write', -}; - // Linode Community URL accessible from the TopMenu Community icon export const LINODE_COMMUNITY_URL = 'https://linode.com/community'; @@ -294,44 +261,11 @@ export const OFFSITE_URL_REGEX = export const ONSITE_URL_REGEX = /^([A-Za-z0-9/\.\?=&\-~]){1,2000}$/; // Firewall links -export const CREATE_FIREWALL_LINK = - 'https://techdocs.akamai.com/cloud-computing/docs/create-a-cloud-firewall'; export const FIREWALL_GET_STARTED_LINK = 'https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-cloud-firewalls'; export const FIREWALL_LIMITS_CONSIDERATIONS_LINK = 'https://techdocs.akamai.com/cloud-computing/docs/cloud-firewall#limits-and-considerations'; -// A/B Testing LD metrics keys for DX Tools -export const LD_DX_TOOLS_METRICS_KEYS = { - CURL_CODE_SNIPPET: 'A/B Test: Step 2 : cURL copy code snippet (copy icon)', - CURL_RESOURCE_LINKS: 'A/B Test: Step 2 : DX Tools cURL resources links', - CURL_TAB_SELECTION: 'A/B Test: Step 2 : DX Tools cURL tab selection', - INTEGRATION_ANSIBLE_CODE_SNIPPET: - 'A/B Test: Step 2 : Integrations: Ansible copy code snippet (copy icon)', - INTEGRATION_ANSIBLE_RESOURCE_LINKS: - 'a-b-test-step-2-dx-tools-integrations-ansible-resources-links', - INTEGRATION_TAB_SELECTION: - 'A/B Test: Step 2 : DX Tools Integrations tab selection', - INTEGRATION_TERRAFORM_CODE_SNIPPET: - 'A/B Test: Step 2 : Integrations: Terraform copy code snippet (copy icon)', - INTEGRATION_TERRAFORM_RESOURCE_LINKS: - 'A/B Test: Step 2 : DX Tools integrations terraform resources links', - LINODE_CLI_CODE_SNIPPET: - 'A/B Test: Step 2 : Linode CLI Tab selection and copy code snippet (copy icon)', - LINODE_CLI_RESOURCE_LINKS: - 'A/B Test: Step 2 : DX Tools Linode CLI resources links', - LINODE_CLI_TAB_SELECTION: 'A/B Test: Step 2 : Linode CLI Tab Selection', - OPEN_MODAL: 'A/B Test: Step 1 : DX Tools Open Modal', - SDK_GO_CODE_SNIPPET: - 'A/B Test: Step 2 : SDK: GO copy code snippet (copy icon)', - SDK_GO_RESOURCE_LINKS: 'A/B Test: Step 2 : DX Tools SDK GO resources links', - SDK_PYTHON_CODE_SNIPPET: - 'A/B Test: Step 2 : SDK: Python copy code snippet (copy icon)', - SDK_PYTHON_RESOURCE_LINKS: - 'A/B Test: Step 2 : DX Tools SDK Python resources links', - SDK_TAB_SELECTION: 'A/B Test: Step 2 : DX Tools SDK tab selection', -}; - /** * An array of region IDs. * diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx index 11612a33de2..7a9d56d1c8c 100644 --- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx +++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx @@ -34,6 +34,7 @@ const options: { flag: keyof Flags; label: string }[] = [ { flag: 'linodeInterfaces', label: 'Linode Interfaces' }, { flag: 'lkeEnterprise', label: 'LKE-Enterprise' }, { flag: 'mtc2025', label: 'MTC 2025' }, + { flag: 'nodebalancerIpv6', label: 'NodeBalancer Dual Stack (IPv6)' }, { flag: 'nodebalancerVpc', label: 'NodeBalancer-VPC Integration' }, { flag: 'objMultiCluster', label: 'OBJ Multi-Cluster' }, { flag: 'objectStorageGen2', label: 'OBJ Gen2' }, @@ -141,6 +142,17 @@ const renderFlagItems = ( }); }; +interface NestedObject { + [key: string]: boolean | NestedObject; +} + +interface SetNestedValueOptions { + ldFlagsObj: NestedObject; + path: string[]; + storedFlagsObj: NestedObject; + updatedValue: boolean; +} + export const FeatureFlagTool = withFeatureFlagProvider(() => { const dispatch: Dispatch = useDispatch(); const flags = useFlags(); @@ -154,6 +166,39 @@ export const FeatureFlagTool = withFeatureFlagProvider(() => { } }, [dispatch]); + const setNestedValue = ({ + ldFlagsObj, + path, + storedFlagsObj, + updatedValue, + }: SetNestedValueOptions): NestedObject => { + const [currentKey, ...restPath] = path; + + // Merge original LD values and existing stored overrides at the current recursion level + const base = { + ...ldFlagsObj, // Keep original LD values at this level + ...storedFlagsObj, // Apply any existing stored overrides at this level + }; + + // Base case (final key in the path) + if (restPath.length === 0) { + return { + ...base, + [currentKey]: updatedValue, // Apply the new change + }; + } + + return { + ...base, + [currentKey]: setNestedValue({ + ldFlagsObj: (ldFlagsObj?.[currentKey] as NestedObject) ?? {}, + path: restPath, + storedFlagsObj: (storedFlagsObj?.[currentKey] as NestedObject) ?? {}, + updatedValue, + }), + }; + }; + const handleCheck = ( e: React.ChangeEvent, flag: keyof FlagSet @@ -162,26 +207,24 @@ export const FeatureFlagTool = withFeatureFlagProvider(() => { const storedFlags = getStorage(MOCK_FEATURE_FLAGS_STORAGE_KEY) || {}; const flagParts = flag.split('.'); - const updatedFlags = { ...storedFlags }; - // If the flag is not a nested flag, update it directly + // If the flag is not a nested flag, update it directly at the root level if (flagParts.length === 1) { - updatedFlags[flag] = updatedValue; - } else { - // If the flag is a nested flag, update the specific property that changed - const [parentKey, childKey] = flagParts; - const currentParentValue = ldFlags[parentKey]; - const existingValues = storedFlags[parentKey] || {}; - - // Only update the specific property that changed - updatedFlags[parentKey] = { - ...currentParentValue, // Keep original LD values - ...existingValues, // Apply any existing stored overrides - [childKey]: updatedValue, // Apply the new change - }; + updateFlagStorage({ ...storedFlags, [flag]: updatedValue }); + return; } - updateFlagStorage(updatedFlags); + // If the flag is a nested flag, recursively update only the specific property that changed, + // starting from the parentKey and preserving sibling values at each level + const [parentKey, ...restPath] = flagParts; + const updatedNested = setNestedValue({ + ldFlagsObj: ldFlags[parentKey], + storedFlagsObj: storedFlags[parentKey], + path: restPath, + updatedValue, + }); + + updateFlagStorage({ ...storedFlags, [parentKey]: updatedNested }); }; const updateFlagStorage = (updatedFlags: object) => { diff --git a/packages/manager/src/env.d.ts b/packages/manager/src/env.d.ts index 8e981d9ad2c..6a9f504cbdd 100644 --- a/packages/manager/src/env.d.ts +++ b/packages/manager/src/env.d.ts @@ -1,53 +1,37 @@ +/// +/// + // This file is where we override Vite types for env typesafety // https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript interface ImportMetaEnv { - BASE_URL: string; - DEV: boolean; - MODE: string; - PROD: boolean; REACT_APP_ACCESS_TOKEN?: string; REACT_APP_ADOBE_ANALYTICS_URL?: string; REACT_APP_ALGOLIA_APPLICATION_ID?: string; REACT_APP_ALGOLIA_SEARCH_KEY?: string; - REACT_APP_API_MAX_PAGE_SIZE?: number; REACT_APP_API_ROOT?: string; REACT_APP_APP_ROOT?: string; REACT_APP_CLIENT_ID?: string; - REACT_APP_DISABLE_EVENT_THROTTLE?: boolean; REACT_APP_DISABLE_NEW_RELIC?: boolean; REACT_APP_ENABLE_DEV_TOOLS?: boolean; REACT_APP_ENABLE_MAINTENANCE_MODE?: string; + REACT_APP_ENVIRONMENT_NAME?: string; REACT_APP_FORCE_SEARCH_TYPE?: 'api' | 'client'; REACT_APP_GPAY_ENV?: 'PRODUCTION' | 'TEST'; REACT_APP_GPAY_MERCHANT_ID?: string; REACT_APP_LAUNCH_DARKLY_ID?: string; - REACT_APP_LOG_PERFORMANCE_METRICS?: string; REACT_APP_LOGIN_ROOT?: string; - REACT_APP_MOCK_SERVICE_WORKER?: string; REACT_APP_PAYPAL_CLIENT_ID?: string; REACT_APP_PAYPAL_ENV?: string; REACT_APP_PENDO_API_KEY?: string; - // TODO: Parent/Child - Remove once we're off mocks. - REACT_APP_PROXY_PAT?: string; + REACT_APP_PROXY_PAT?: string; // @TODO: Parent/Child - Remove once we're off mocks. REACT_APP_SENTRY_URL?: string; REACT_APP_STATUS_PAGE_URL?: string; - SSR: boolean; } interface ImportMeta { readonly env: ImportMetaEnv; } -declare module '*.svg' { - const src: ComponentClass; - export default src; -} - -declare module '*?raw' { - const src: string; - export default src; -} - declare module 'logic-query-parser'; declare module 'search-string'; diff --git a/packages/manager/src/factories/accountRoles.ts b/packages/manager/src/factories/accountRoles.ts index 4f4b1744a80..55912c81015 100644 --- a/packages/manager/src/factories/accountRoles.ts +++ b/packages/manager/src/factories/accountRoles.ts @@ -73,7 +73,6 @@ export const accountRolesFactory = Factory.Sync.makeFactory({ 'list_account_logins', 'list_available_services', 'list_default_firewalls', - 'list_enrolled_beta_programs', 'list_service_transfers', 'list_user_grants', 'view_account', @@ -92,27 +91,6 @@ export const accountRolesFactory = Factory.Sync.makeFactory({ 'view_billing_invoice', 'view_billing_payment', 'view_payment_method', - 'list_events', - 'mark_event_seen', - 'view_event', - 'list_maintenances', - 'list_notifications', - 'list_oauth_clients', - 'view_oauth_client', - 'view_oauth_client_thumbnail', - 'list_profile_apps', - 'list_profile_devices', - 'list_profile_grants', - 'list_profile_logins', - 'list_profile_pats', - 'list_profile_security_questions', - 'list_profile_ssh_keys', - 'view_profile', - 'view_profile_app', - 'view_profile_device', - 'view_profile_login', - 'view_profile_pat', - 'view_profile_ssh_key', 'list_firewall_devices', 'list_firewall_rule_versions', 'list_firewall_rules', @@ -140,42 +118,24 @@ export const accountRolesFactory = Factory.Sync.makeFactory({ permissions: [ 'accept_service_transfer', 'acknowledge_account_agreement', - 'answer_profile_security_questions', 'cancel_account', 'cancel_service_transfer', - 'create_profile_pat', - 'create_profile_ssh_key', - 'create_profile_tfa_secret', 'create_service_transfer', 'create_user', - 'delete_profile_pat', - 'delete_profile_phone_number', - 'delete_profile_ssh_key', 'delete_user', - 'disable_profile_tfa', 'enable_managed', - 'enable_profile_tfa', 'enroll_beta_program', 'is_account_admin', 'list_account_agreements', 'list_account_logins', 'list_available_services', 'list_default_firewalls', - 'list_enrolled_beta_programs', 'list_service_transfers', 'list_user_grants', - 'revoke_profile_app', - 'revoke_profile_device', - 'send_profile_phone_number_verification_code', 'update_account', 'update_account_settings', - 'update_profile', - 'update_profile_pat', - 'update_profile_ssh_key', 'update_user', 'update_user_grants', - 'update_user_preferences', - 'verify_profile_phone_number', 'view_account', 'view_account_login', 'view_account_settings', diff --git a/packages/manager/src/factories/cloudpulse/services.ts b/packages/manager/src/factories/cloudpulse/services.ts index 0128ff411d6..0f04524547d 100644 --- a/packages/manager/src/factories/cloudpulse/services.ts +++ b/packages/manager/src/factories/cloudpulse/services.ts @@ -4,8 +4,8 @@ import { Factory } from '@linode/utilities'; import type { ServiceAlert } from '@linode/api-v4'; export const serviceAlertFactory = Factory.Sync.makeFactory({ - polling_interval_seconds: [1, 5, 10, 15], - evaluation_periods_seconds: [5, 10, 15, 20], + evaluation_period_seconds: [300, 900, 1800, 3600], + polling_interval_seconds: [300, 900, 1800, 3600], scope: ['entity', 'region', 'account'], }); diff --git a/packages/manager/src/factories/statusPage.ts b/packages/manager/src/factories/statusPage.ts index 6ae18bdd50b..a09482a21a1 100644 --- a/packages/manager/src/factories/statusPage.ts +++ b/packages/manager/src/factories/statusPage.ts @@ -7,7 +7,7 @@ import type { IncidentUpdate, Maintenance, MaintenanceResponse, -} from 'src/queries/statusPage'; +} from '@linode/queries'; const DATE = '2021-01-12T00:00:00.394Z'; diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index 5dd2a4c1821..7ada61d7967 100644 --- a/packages/manager/src/featureFlags.ts +++ b/packages/manager/src/featureFlags.ts @@ -50,6 +50,11 @@ interface BaseFeatureFlag { enabled: boolean; } +interface VMHostMaintenanceFlag extends BaseFeatureFlag { + beta: boolean; + new: boolean; +} + interface BetaFeatureFlag extends BaseFeatureFlag { beta: boolean; } @@ -147,6 +152,7 @@ export interface Flags { marketplaceAppOverrides: MarketplaceAppOverride[]; metadata: boolean; mtc2025: boolean; + nodebalancerIpv6: boolean; nodebalancerVpc: boolean; objectStorageGen2: BaseFeatureFlag; objMultiCluster: boolean; @@ -164,7 +170,7 @@ export interface Flags { taxId: BaseFeatureFlag; tpaProviders: Provider[]; udp: boolean; - vmHostMaintenance: BetaFeatureFlag; + vmHostMaintenance: VMHostMaintenanceFlag; vpcIpv6: boolean; } diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx index 3582a309c7f..9d3889d0b57 100644 --- a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx +++ b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx @@ -26,8 +26,9 @@ import { usePaginationV2 } from 'src/hooks/usePaginationV2'; import { MaintenanceTableRow } from './MaintenanceTableRow'; import { COMPLETED_MAINTENANCE_FILTER, + getMaintenanceDateField, + getMaintenanceDateLabel, IN_PROGRESS_MAINTENANCE_FILTER, - maintenanceDateColumnMap, PENDING_MAINTENANCE_FILTER, UPCOMING_MAINTENANCE_FILTER, } from './utilities'; @@ -111,7 +112,11 @@ export const MaintenanceTable = ({ type }: Props) => { false ); - const { data, error, isLoading } = useAccountMaintenanceQuery( + const { + data, + error, + isLoading = true, + } = useAccountMaintenanceQuery( { page: pagination.page, page_size: pagination.pageSize, @@ -120,26 +125,50 @@ export const MaintenanceTable = ({ type }: Props) => { ); const renderTableContent = () => { + const getColumnCount = () => { + if (type === 'in progress') { + // Entity, Label, Date, Type (hidden smDown), Reason (hidden lgDown) + return 5; + } + + // For other types: Entity, Label, When (hidden mdDown), Date, Type (hidden smDown), Status, Reason (hidden lgDown) + return 7; + }; + + const columnCount = getColumnCount(); + if (isLoading) { return ( ); } if (error) { - return ; + return ; } if (data?.results === 0) { - return ; + return ( + + ); } if (data) { @@ -222,13 +251,13 @@ export const MaintenanceTable = ({ type }: Props) => { )} - {maintenanceDateColumnMap[type][1]} + {getMaintenanceDateLabel(type)} )} diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx index 0645901afec..0cf3f0e7eae 100644 --- a/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx +++ b/packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx @@ -19,7 +19,7 @@ import { useInProgressEvents } from 'src/queries/events/events'; import { parseAPIDate } from 'src/utilities/date'; import { formatDate } from 'src/utilities/formatDate'; -import { maintenanceDateColumnMap } from './utilities'; +import { getMaintenanceDateField } from './utilities'; import type { MaintenanceTableType } from './MaintenanceTable'; import type { AccountMaintenance } from '@linode/api-v4/lib/account/types'; @@ -74,6 +74,9 @@ export const MaintenanceTableRow = (props: MaintenanceTableRowProps) => { const isTruncated = reason !== truncatedReason; + const dateField = getMaintenanceDateField(tableType); + const dateValue = props.maintenance[dateField]; + return ( @@ -117,12 +120,9 @@ export const MaintenanceTableRow = (props: MaintenanceTableRowProps) => { )} - {formatDate( - props.maintenance[maintenanceDateColumnMap[tableType][0]], - { - timezone: profile?.timezone, - } - )} + {dateValue + ? formatDate(dateValue, { timezone: profile?.timezone }) + : '—'} )} diff --git a/packages/manager/src/features/Account/Maintenance/utilities.ts b/packages/manager/src/features/Account/Maintenance/utilities.ts index cf2fa3bd09d..e382dbbe3f3 100644 --- a/packages/manager/src/features/Account/Maintenance/utilities.ts +++ b/packages/manager/src/features/Account/Maintenance/utilities.ts @@ -37,3 +37,14 @@ export const maintenanceDateColumnMap: Record< upcoming: ['start_time', 'Start Date'], pending: ['when', 'Date'], }; + +// Helper functions for better readability +export const getMaintenanceDateField = ( + type: MaintenanceTableType +): 'complete_time' | 'start_time' | 'when' => { + return maintenanceDateColumnMap[type][0]; +}; + +export const getMaintenanceDateLabel = (type: MaintenanceTableType): string => { + return maintenanceDateColumnMap[type][1]; +}; diff --git a/packages/manager/src/features/Account/MaintenancePolicy.tsx b/packages/manager/src/features/Account/MaintenancePolicy.tsx index ff84de694eb..91769002535 100644 --- a/packages/manager/src/features/Account/MaintenancePolicy.tsx +++ b/packages/manager/src/features/Account/MaintenancePolicy.tsx @@ -1,16 +1,28 @@ import { useAccountSettings, useMutateAccountSettings } from '@linode/queries'; -import { BetaChip, Box, Button, Paper, Stack, Typography } from '@linode/ui'; +import { + BetaChip, + Box, + Button, + NewFeatureChip, + Notice, + Paper, + Stack, + Typography, +} from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Link } from 'src/components/Link'; +import { + MAINTENANCE_POLICY_ACCOUNT_DESCRIPTION, + UPCOMING_MAINTENANCE_NOTICE, +} from 'src/components/MaintenancePolicySelect/constants'; import { MaintenancePolicySelect } from 'src/components/MaintenancePolicySelect/MaintenancePolicySelect'; import { useFlags } from 'src/hooks/useFlags'; +import { useUpcomingMaintenanceNotice } from 'src/hooks/useUpcomingMaintenanceNotice'; -import type { AccountSettings } from '@linode/api-v4'; - -type MaintenancePolicyValues = Pick; +import type { MaintenancePolicyValues } from 'src/hooks/useUpcomingMaintenanceNotice.ts'; export const MaintenancePolicy = () => { const { enqueueSnackbar } = useSnackbar(); @@ -20,18 +32,26 @@ export const MaintenancePolicy = () => { const flags = useFlags(); - const values: MaintenancePolicyValues = { - maintenance_policy: accountSettings?.maintenance_policy ?? 'linode/migrate', - }; - const { control, formState: { isDirty, isSubmitting }, handleSubmit, setError, } = useForm({ - defaultValues: values, - values, + defaultValues: { + maintenance_policy: 'linode/migrate', // Default to 'linode/migrate' if no policies are found + }, + values: accountSettings + ? { + maintenance_policy: accountSettings.maintenance_policy, + } + : undefined, + }); + + const { showUpcomingMaintenanceNotice } = useUpcomingMaintenanceNotice({ + control, + // For account-level settings, we don't have a specific entity ID + // The hook will check for any upcoming maintenance events }); const onSubmit = async (values: MaintenancePolicyValues) => { @@ -48,21 +68,23 @@ export const MaintenancePolicy = () => { return ( - Host Maintenance Policy {flags.vmHostMaintenance?.beta && } + Host Maintenance Policy {getFeatureChip(flags.vmHostMaintenance || {})}
- Select the preferred default host maintenance policy for newly - deployed Linodes. During host maintenance events (such as host - upgrades), this policy setting determines the type of migration that - is performed. This preference can be changed when creating new - Linodes or modifying existing Linodes.{' '} + {MAINTENANCE_POLICY_ACCOUNT_DESCRIPTION}{' '} Learn more . + {showUpcomingMaintenanceNotice && ( + + There are Linodes that have upcoming scheduled maintenance.{' '} + {UPCOMING_MAINTENANCE_NOTICE} + + )} { ); }; + +export const getFeatureChip = (vmHostMaintenance: { + beta?: boolean; + new?: boolean; +}) => { + if (vmHostMaintenance.beta) return ; + if (vmHostMaintenance.new) return ; + return null; +}; diff --git a/packages/manager/src/features/Account/Quotas/QuotasTableRow.tsx b/packages/manager/src/features/Account/Quotas/QuotasTableRow.tsx index 5ae748f69be..5c880a6189c 100644 --- a/packages/manager/src/features/Account/Quotas/QuotasTableRow.tsx +++ b/packages/manager/src/features/Account/Quotas/QuotasTableRow.tsx @@ -92,7 +92,7 @@ export const QuotasTableRow = (props: QuotasTableRowProps) => { { const isVMHostMaintenanceEnabled = Boolean(flags.vmHostMaintenance?.enabled); const isVMHostMaintenanceInBeta = Boolean(flags.vmHostMaintenance?.beta); + const isVMHostMaintenanceNew = Boolean(flags.vmHostMaintenance?.new); - return { isVMHostMaintenanceEnabled, isVMHostMaintenanceInBeta }; + return { + isVMHostMaintenanceEnabled, + isVMHostMaintenanceInBeta, + isVMHostMaintenanceNew, + }; }; /** diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx index a2d6dac8808..82c21ad9c55 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx @@ -241,7 +241,7 @@ export const BillingSummary = (props: BillingSummaryProps) => { Accrued Charges diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index af36073255d..45d76b458d6 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -305,7 +305,7 @@ export const PaymentDrawer = (props: Props) => { {paymentTooLow || selectedCardExpired ? ( { {taxIdIsVerifyingNotification && ( } - status="other" text={taxIdIsVerifyingNotification.label} /> )} diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx index 0d61a2b520d..5f468416397 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -73,7 +73,7 @@ export const AddPaymentMethodDrawer = (props: Props) => { const renderError = (errorMsg: string) => { return ( diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.test.tsx new file mode 100644 index 00000000000..c4b32a52c2d --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.test.tsx @@ -0,0 +1,76 @@ +import { regionFactory } from '@linode/utilities'; +import { screen } from '@testing-library/react'; +import React from 'react'; + +import { databaseFactory } from 'src/factories'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { AlertRegions } from './AlertRegions'; + +import type { AlertServiceType } from '@linode/api-v4'; +import type { Flags } from 'src/featureFlags'; + +const regions = regionFactory.buildList(6); +const serviceType: AlertServiceType = 'dbaas'; + +const flags: Partial = { + aclpResourceTypeMap: [ + { + serviceType, + supportedRegionIds: regions.map(({ id }) => id).join(','), + dimensionKey: 'region', + }, + ], +}; + +const queryMocks = vi.hoisted(() => ({ + useFlags: vi.fn(), + useRegionsQuery: vi.fn(), + useResourcesQuery: vi.fn(), +})); + +vi.mock('@linode/queries', async (importOriginal) => ({ + ...(await importOriginal()), + useRegionsQuery: queryMocks.useRegionsQuery, +})); + +vi.mock('src/queries/cloudpulse/resources', async (importOriginal) => ({ + ...(await importOriginal()), + useResourcesQuery: queryMocks.useResourcesQuery, +})); + +vi.mock('src/hooks/useFlags', async (importOriginal) => ({ + ...(await importOriginal()), + useFlags: queryMocks.useFlags, +})); + +queryMocks.useRegionsQuery.mockReturnValue({ + data: regions, + isLoading: false, + isError: false, +}); + +queryMocks.useResourcesQuery.mockReturnValue({ + data: databaseFactory.buildList(6, { region: regions[0].id }), + isLoading: false, + isError: false, +}); + +queryMocks.useFlags.mockReturnValue({ + flags: {}, +}); + +const component = ( + +); +describe('Alert Regions', () => { + it('Should render the filters and notices ', () => { + renderWithTheme(component, { flags }); + + const regionSearch = screen.getByTestId('region-search'); + const showSelectedOnly = screen.getByTestId('show-selected-only'); + + expect(regionSearch).toBeInTheDocument(); + expect(showSelectedOnly).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.tsx new file mode 100644 index 00000000000..ac01a686bcd --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.tsx @@ -0,0 +1,153 @@ +import { useRegionsQuery } from '@linode/queries'; +import { Box, Checkbox, CircleProgress, Stack } from '@linode/ui'; +import { Typography } from '@linode/ui'; +import React from 'react'; + +import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; +import { useFlags } from 'src/hooks/useFlags'; +import { useResourcesQuery } from 'src/queries/cloudpulse/resources'; + +import { type AlertFormMode } from '../constants'; +import { AlertListNoticeMessages } from '../Utils/AlertListNoticeMessages'; +import { getSupportedRegions } from '../Utils/utils'; +import { DisplayAlertRegions } from './DisplayAlertRegions'; + +import type { AlertServiceType, Filter, Region } from '@linode/api-v4'; + +interface AlertRegionsProps { + /** + * Error message to be displayed when there is an error. + */ + errorText?: string; + /** + * Function to handle changes in the selected regions. + */ + handleChange?: (regionIds: string[]) => void; + /** + * Flag to indicate if the component is in view-only mode. + */ + mode?: AlertFormMode; + /** + * The service type for which the regions are being selected. + */ + serviceType: AlertServiceType | null; + /** + * The selected regions. + */ + value?: string[]; +} + +export const AlertRegions = React.memo((props: AlertRegionsProps) => { + const { serviceType, handleChange, value = [], errorText, mode } = props; + const { aclpResourceTypeMap } = useFlags(); + const [searchText, setSearchText] = React.useState(''); + const { data: regions, isLoading: isRegionsLoading } = useRegionsQuery(); + + // Todo: State variable will be added when checkbox functionality implemented + const [, setSelectedRegions] = React.useState(value); + const [showSelected, setShowSelected] = React.useState(false); + + const resourceFilterMap: Record = { + dbaas: { + platform: 'rdbms-default', + }, + }; + const { data: resources, isLoading: isResourcesLoading } = useResourcesQuery( + Boolean(serviceType && regions?.length), + serviceType === null ? undefined : serviceType, + {}, + { + ...(resourceFilterMap[serviceType ?? ''] ?? {}), + } + ); + + const handleSelectionChange = React.useCallback( + (regionId: string, isChecked: boolean) => { + if (isChecked) { + setSelectedRegions((prev) => { + const newValue = [...prev, regionId]; + if (handleChange) { + handleChange(newValue); + } + return newValue; + }); + return; + } + + setSelectedRegions((prev) => { + const newValue = prev.filter((region) => region !== regionId); + + if (handleChange) { + handleChange(newValue); + } + return newValue; + }); + }, + [handleChange] + ); + + const filteredRegionsWithStatus: Region[] = React.useMemo( + () => + getSupportedRegions({ + serviceType, + resources, + regions, + aclpResourceTypeMap, + }), + [aclpResourceTypeMap, regions, resources, serviceType] + ); + + if (isRegionsLoading || isResourcesLoading) { + return ; + } + const filteredRegionsBySearchText = filteredRegionsWithStatus.filter( + ({ label }) => label.toLowerCase().includes(searchText.toLowerCase()) + ); + + return ( + + {mode === 'view' && Regions} + + + + {mode !== 'view' && ( + setShowSelected(checked)} + sx={(theme) => ({ + svg: { + backgroundColor: theme.tokens.color.Neutrals.White, + }, + })} + sxFormLabel={{ + marginLeft: -1, + }} + text="Show Selected Only" + value="Show Selected" + /> + )} + + {errorText && ( + + )} + + + + ); +}); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.test.tsx new file mode 100644 index 00000000000..8fbfe8c6b0c --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.test.tsx @@ -0,0 +1,61 @@ +import { regionFactory } from '@linode/utilities'; +import { screen, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { DisplayAlertRegions } from './DisplayAlertRegions'; + +const regions = regionFactory.buildList(10); + +const handleChange = vi.fn(); + +describe('DisplayAlertRegions', () => { + it('should render the regions table', () => { + renderWithTheme( + + ); + + const table = screen.getByTestId('region-table'); + expect(table).toBeInTheDocument(); + + const rows = screen.getAllByRole('row'); + expect(rows.length).toBe(regions.length + 1); // +1 for header row + }); + + it('should display checkbox and label', () => { + renderWithTheme( + + ); + + const row = screen.getByTestId(`region-row-${regions[0].id}`); + + const rowChildren = within(row); + + expect(rowChildren.getByRole('checkbox')).toBeInTheDocument(); + expect( + rowChildren.getByText(`${regions[0].label} (${regions[0].id})`) + ).toBeInTheDocument(); + }); + + it('should select checkbox when clicked', async () => { + renderWithTheme( + + ); + const row = screen.getByTestId(`region-row-${regions[0].id}`); + const checkbox = within(row).getByRole('checkbox'); + await userEvent.click(checkbox); + + expect(handleChange).toHaveBeenCalledWith(regions[0].id, true); + }); +}); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.tsx new file mode 100644 index 00000000000..9df2c56bb9c --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertRegions/DisplayAlertRegions.tsx @@ -0,0 +1,121 @@ +import { Box, Checkbox } from '@linode/ui'; +import { TableBody, TableHead } from '@mui/material'; +import React from 'react'; + +import Paginate from 'src/components/Paginate'; +import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; +import { Table } from 'src/components/Table'; +import { TableCell } from 'src/components/TableCell/TableCell'; +import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; +import { TableRow } from 'src/components/TableRow'; +import { TableSortCell } from 'src/components/TableSortCell'; + +import type { AlertFormMode } from '../constants'; +import type { Region } from '@linode/api-v4'; + +interface DisplayAlertRegionProps { + /** + * Function to handle the change in selection of a region. + */ + handleSelectionChange: (regionId: string, isChecked: boolean) => void; + + /** + * Flag to indicate the mode of the form + */ + mode?: AlertFormMode; + /** + * List of regions to be displayed. + */ + regions?: Region[]; + /** + * To indicate whether to show only selected regions or not. + */ + showSelected?: boolean; +} + +export const DisplayAlertRegions = React.memo( + (props: DisplayAlertRegionProps) => { + const { regions, handleSelectionChange, mode } = props; + + return ( + + {({ + count, + page, + pageSize, + handlePageChange, + handlePageSizeChange, + data: paginatedData, + }) => ( + + + + + {mode !== 'view' && ( + + + {}} + /> + + + )} + {}} + label="Region" + > + Region + + + + + + {paginatedData.map(({ label, id }) => { + return ( + + {mode !== 'view' && ( + + + handleSelectionChange(id, status) + } + /> + + )} + + + {label} ({id}) + + + ); + })} + + +
+ + + )} + + ); + } +); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.test.tsx index 6a469f94974..0d4a8f07bfb 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.test.tsx @@ -20,12 +20,12 @@ describe('Alert confirmation dialog', () => { it('should show confirmation dialog', () => { const { getByTestId, getByText } = renderWithTheme( ); @@ -36,12 +36,12 @@ describe('Alert confirmation dialog', () => { it('should click confirm button', async () => { const { getByText } = renderWithTheme( ); @@ -49,17 +49,17 @@ describe('Alert confirmation dialog', () => { await userEvent.click(button); - expect(confirmFunction).toBeCalledWith(alert, true); + expect(confirmFunction).toBeCalled(); }); it('should show enable text', async () => { const { getByTestId, getByText } = renderWithTheme( ); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.tsx index 5138633d40a..cf89aad0c2c 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertConfirmationDialog.tsx @@ -3,14 +3,7 @@ import React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import type { Alert } from '@linode/api-v4'; - interface AlertConfirmationDialogProps { - /** - * alert object of the selected row - */ - alert: Alert; - /** * Handler function for cancel button */ @@ -18,15 +11,8 @@ interface AlertConfirmationDialogProps { /** * Handler function for enable/disable button - * @param alert selected alert from the row - * @param currentStatus current state of the toggle button - */ - handleConfirm: (alert: Alert, currentStatus: boolean) => void; - - /** - * Current state of the toggle button whether active or not */ - isEnabled: boolean; + handleConfirm: () => void; /** * Loading state of the confirmation dialog @@ -41,27 +27,37 @@ interface AlertConfirmationDialogProps { /** * Message to be displayed in the confirmation dialog */ - message: string; + message: React.ReactNode; + + /** + * Label of the primary button + */ + primaryButtonLabel: string; + + /** + * Title of the confirmation dialog + */ + title: string; } export const AlertConfirmationDialog = React.memo( (props: AlertConfirmationDialogProps) => { const { - alert, handleCancel, handleConfirm, - isEnabled, isLoading = false, isOpen, message, + title, + primaryButtonLabel, } = props; const actionsPanel = ( handleConfirm(alert, isEnabled), + onClick: handleConfirm, }} secondaryButtonProps={{ disabled: isLoading, @@ -77,7 +73,7 @@ export const AlertConfirmationDialog = React.memo( data-testid="confirmation-dialog" onClose={handleCancel} open={isOpen} - title={`${isEnabled ? 'Disable' : 'Enable'} ${alert.label} Alert?`} + title={title} > {message} diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx index f03d49a373d..e64112a8218 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx @@ -343,15 +343,15 @@ export const AlertsListTable = React.memo((props: AlertsListTableProps) => { }} handleConfirm(selectedAlert, isEnabled)} isLoading={isUpdating} isOpen={isDialogOpen} message={`Are you sure you want to ${ isEnabled ? 'disable' : 'enable' } this alert definition?`} + primaryButtonLabel={`${isEnabled ? 'Disable' : 'Enable'}`} + title={`${isEnabled ? 'Disable' : 'Enable'} ${selectedAlert.label} Alert?`} /> { ); } - const filtersToRender = serviceToFiltersMap[serviceType ?? '']; + const filtersToRender = + serviceToFiltersMap[serviceType ?? ''] ?? serviceToFiltersMap['']; const noticeStyles: React.CSSProperties = { alignItems: 'center', backgroundColor: theme.tokens.alias.Background.Normal, diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsResources/DisplayAlertResources.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsResources/DisplayAlertResources.tsx index d9f9c4a2ce0..55b062d6bc8 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsResources/DisplayAlertResources.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsResources/DisplayAlertResources.tsx @@ -178,7 +178,8 @@ export const DisplayAlertResources = React.memo( return selectionsRemaining < uncheckedCount; // find if there is appropriate space for root checkbox to be enabled }; - const columns = serviceTypeBasedColumns[serviceType ?? '']; + const columns = + serviceTypeBasedColumns[serviceType ?? ''] ?? serviceTypeBasedColumns['']; const colSpanCount = isSelectionsNeeded ? columns.length + 1 : columns.length; diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.test.tsx index 26c433a6a6e..62d60ef119c 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.test.tsx @@ -1,9 +1,11 @@ import { capitalize } from '@linode/utilities'; +import { screen } from '@testing-library/react'; import React from 'react'; import { alertFactory } from 'src/factories'; import { renderWithTheme } from 'src/utilities/testHelpers'; +import { alertScopeLabelMap } from '../AlertsListing/constants'; import { processMetricCriteria } from '../Utils/utils'; import { AlertInformationActionRow } from './AlertInformationActionRow'; @@ -11,7 +13,7 @@ describe('Alert list table row', () => { it('Should display the data', () => { const alert = alertFactory.build(); - const { getByText } = renderWithTheme( + renderWithTheme( { /> ); - expect(getByText(alert.label)).toBeInTheDocument(); - expect(getByText(capitalize(alert.type))).toBeInTheDocument(); + expect(screen.getByText(alert.label)).toBeVisible(); + expect(screen.getByText(capitalize(alert.type))).toBeVisible(); + expect(screen.getByText(alertScopeLabelMap[alert.scope])).toBeVisible(); }); it('Should display metric threshold', () => { @@ -40,9 +43,11 @@ describe('Alert list table row', () => { ).toBeInTheDocument(); }); - it('Should have toggle button disabled', () => { - const alert = alertFactory.build(); - const { getByRole } = renderWithTheme( + it('Should have toggle button disabled if alert is region or account level and show tooltip', () => { + const alert = alertFactory.build({ + scope: 'region', + }); + renderWithTheme( { /> ); - expect(getByRole('checkbox')).toHaveProperty('checked'); + expect(screen.getByRole('checkbox')).toHaveProperty('checked'); + expect(screen.getByRole('checkbox')).toBeDisabled(); + + expect( + screen.getByLabelText( + "Region-level alerts can't be enabled or disabled for a single entity." + ) + ).toBeVisible(); }); }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.tsx index 0e7dbc33c35..2d143c2f075 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionRow.tsx @@ -6,6 +6,7 @@ import { Link } from 'src/components/Link'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; +import { alertScopeLabelMap } from '../AlertsListing/constants'; import { processMetricCriteria } from '../Utils/utils'; import { MetricThreshold } from './MetricThreshold'; @@ -35,13 +36,30 @@ export const AlertInformationActionRow = ( const { alert, handleToggle, status = false } = props; const { id, label, rule_criteria, service_type, type } = alert; const metricThreshold = processMetricCriteria(rule_criteria.rules); + const isAccountOrRegionLevelAlert = + alert.scope === 'region' || alert.scope === 'account'; return ( handleToggle(alert)} /> + handleToggle(alert)} + sx={(theme) => ({ + '& .Mui-disabled+.MuiSwitch-track': { + backgroundColor: theme.tokens.color.Brand[80] + '!important', + opacity: '0.3 !important', + }, + })} + tooltipText={ + isAccountOrRegionLevelAlert + ? `${alertScopeLabelMap[alert.scope]}-level alerts can't be enabled or disabled for a single entity.` + : undefined + } + /> } label={''} /> @@ -63,6 +81,7 @@ export const AlertInformationActionRow = ( {capitalize(type)} + {alertScopeLabelMap[alert.scope]} ); }; diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.test.tsx index f00aadc8159..4de285d50fd 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.test.tsx @@ -1,4 +1,5 @@ import { within } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -26,24 +27,25 @@ const columns: TableColumnHeader[] = [ { columnName: 'Alert Name', label: 'label' }, { columnName: 'Metric Threshold', label: 'id' }, { columnName: 'Alert Type', label: 'type' }, + { columnName: 'Scope', label: 'scope' }, ]; const props: AlertInformationActionTableProps = { alerts, columns, entityId, entityName, + serviceType, orderByColumn: 'Alert Name', }; describe('Alert Listing Reusable Table for contextual view', () => { - it('Should render alert table', () => { - const { getByText } = renderWithTheme( - - ); + it('Should render alert table', async () => { + renderWithTheme(); - expect(getByText('Alert Name')).toBeInTheDocument(); - expect(getByText('Metric Threshold')).toBeInTheDocument(); - expect(getByText('Alert Type')).toBeInTheDocument(); + expect(screen.getByText('Alert Name')).toBeVisible(); + expect(screen.getByText('Metric Threshold')).toBeVisible(); + expect(screen.getByText('Alert Type')).toBeVisible(); + expect(screen.getByText('Scope')).toBeVisible(); }); it('Should show message for empty table', () => { @@ -54,7 +56,7 @@ describe('Alert Listing Reusable Table for contextual view', () => { expect(getByText('No data to display.')).toBeInTheDocument(); }); - it('Shoud render table row toggle in table row', async () => { + it('Should render table row toggle in table row', async () => { const { findByTestId } = renderWithTheme( ); @@ -66,18 +68,28 @@ describe('Alert Listing Reusable Table for contextual view', () => { expect(checkbox).toHaveProperty('checked'); }); - it('Should show confirm dialog on checkbox click', async () => { - const { findByTestId, findByText } = renderWithTheme( - - ); + it('Should show confirm dialog on save button click when changes are made', async () => { + renderWithTheme(); + + // First toggle an alert to make changes const alert = alerts[0]; - const row = await findByTestId(alert.id); + const row = await screen.findByTestId(alert.id); + const toggle = await within(row).findByRole('checkbox'); + await userEvent.click(toggle); - const checkbox = await within(row).findByRole('checkbox'); + // Now the save button should be enabled + const saveButton = screen.getByTestId('save-alerts'); + expect(saveButton).not.toBeDisabled(); + + // Click save and verify dialog appears + await userEvent.click(saveButton); + expect(screen.getByTestId('confirmation-dialog')).toBeVisible(); + }); - await userEvent.click(checkbox); + it('Should have save button in disabled form when no changes are made', () => { + renderWithTheme(); - const text = await findByText(`Disable ${alert.label} Alert?`); - expect(text).toBeInTheDocument(); + const saveButton = screen.getByTestId('save-alerts'); + expect(saveButton).toBeDisabled(); }); }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.tsx index d3c5481cccb..48f58e8d6de 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.tsx @@ -1,4 +1,5 @@ -import { Box } from '@linode/ui'; +import { type Alert, type APIError } from '@linode/api-v4'; +import { Box, Button, TooltipIcon } from '@linode/ui'; import { Grid, TableBody, TableHead } from '@mui/material'; import { useSnackbar } from 'notistack'; import React from 'react'; @@ -12,21 +13,16 @@ import { TableCell } from 'src/components/TableCell'; import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; -import { - useAddEntityToAlert, - useRemoveEntityFromAlert, -} from 'src/queries/cloudpulse/alerts'; +import { useServiceAlertsMutation } from 'src/queries/cloudpulse/alerts'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import { useContextualAlertsState } from '../../Utils/utils'; import { AlertConfirmationDialog } from '../AlertsLanding/AlertConfirmationDialog'; +import { ALERT_SCOPE_TOOLTIP_CONTEXTUAL } from '../constants'; +import { scrollToElement } from '../Utils/AlertResourceUtils'; import { AlertInformationActionRow } from './AlertInformationActionRow'; -import type { - Alert, - APIError, - CloudPulseAlertsPayload, - EntityAlertUpdatePayload, -} from '@linode/api-v4'; +import type { CloudPulseAlertsPayload } from '@linode/api-v4'; export interface AlertInformationActionTableProps { /** @@ -67,6 +63,11 @@ export interface AlertInformationActionTableProps { * Column name by which columns will be ordered by default */ orderByColumn: string; + + /** + * Service type of the selected entity + */ + serviceType: string; } export interface TableColumnHeader { @@ -110,112 +111,106 @@ export const AlertInformationActionTable = ( entityName, error, orderByColumn, + serviceType, onToggleAlert, } = props; + const alertsTableRef = React.useRef(null); + const _error = error ? getAPIErrorOrDefault(error, 'Error while fetching the alerts') : undefined; const { enqueueSnackbar } = useSnackbar(); - const [selectedAlert, setSelectedAlert] = React.useState({} as Alert); const [isDialogOpen, setIsDialogOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); - const [enabledAlerts, setEnabledAlerts] = - React.useState({ - system: [], - user: [], - }); - - const { mutateAsync: addEntity } = useAddEntityToAlert(); - - const { mutateAsync: removeEntity } = useRemoveEntityFromAlert(); - const getAlertRowProps = (alert: Alert, options: AlertRowPropsOptions) => { - const { entityId, enabledAlerts, onToggleAlert } = options; + const isEditMode = !!entityId; + const isCreateMode = !!onToggleAlert; - // Ensure that at least one of entityId or onToggleAlert is provided - if (!(entityId || onToggleAlert)) { - return null; - } + const { enabledAlerts, setEnabledAlerts, hasUnsavedChanges } = + useContextualAlertsState(alerts, entityId); - const isEditMode = !!entityId; - - const handleToggle = isEditMode - ? handleToggleEditFlow - : handleToggleCreateFlow; - const status = isEditMode - ? alert.entity_ids.includes(entityId) - : enabledAlerts[alert.type].includes(alert.id); - - return { handleToggle, status }; - }; + const { mutateAsync: updateAlerts } = useServiceAlertsMutation( + serviceType, + entityId ?? '' + ); const handleCancel = () => { setIsDialogOpen(false); }; - const handleConfirm = React.useCallback( - (alert: Alert, currentStatus: boolean) => { - if (entityId === undefined) return; - - const payload: EntityAlertUpdatePayload = { - alert, - entityId, - }; + const handleConfirm = React.useCallback( + (alertIds: CloudPulseAlertsPayload) => { setIsLoading(true); - (currentStatus ? removeEntity(payload) : addEntity(payload)) + updateAlerts({ + user: alertIds.user, + system: alertIds.system, + }) .then(() => { - enqueueSnackbar( - `The alert settings for ${entityName} saved successfully.`, - { variant: 'success' } - ); + enqueueSnackbar('Your settings for alerts have been saved.', { + variant: 'success', + }); }) .catch(() => { - enqueueSnackbar( - `${currentStatus ? 'Disabling' : 'Enabling'} alert failed.`, - { - variant: 'error', - } - ); + enqueueSnackbar('Alerts changes were not saved, please try again.', { + variant: 'error', + }); }) .finally(() => { setIsLoading(false); setIsDialogOpen(false); }); }, - [addEntity, enqueueSnackbar, entityId, entityName, removeEntity] + [updateAlerts, enqueueSnackbar] ); - const handleToggleEditFlow = (alert: Alert) => { - setIsDialogOpen(true); - setSelectedAlert(alert); - }; - - const handleToggleCreateFlow = (alert: Alert) => { - if (!onToggleAlert) return; - - setEnabledAlerts((prev: CloudPulseAlertsPayload) => { - const newPayload = { ...prev }; - const index = newPayload[alert.type].indexOf(alert.id); - // If the alert is already in the payload, remove it, otherwise add it - if (index !== -1) { - newPayload[alert.type].splice(index, 1); - } else { - newPayload[alert.type].push(alert.id); - } - - onToggleAlert(newPayload); - return newPayload; - }); - }; + const handleToggleAlert = React.useCallback( + (alert: Alert) => { + setEnabledAlerts((prev: CloudPulseAlertsPayload) => { + const newPayload = { + system: [...(prev.system ?? [])], + user: [...(prev.user ?? [])], + }; + + const alertIds = newPayload[alert.type]; + const isCurrentlyEnabled = alertIds.includes(alert.id); + + if (isCurrentlyEnabled) { + // Remove alert - disable it + const index = alertIds.indexOf(alert.id); + alertIds.splice(index, 1); + } else { + // Add alert - enable it + alertIds.push(alert.id); + } + + // Only call onToggleAlert in create flow + if (onToggleAlert) { + onToggleAlert(newPayload); + } + + return newPayload; + }); + }, + [onToggleAlert, setEnabledAlerts] + ); - const isEnabled = selectedAlert.entity_ids?.includes(entityId ?? '') ?? false; + const handleCustomPageChange = React.useCallback( + (page: number, handlePageChange: (page: number) => void) => { + handlePageChange(page); + handlePageChange(page); + requestAnimationFrame(() => { + scrollToElement(alertsTableRef.current); + }); + }, + [] + ); return ( <> {({ data: orderedData, handleOrderChange, order, orderBy }) => ( - + {({ count, data: paginatedAndOrderedAlerts, @@ -224,82 +219,131 @@ export const AlertInformationActionTable = ( page, pageSize, }) => ( - - - - - - - {columns.map(({ columnName, label }) => { + <> + + +
+ + + + {columns.map(({ columnName, label }) => { + return ( + + {columnName} + {columnName === 'Scope' && ( + + )} + + ); + })} + + + + + {paginatedAndOrderedAlerts?.map((alert) => { + if (!(isEditMode || isCreateMode)) { + return null; + } + + // TODO: Remove this once we have a way to toggle ACCOUNT and REGION level alerts + if (!isEditMode && alert.scope !== 'entity') { + return null; + } + + const status = enabledAlerts[alert.type]?.includes( + alert.id + ); + return ( - - {columnName} - + ); })} - - - - - {paginatedAndOrderedAlerts?.map((alert) => { - const rowProps = getAlertRowProps(alert, { - enabledAlerts, - entityId, - onToggleAlert, + +
+ + + handleCustomPageChange(page, handlePageChange) + } + handleSizeChange={handlePageSizeChange} + page={page} + pageSize={pageSize} + /> + + {isEditMode && ( + + + + )} + )} )} handleConfirm(enabledAlerts)} isLoading={isLoading} isOpen={isDialogOpen} - message={`Are you sure you want to - ${isEnabled ? 'disable' : 'enable'} the alert for ${entityName}?`} + message={ + <> + Are you sure you want to save these settings for {entityName}? All + legacy alert settings will be disabled and replaced by the new{' '} + Alerts(Beta) settings. + + } + primaryButtonLabel="Save" + title="Save Alerts?" /> ); diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.test.tsx index f882e82d04b..6799845c82d 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.test.tsx @@ -8,19 +8,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers'; import { AlertReusableComponent } from './AlertReusableComponent'; const mockQuery = vi.hoisted(() => ({ - useAddEntityToAlert: vi.fn(), useAlertDefinitionByServiceTypeQuery: vi.fn(), - useRemoveEntityFromAlert: vi.fn(), + useServiceAlertsMutation: vi.fn(), })); vi.mock('src/queries/cloudpulse/alerts', async () => { const actual = vi.importActual('src/queries/cloudpulse/alerts'); return { ...actual, - useAddEntityToAlert: mockQuery.useAddEntityToAlert, useAlertDefinitionByServiceTypeQuery: mockQuery.useAlertDefinitionByServiceTypeQuery, - useRemoveEntityFromAlert: mockQuery.useRemoveEntityFromAlert, + useServiceAlertsMutation: mockQuery.useServiceAlertsMutation, }; }); const serviceType = 'linode'; @@ -55,10 +53,7 @@ const component = ( ); mockQuery.useAlertDefinitionByServiceTypeQuery.mockReturnValue(mockReturnValue); -mockQuery.useAddEntityToAlert.mockReturnValue({ - mutateAsync: vi.fn(), -}); -mockQuery.useRemoveEntityFromAlert.mockReturnValue({ +mockQuery.useServiceAlertsMutation.mockReturnValue({ mutateAsync: vi.fn(), }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx index 68b7f1c65cc..9840478ee92 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx @@ -1,18 +1,17 @@ import { Autocomplete, + BetaChip, Box, Button, CircleProgress, Paper, Stack, - Tooltip, Typography, } from '@linode/ui'; import React from 'react'; // eslint-disable-next-line no-restricted-imports import { useHistory } from 'react-router-dom'; -import InfoIcon from 'src/assets/icons/info.svg'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { useAlertDefinitionByServiceTypeQuery } from 'src/queries/cloudpulse/alerts'; @@ -65,11 +64,10 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => { AlertDefinitionType | undefined >(); - // Filter alerts based on serach text & selected type - const filteredAlerts = filterAlertsByStatusAndType( - alerts, - searchText, - selectedType + // Filter alerts based on status, search text & selected type + const filteredAlerts = React.useMemo( + () => filterAlertsByStatusAndType(alerts, searchText, selectedType), + [alerts, searchText, selectedType] ); const history = useHistory(); @@ -87,11 +85,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => { Alerts - - - - - + + + + ); +}; diff --git a/packages/manager/src/features/DataStream/Destinations/Destinations.tsx b/packages/manager/src/features/DataStream/Destinations/Destinations.tsx deleted file mode 100644 index 72bb42fa7a8..00000000000 --- a/packages/manager/src/features/DataStream/Destinations/Destinations.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; - -export const Destinations = () => { - return

Content for Destinations tab

; -}; diff --git a/packages/manager/src/features/DataStream/Destinations/DestinationsLanding.tsx b/packages/manager/src/features/DataStream/Destinations/DestinationsLanding.tsx new file mode 100644 index 00000000000..acfc662755c --- /dev/null +++ b/packages/manager/src/features/DataStream/Destinations/DestinationsLanding.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; + +import { DestinationsLandingEmptyState } from 'src/features/DataStream/Destinations/DestinationsLandingEmptyState'; + +export const DestinationsLanding = () => { + return ; +}; diff --git a/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyState.tsx b/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyState.tsx new file mode 100644 index 00000000000..d25cdfa1b63 --- /dev/null +++ b/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyState.tsx @@ -0,0 +1,41 @@ +import { useNavigate } from '@tanstack/react-router'; +import * as React from 'react'; + +import ComputeIcon from 'src/assets/icons/entityIcons/compute.svg'; +import { DocumentTitleSegment } from 'src/components/DocumentTitle'; +import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection'; +import { + gettingStartedGuides, + headers, + linkAnalyticsEvent, +} from 'src/features/DataStream/Destinations/DestinationsLandingEmptyStateData'; +import { sendEvent } from 'src/utilities/analytics/utils'; + +export const DestinationsLandingEmptyState = () => { + const navigate = useNavigate(); + + return ( + <> + + { + sendEvent({ + action: 'Click:button', + category: linkAnalyticsEvent.category, + label: 'Create Destination', + }); + navigate({ to: '/datastream/destinations/create' }); + }, + }, + ]} + gettingStartedGuidesData={gettingStartedGuides} + headers={headers} + icon={ComputeIcon} + linkAnalyticsEvent={linkAnalyticsEvent} + /> + + ); +}; diff --git a/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyStateData.ts b/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyStateData.ts new file mode 100644 index 00000000000..95389029e42 --- /dev/null +++ b/packages/manager/src/features/DataStream/Destinations/DestinationsLandingEmptyStateData.ts @@ -0,0 +1,36 @@ +import { + docsLink, + guidesMoreLinkText, +} from 'src/utilities/emptyStateLandingUtils'; + +import type { + ResourcesHeaders, + ResourcesLinks, + ResourcesLinkSection, +} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes'; + +export const headers: ResourcesHeaders = { + title: 'Destinations', + subtitle: '', + description: 'Create a destination for cloud logs', +}; + +export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = { + action: 'Click:link', + category: 'Destinations landing page empty', +}; + +export const gettingStartedGuides: ResourcesLinkSection = { + links: [ + { + // TODO: Change the link and text when proper documentation is ready + text: 'Getting started guide', + to: 'https://techdocs.akamai.com/cloud-computing/docs', + }, + ], + moreInfo: { + text: guidesMoreLinkText, + to: docsLink, + }, + title: 'Getting Started Guides', +}; diff --git a/packages/manager/src/features/DataStream/Shared/DestinationLinodeObjectStorageDetailsForm.tsx b/packages/manager/src/features/DataStream/Shared/DestinationLinodeObjectStorageDetailsForm.tsx new file mode 100644 index 00000000000..028718189bd --- /dev/null +++ b/packages/manager/src/features/DataStream/Shared/DestinationLinodeObjectStorageDetailsForm.tsx @@ -0,0 +1,116 @@ +import { useRegionsQuery } from '@linode/queries'; +import { useIsGeckoEnabled } from '@linode/shared'; +import { Box, Divider, TextField, Typography } from '@linode/ui'; +import React from 'react'; +import { Controller, useFormContext } from 'react-hook-form'; + +import { HideShowText } from 'src/components/PasswordInput/HideShowText'; +import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; +import { PathSample } from 'src/features/DataStream/Shared/PathSample'; +import { useFlags } from 'src/hooks/useFlags'; + +export const DestinationLinodeObjectStorageDetailsForm = () => { + const { gecko2 } = useFlags(); + const { isGeckoLAEnabled } = useIsGeckoEnabled(gecko2?.enabled, gecko2?.la); + const { data: regions } = useRegionsQuery(); + const { control } = useFormContext(); + + return ( + <> + ( + { + field.onChange(value); + }} + placeholder="Host..." + value={field.value} + /> + )} + rules={{ required: true }} + /> + ( + { + field.onChange(value); + }} + placeholder="Bucket..." + value={field.value} + /> + )} + rules={{ required: true }} + /> + ( + field.onChange(region.id)} + regionFilter="core" + regions={regions ?? []} + value={field.value} + /> + )} + /> + ( + field.onChange(value)} + placeholder="Access Key ID..." + value={field.value} + /> + )} + /> + ( + field.onChange(value)} + placeholder="Secret Access Key..." + value={field.value} + /> + )} + /> + + Path + + ( + field.onChange(value)} + placeholder="Log Path Prefix..." + value={field.value} + /> + )} + /> + + + + ); +}; diff --git a/packages/manager/src/features/DataStream/Shared/types.ts b/packages/manager/src/features/DataStream/Shared/types.ts new file mode 100644 index 00000000000..8f90047e7da --- /dev/null +++ b/packages/manager/src/features/DataStream/Shared/types.ts @@ -0,0 +1,39 @@ +export const destinationType = { + CustomHttps: 'custom_https', + LinodeObjectStorage: 'linode_object_storage', +} as const; + +export type DestinationType = + (typeof destinationType)[keyof typeof destinationType]; + +export interface DestinationTypeOption { + label: string; + value: string; +} + +export const destinationTypeOptions: DestinationTypeOption[] = [ + { + value: destinationType.CustomHttps, + label: 'Custom HTTPS', + }, + { + value: destinationType.LinodeObjectStorage, + label: 'Linode Object Storage', + }, +]; + +export interface LinodeObjectStorageDetails { + access_key_id: string; + access_key_secret: string; + bucket_name: string; + host: string; + path: string; + region: string; +} + +export type DestinationDetails = LinodeObjectStorageDetails; // Later a CustomHTTPsDetails type will be added + +export interface CreateDestinationForm extends DestinationDetails { + destination_label: string; + destination_type: DestinationType; +} diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.styles.ts b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.styles.ts new file mode 100644 index 00000000000..5aff2fcd9ad --- /dev/null +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.styles.ts @@ -0,0 +1,10 @@ +import { Typography } from '@linode/ui'; +import { styled } from '@mui/material/styles'; + +export const StyledHeader = styled(Typography, { + label: 'StyledHeader', +})(({ theme }) => ({ + font: theme.font.bold, + fontSize: theme.tokens.font.FontSize.M, + lineHeight: theme.tokens.font.LineHeight.Xs, +})); diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.test.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.test.tsx new file mode 100644 index 00000000000..592220f578d --- /dev/null +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.test.tsx @@ -0,0 +1,88 @@ +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { describe, expect } from 'vitest'; + +import { destinationType } from 'src/features/DataStream/Shared/types'; +import { StreamCreateCheckoutBar } from 'src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar'; +import { StreamCreateGeneralInfo } from 'src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo'; +import { streamType } from 'src/features/DataStream/Streams/StreamCreate/types'; +import { + renderWithTheme, + renderWithThemeAndHookFormContext, +} from 'src/utilities/testHelpers'; + +describe('StreamCreateCheckoutBar', () => { + const getDeliveryPriceContext = () => screen.getByText(/\/unit/i).textContent; + + const renderComponent = () => { + renderWithThemeAndHookFormContext({ + component: , + useFormOptions: { + defaultValues: { + destination_type: destinationType.LinodeObjectStorage, + }, + }, + }); + }; + + it('should render checkout bar with disabled checkout button', async () => { + renderComponent(); + const submitButton = screen.getByText('Create Stream'); + + expect(submitButton).toBeDisabled(); + }); + + it('should render Delivery summary with destination type and price', () => { + renderComponent(); + const deliveryTitle = screen.getByText('Delivery'); + const deliveryType = screen.getByText('Linode Object Storage'); + + expect(deliveryTitle).toBeInTheDocument(); + expect(deliveryType).toBeInTheDocument(); + }); + + const TestFormComponent = () => { + const methods = useForm({ + defaultValues: { + type: streamType.AuditLogs, + destination_type: destinationType.LinodeObjectStorage, + label: '', + }, + }); + + return ( + +
+ + + +
+ ); + }; + + it('should not update Delivery summary price on label change', async () => { + renderWithTheme(); + const initialPrice = getDeliveryPriceContext(); + + // change form label value + const nameInput = screen.getByPlaceholderText('Stream name...'); + await userEvent.type(nameInput, 'Test'); + + expect(getDeliveryPriceContext()).toEqual(initialPrice); + }); + + it('should update Delivery summary price on form value change', async () => { + renderWithTheme(); + const initialPrice = getDeliveryPriceContext(); + const streamTypesAutocomplete = screen.getByRole('combobox'); + + // change form type value + await userEvent.click(streamTypesAutocomplete); + const errorLogs = await screen.findByText('Error Logs'); + await userEvent.click(errorLogs); + + expect(getDeliveryPriceContext()).not.toEqual(initialPrice); + }); +}); diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.tsx new file mode 100644 index 00000000000..b08279c5581 --- /dev/null +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.tsx @@ -0,0 +1,58 @@ +import { Box, Divider, Typography } from '@linode/ui'; +import * as React from 'react'; +import { useFormContext, useWatch } from 'react-hook-form'; + +import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; +import { displayPrice } from 'src/components/DisplayPrice'; +import { getDestinationTypeOption } from 'src/features/DataStream/dataStreamUtils'; +import { StyledHeader } from 'src/features/DataStream/Streams/StreamCreate/CheckoutBar/StreamCreateCheckoutBar.styles'; +import { eventType } from 'src/features/DataStream/Streams/StreamCreate/types'; + +import type { CreateStreamForm } from 'src/features/DataStream/Streams/StreamCreate/types'; + +export const StreamCreateCheckoutBar = () => { + const { control } = useFormContext(); + const destinationType = useWatch({ control, name: 'destination_type' }); + const formValues = useWatch({ + control, + name: [ + eventType.Authentication, + eventType.Authorization, + eventType.Configuration, + 'status', + 'type', + ], + }); + const price = getPrice(formValues); + const onDeploy = () => {}; + + return ( + + <> + + + Delivery + + {getDestinationTypeOption(destinationType)?.label ?? ''} + + {displayPrice(price)}/unit + + + + + ); +}; + +// TODO: remove after proper price calculation is implemented +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-expect-error +const getPrice = (data): number => + // eslint-disable-next-line sonarjs/pseudo-random + Math.random() * 100; diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.tsx index 6df3a94ea5b..9eb5dd59b80 100644 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.tsx +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.tsx @@ -5,21 +5,15 @@ import { FormProvider, useForm } from 'react-hook-form'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { useStyles } from 'src/features/DataStream/DataStream.styles'; +import { destinationType } from 'src/features/DataStream/Shared/types'; -import { StreamCreateCheckoutBar } from './StreamCreateCheckoutBar'; +import { StreamCreateCheckoutBar } from './CheckoutBar/StreamCreateCheckoutBar'; import { StreamCreateDataSet } from './StreamCreateDataSet'; import { StreamCreateDelivery } from './StreamCreateDelivery'; import { StreamCreateGeneralInfo } from './StreamCreateGeneralInfo'; -import { - type CreateStreamForm, - destinationType, - eventType, - streamType, -} from './types'; +import { type CreateStreamForm, eventType, streamType } from './types'; export const StreamCreate = () => { - const { classes } = useStyles(); const form = useForm({ defaultValues: { type: streamType.AuditLogs, @@ -39,6 +33,7 @@ export const StreamCreate = () => { crumbOverrides: [ { label: 'DataStream', + linkTo: '/datastream/streams', position: 1, }, ], @@ -55,15 +50,15 @@ export const StreamCreate = () => {
- - + + - + diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateCheckoutBar.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateCheckoutBar.tsx deleted file mode 100644 index 3986aac1561..00000000000 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateCheckoutBar.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Divider } from '@linode/ui'; -import * as React from 'react'; - -import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; - -export const StreamCreateCheckoutBar = () => { - const onDeploy = () => {}; - - return ( - - - - ); -}; diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.test.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.test.tsx index abfbbe14af7..d8608471f0d 100644 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.test.tsx +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.test.tsx @@ -2,10 +2,10 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; +import { destinationType } from 'src/features/DataStream/Shared/types'; import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { StreamCreateDelivery } from './StreamCreateDelivery'; -import { destinationType } from './types'; describe('StreamCreateDelivery', () => { it('should render disabled Destination Type input with proper selection', async () => { @@ -54,6 +54,7 @@ describe('StreamCreateDelivery', () => { useFormOptions: { defaultValues: { destination_label: '', + destination_type: destinationType.LinodeObjectStorage, }, }, }); diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.tsx index 7ef6b48bf3c..bc57cb051ce 100644 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.tsx +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.tsx @@ -1,26 +1,18 @@ -import { useRegionsQuery } from '@linode/queries'; -import { useIsGeckoEnabled } from '@linode/shared'; -import { - Autocomplete, - Box, - Divider, - Paper, - TextField, - Typography, -} from '@linode/ui'; +import { Autocomplete, Box, Paper, Typography } from '@linode/ui'; import { createFilterOptions } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import React from 'react'; -import { Controller, useFormContext } from 'react-hook-form'; +import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; -import { HideShowText } from 'src/components/PasswordInput/HideShowText'; -import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; -import { useStyles } from 'src/features/DataStream/DataStream.styles'; -import { PathSample } from 'src/features/DataStream/Shared/PathSample'; -import { useFlags } from 'src/hooks/useFlags'; +import { getDestinationTypeOption } from 'src/features/DataStream/dataStreamUtils'; +import { DestinationLinodeObjectStorageDetailsForm } from 'src/features/DataStream/Shared/DestinationLinodeObjectStorageDetailsForm'; +import { + destinationType, + destinationTypeOptions, +} from 'src/features/DataStream/Shared/types'; -import { type CreateStreamForm, destinationType } from './types'; +import { type CreateStreamForm } from './types'; type DestinationName = { create?: boolean; @@ -29,27 +21,12 @@ type DestinationName = { }; export const StreamCreateDelivery = () => { - const { gecko2 } = useFlags(); - const { isGeckoLAEnabled } = useIsGeckoEnabled(gecko2?.enabled, gecko2?.la); - const { data: regions } = useRegionsQuery(); - const { classes } = useStyles(); const theme = useTheme(); const { control } = useFormContext(); const [showDestinationForm, setShowDestinationForm] = React.useState(false); - const destinationTypeOptions = [ - { - value: destinationType.CustomHttps, - label: 'Custom HTTPS', - }, - { - value: destinationType.LinodeObjectStorage, - label: 'Linode Object Storage', - }, - ]; - const destinationNameOptions: DestinationName[] = [ { id: 1, @@ -61,6 +38,11 @@ export const StreamCreateDelivery = () => { }, ]; + const selectedDestinationType = useWatch({ + control, + name: 'destination_type', + }); + const destinationNameFilterOptions = createFilterOptions(); return ( @@ -81,7 +63,6 @@ export const StreamCreateDelivery = () => { name="destination_type" render={({ field }) => ( { field.onChange(value); }} options={destinationTypeOptions} - value={destinationTypeOptions.find( - ({ value }) => value === field.value - )} + value={getDestinationTypeOption(field.value)} /> )} rules={{ required: true }} @@ -101,7 +80,6 @@ export const StreamCreateDelivery = () => { name="destination_label" render={({ field }) => ( { const filtered = destinationNameFilterOptions(options, params); const { inputValue } = params; @@ -145,108 +123,10 @@ export const StreamCreateDelivery = () => { )} rules={{ required: true }} /> - {showDestinationForm && ( - <> - ( - { - field.onChange(value); - }} - placeholder="Host..." - value={field.value} - /> - )} - rules={{ required: true }} - /> - ( - { - field.onChange(value); - }} - placeholder="Bucket..." - value={field.value} - /> - )} - rules={{ required: true }} - /> - ( - field.onChange(region.id)} - regionFilter="core" - regions={regions ?? []} - value={field.value} - /> - )} - /> - ( - field.onChange(value)} - placeholder="Access Key ID..." - value={field.value} - /> - )} - /> - ( - field.onChange(value)} - placeholder="Secret Access Key..." - value={field.value} - /> - )} - /> - - Path - - ( - field.onChange(value)} - placeholder="Log Path Prefix..." - value={field.value} - /> - )} - /> - - - - )} + {showDestinationForm && + selectedDestinationType === destinationType.LinodeObjectStorage && ( + + )} ); }; diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo.tsx b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo.tsx index 678656f7235..dee1b0886a0 100644 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo.tsx +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateGeneralInfo.tsx @@ -2,13 +2,10 @@ import { Autocomplete, Box, Paper, TextField, Typography } from '@linode/ui'; import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; -import { useStyles } from 'src/features/DataStream/DataStream.styles'; - import { type CreateStreamForm, streamType } from './types'; export const StreamCreateGeneralInfo = () => { const { control } = useFormContext(); - const { classes } = useStyles(); const streamTypeOptions = [ { @@ -30,7 +27,6 @@ export const StreamCreateGeneralInfo = () => { render={({ field }) => ( { field.onChange(value); @@ -47,7 +43,6 @@ export const StreamCreateGeneralInfo = () => { name="type" render={({ field }) => ( { diff --git a/packages/manager/src/features/DataStream/Streams/StreamCreate/types.ts b/packages/manager/src/features/DataStream/Streams/StreamCreate/types.ts index 7de2defc111..ea9ca7c622b 100644 --- a/packages/manager/src/features/DataStream/Streams/StreamCreate/types.ts +++ b/packages/manager/src/features/DataStream/Streams/StreamCreate/types.ts @@ -1,26 +1,4 @@ -export const destinationType = { - CustomHttps: 'custom_https', - LinodeObjectStorage: 'linode_object_storage', -} as const; - -export type DestinationType = - (typeof destinationType)[keyof typeof destinationType]; - -export interface LinodeObjectStorageDetails { - access_key_id: string; - access_key_secret: string; - bucket_name: string; - host: string; - path: string; - region: string; -} - -export type DestinationDetails = LinodeObjectStorageDetails; // Later a CustomHTTPsDetails type will be added - -export interface CreateDestinationForm extends DestinationDetails { - destination_label: string; - destination_type: DestinationType; -} +import type { CreateDestinationForm } from 'src/features/DataStream/Shared/types'; export const streamType = { AuditLogs: 'audit_logs', diff --git a/packages/manager/src/features/DataStream/dataStreamUtils.test.ts b/packages/manager/src/features/DataStream/dataStreamUtils.test.ts new file mode 100644 index 00000000000..125751c7ac1 --- /dev/null +++ b/packages/manager/src/features/DataStream/dataStreamUtils.test.ts @@ -0,0 +1,23 @@ +import { expect } from 'vitest'; + +import { getDestinationTypeOption } from 'src/features/DataStream/dataStreamUtils'; +import { + destinationType, + destinationTypeOptions, +} from 'src/features/DataStream/Shared/types'; + +describe('dataStream utils functions', () => { + describe('getDestinationTypeOption ', () => { + it('should return option object matching provided value', () => { + const result = getDestinationTypeOption( + destinationType.LinodeObjectStorage + ); + expect(result).toEqual(destinationTypeOptions[1]); + }); + + it('should return undefined when no option is a match', () => { + const result = getDestinationTypeOption('random value'); + expect(result).toEqual(undefined); + }); + }); +}); diff --git a/packages/manager/src/features/DataStream/dataStreamUtils.ts b/packages/manager/src/features/DataStream/dataStreamUtils.ts new file mode 100644 index 00000000000..7caef631238 --- /dev/null +++ b/packages/manager/src/features/DataStream/dataStreamUtils.ts @@ -0,0 +1,8 @@ +import { destinationTypeOptions } from 'src/features/DataStream/Shared/types'; + +import type { DestinationTypeOption } from 'src/features/DataStream/Shared/types'; + +export const getDestinationTypeOption = ( + destinationTypeValue: string +): DestinationTypeOption | undefined => + destinationTypeOptions.find(({ value }) => value === destinationTypeValue); diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts index 2690bb25432..a19ea764dff 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts @@ -1,5 +1,6 @@ -import { Box, Button, TextField, Typography } from '@linode/ui'; +import { Box, TextField, Typography } from '@linode/ui'; import { Grid, styled } from '@mui/material'; +import { Button } from 'akamai-cds-react-components'; import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx index f0b14dcc5b6..ef39d586728 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx @@ -6,6 +6,7 @@ import { accountFactory, databaseTypeFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; import { + getShadowRootElement, mockMatchMedia, renderWithThemeAndRouter, } from 'src/utilities/testHelpers'; @@ -143,17 +144,18 @@ describe('Database Create', () => { it('should have the "Create Database Cluster" button disabled for restricted users', async () => { queryMocks.useProfile.mockReturnValue({ data: { restricted: true } }); - const { findByText, getByTestId } = await renderWithThemeAndRouter( - - ); + const { getByTestId } = await renderWithThemeAndRouter(); expect(getByTestId(loadingTestId)).toBeInTheDocument(); await waitForElementToBeRemoved(getByTestId(loadingTestId)); - const createClusterButtonSpan = await findByText('Create Database Cluster'); - const createClusterButton = createClusterButtonSpan.closest('button'); - expect(createClusterButton).toBeInTheDocument(); + const buttonHost = getByTestId('create-database-cluster'); + const createClusterButton = buttonHost + ? await getShadowRootElement(buttonHost, 'button') + : null; + + expect(buttonHost).toBeInTheDocument(); expect(createClusterButton).toBeDisabled(); }); @@ -191,17 +193,18 @@ describe('Database Create', () => { it('should have the "Create Database Cluster" button enabled for users with full access', async () => { queryMocks.useProfile.mockReturnValue({ data: { restricted: false } }); - const { findByText, getByTestId } = await renderWithThemeAndRouter( - - ); + const { getByTestId } = await renderWithThemeAndRouter(); expect(getByTestId(loadingTestId)).toBeInTheDocument(); await waitForElementToBeRemoved(getByTestId(loadingTestId)); - const createClusterButtonSpan = await findByText('Create Database Cluster'); - const createClusterButton = createClusterButtonSpan.closest('button'); - expect(createClusterButton).toBeInTheDocument(); + const buttonHost = getByTestId('create-database-cluster'); + const createClusterButton = buttonHost + ? await getShadowRootElement(buttonHost, 'button') + : null; + + expect(buttonHost).toBeInTheDocument(); expect(createClusterButton).toBeEnabled(); }); diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 123595c45d2..0f3640d34e7 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,4 +1,9 @@ -import { useRegionsQuery } from '@linode/queries'; +import { + useCreateDatabaseMutation, + useDatabaseEnginesQuery, + useDatabaseTypesQuery, + useRegionsQuery, +} from '@linode/queries'; import { CircleProgress, Divider, ErrorState, Notice, Paper } from '@linode/ui'; import { formatStorageUnits, scrollErrorIntoViewV2 } from '@linode/utilities'; import { getDynamicDatabaseSchema } from '@linode/validation/lib/databases.schema'; @@ -25,11 +30,6 @@ import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/Fire import { typeLabelDetails } from 'src/features/Linodes/presentation'; import { useFlags } from 'src/hooks/useFlags'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; -import { - useCreateDatabaseMutation, - useDatabaseEnginesQuery, - useDatabaseTypesQuery, -} from 'src/queries/databases/databases'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { validateIPs } from 'src/utilities/ipUtils'; @@ -398,10 +398,11 @@ export const DatabaseCreate = () => { provision. Create Database Cluster diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseVPCSelector.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseVPCSelector.tsx index abaf0600d9b..74978b885b6 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseVPCSelector.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseVPCSelector.tsx @@ -160,7 +160,7 @@ export const DatabaseVPCSelector = (props: DatabaseVPCSelectorProps) => { value={selectedVPC ?? null} /> { ['enable', false], ])( 'should %s "Manage Access" button when disabled is %s', - (_, isDisabled) => { + async (_, isDisabled) => { const database = databaseFactory.build(); - const { getByRole } = renderWithTheme( + const { getByTestId } = renderWithTheme( ); - const button = getByRole('button', { name: 'Manage Access' }); + const buttonHost = getByTestId('button-access-control'); + const button = await getShadowRootElement(buttonHost, 'button'); if (isDisabled) { expect(button).toBeDisabled(); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index f12cc4f5176..0514ccebc7e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -1,4 +1,6 @@ -import { ActionsPanel, Button, Notice, Typography } from '@linode/ui'; +import { useDatabaseMutation } from '@linode/queries'; +import { ActionsPanel, Notice, Typography } from '@linode/ui'; +import { Button } from 'akamai-cds-react-components'; import * as React from 'react'; import type { JSX } from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -9,7 +11,6 @@ import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; import AddAccessControlDrawer from './AddAccessControlDrawer'; @@ -172,11 +173,11 @@ export const AccessControls = (props: Props) => {
{description ?? null}
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx index 37a845fd650..25295048ca9 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx @@ -1,3 +1,4 @@ +import { useDatabaseMutation } from '@linode/queries'; import { ActionsPanel, Drawer, Notice, Typography } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -15,7 +16,6 @@ import { } from 'src/features/Databases/constants'; import { isDefaultDatabase } from 'src/features/Databases/utilities'; import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { extendedIPToString, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx index 690720026cf..41d36f6c485 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx @@ -1,5 +1,6 @@ -import { Box, Button, Paper, Typography } from '@linode/ui'; +import { Box, Paper, Typography } from '@linode/ui'; import Grid from '@mui/material/Grid'; +import { Button } from 'akamai-cds-react-components'; import React from 'react'; import { Link } from 'src/components/Link'; @@ -37,10 +38,10 @@ export const DatabaseAdvancedConfiguration = ({ database }: Props) => { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx index 4f8a0839c78..3f9c69d5450 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx @@ -1,7 +1,7 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { useDatabaseEngineConfig, useDatabaseMutation } from '@linode/queries'; import { ActionsPanel, - Button, CircleProgress, Divider, Drawer, @@ -12,16 +12,13 @@ import { import { scrollErrorIntoViewV2 } from '@linode/utilities'; import { createDynamicAdvancedConfigSchema } from '@linode/validation'; import Grid from '@mui/material/Grid'; +import { Button } from 'akamai-cds-react-components'; import { enqueueSnackbar } from 'notistack'; import React, { useEffect, useMemo, useState } from 'react'; import { Controller, useFieldArray, useForm } from 'react-hook-form'; import type { SubmitHandler } from 'react-hook-form'; import { Link } from 'src/components/Link'; -import { - useDatabaseEngineConfig, - useDatabaseMutation, -} from 'src/queries/databases/databases'; import { ADVANCED_CONFIG_INFO, @@ -197,11 +194,12 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx index adb1c06328b..1d42d1f0bde 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx @@ -2,11 +2,11 @@ import { Autocomplete, CloseIcon, FormControlLabel, - IconButton, TextField, Toggle, Typography, } from '@linode/ui'; +import { Button } from 'akamai-cds-react-components'; import React from 'react'; import { @@ -151,13 +151,14 @@ export const DatabaseConfigurationItem = (props: Props) => { {configItem?.isNew && configItem && onRemove && ( - onRemove(configItem?.label)} size="large" + style={{ paddingLeft: 12, paddingRight: 12 }} + variant="icon" > - + )} ); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 3417d60b16d..05096d4436d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx @@ -1,3 +1,4 @@ +import { useDatabaseQuery } from '@linode/queries'; import { Autocomplete, Box, @@ -30,7 +31,6 @@ import { isTimeOutsideBackup, useIsDatabasesEnabled, } from 'src/features/Databases/utilities'; -import { useDatabaseQuery } from 'src/queries/databases/databases'; import DatabaseBackupsDialog from './DatabaseBackupsDialog'; import DatabaseBackupsLegacy from './legacy/DatabaseBackupsLegacy'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx index 29fb9a98357..c17356bc6ef 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx @@ -1,10 +1,10 @@ +import { useRestoreFromBackupMutation } from '@linode/queries'; import { ActionsPanel, Dialog, Notice, Typography } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useState } from 'react'; -import { useRestoreFromBackupMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { toDatabaseFork, toFormatedDate } from '../../utilities'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupsLegacy.tsx index a6ae83d63dd..f2287320f2a 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupsLegacy.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/DatabaseBackupsLegacy.tsx @@ -1,3 +1,4 @@ +import { useDatabaseBackupsQuery } from '@linode/queries'; import { Paper, Typography } from '@linode/ui'; import * as React from 'react'; @@ -9,7 +10,6 @@ import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; import RestoreLegacyFromBackupDialog from 'src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog'; import { useOrder } from 'src/hooks/useOrder'; -import { useDatabaseBackupsQuery } from 'src/queries/databases/databases'; import DatabaseBackupTableBody from './DatabaseBackupTableBody'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx index 472aa786a81..5e7f0474786 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx @@ -1,11 +1,13 @@ -import { useProfile } from '@linode/queries'; +import { + useLegacyRestoreFromBackupMutation, + useProfile, +} from '@linode/queries'; import { Notice, Typography } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; -import { useLegacyRestoreFromBackupMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { formatDate } from 'src/utilities/formatDate'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.test.tsx index 793fec88ad5..15823399261 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.test.tsx @@ -81,6 +81,11 @@ describe('DatabaseManageNetworkingDrawer Component', () => { queryMocks.useAllVPCsQuery.mockReturnValue({ data: [mockVPC], }); + queryMocks.useDatabaseMutation.mockReturnValue({ + mutateAsync: vi.fn().mockResolvedValue({}), + isLoading: false, + reset: vi.fn(), + }); }); it('Should render the VPC Selector', () => { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.tsx index 04b71cec571..a978da8d6c5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworkingDrawer.tsx @@ -1,3 +1,4 @@ +import { useDatabaseMutation } from '@linode/queries'; import { Box, Button, Drawer, Notice } from '@linode/ui'; import { updatePrivateNetworkSchema } from '@linode/validation'; import { useNavigate } from '@tanstack/react-router'; @@ -5,8 +6,6 @@ import { useFormik } from 'formik'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; - import { DatabaseVPCSelector } from '../../DatabaseCreate/DatabaseVPCSelector'; import type { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.test.tsx index 1d71c9bcdbd..a99d101dea5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.test.tsx @@ -65,6 +65,11 @@ describe('DatabaseNetworkingUnassignVPCDialog Component', () => { it(`should navigate to summary after unassigning`, async () => { const mockNavigate = vi.fn(); queryMocks.useNavigate.mockReturnValue(mockNavigate); + queryMocks.useDatabaseMutation.mockReturnValue({ + mutateAsync: vi.fn().mockResolvedValue({}), + isLoading: false, + reset: vi.fn(), + }); await renderWithThemeAndRouter( , { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.tsx index 4a72b04f425..1e0417178be 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworkingUnassignVPCDialog.tsx @@ -1,10 +1,10 @@ +import { useDatabaseMutation } from '@linode/queries'; import { ActionsPanel, Notice, Typography } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import { enqueueSnackbar } from 'notistack'; import React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; import type { Engine, UpdateDatabasePayload } from '@linode/api-v4'; import type { Theme } from '@linode/ui'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts index 1a51eeb88e3..d30b3c71db5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts @@ -1,6 +1,6 @@ -import { Button } from '@linode/ui'; import Grid from '@mui/material/Grid'; import { styled } from '@mui/material/styles'; +import { Button } from 'akamai-cds-react-components'; import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx index ecfaee02865..e5dbbcb5f41 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx @@ -10,6 +10,7 @@ import { import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; import { + getShadowRootElement, mockMatchMedia, renderWithThemeAndRouter, } from 'src/utilities/testHelpers'; @@ -88,13 +89,15 @@ describe('database resize', () => { }; it('resize button should be disabled when no input is provided in the form', async () => { - const { getByTestId, getByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( ); await waitForElementToBeRemoved(getByTestId(loadingTestId)); - expect( - getByText(/Resize Database Cluster/i).closest('button') - ).toHaveAttribute('aria-disabled', 'true'); + + const buttonHost = getByTestId('resize-database-button'); + const resizeButton = await getShadowRootElement(buttonHost, 'button'); + + expect(resizeButton).toBeDisabled(); }); it('when a plan is selected, resize button should be enabled and on click of it, it should show a confirmation dialog', async () => { @@ -103,26 +106,24 @@ describe('database resize', () => { window.location = { ...location, pathname: `/databases/${mockDatabase.engine}/${mockDatabase.id}/resize`, - }; + } as any; - const { getByRole, getByTestId, getByText } = - await renderWithThemeAndRouter( - , - { flags } - ); + const { getByRole, getByTestId } = await renderWithThemeAndRouter( + , + { flags } + ); await waitForElementToBeRemoved(getByTestId(loadingTestId)); const planRadioButton = document.getElementById('g6-standard-6'); await userEvent.click(planRadioButton as HTMLInputElement); - const resizeButton = getByText(/Resize Database Cluster/i); - expect(resizeButton.closest('button')).toHaveAttribute( - 'aria-disabled', - 'false' - ); + const buttonHost = getByTestId('resize-database-button'); + const resizeButton = await getShadowRootElement(buttonHost, 'button'); - await userEvent.click(resizeButton); + expect(resizeButton).toBeEnabled(); + + await userEvent.click(resizeButton as HTMLButtonElement); const dialogElement = getByRole('dialog'); expect(dialogElement).toBeInTheDocument(); @@ -132,14 +133,15 @@ describe('database resize', () => { }); it('Should disable the "Resize Database Cluster" button when disabled = true', async () => { - const { getByTestId, getByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( ); await waitForElementToBeRemoved(getByTestId(loadingTestId)); - const resizeDatabaseBtn = getByText('Resize Database Cluster').closest( - 'button' - ); - expect(resizeDatabaseBtn).toBeDisabled(); + + const buttonHost = getByTestId('resize-database-button'); + const resizeButton = await getShadowRootElement(buttonHost, 'button'); + + expect(resizeButton).toBeDisabled(); }); }); @@ -244,7 +246,7 @@ describe('database resize', () => { platform: 'rdbms-default', type: 'g6-nanode-1', }); - const { getByTestId, getByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( , { flags } ); @@ -253,10 +255,11 @@ describe('database resize', () => { const selectedNodeRadioButton = getByTestId('database-node-3').children[0] .children[0] as HTMLInputElement; await userEvent.click(selectedNodeRadioButton); - const resizeButton = getByText(/Resize Database Cluster/i).closest( - 'button' - ) as HTMLButtonElement; - expect(resizeButton.disabled).toBeFalsy(); + + const buttonHost = getByTestId('resize-database-button'); + const resizeButton = await getShadowRootElement(buttonHost, 'button'); + + expect(resizeButton).toBeEnabled(); const summary = getByTestId('resizeSummary'); const selectedPlanText = @@ -272,7 +275,7 @@ describe('database resize', () => { platform: 'rdbms-default', type: 'g6-nanode-1', }); - const { getByTestId, getByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( , { flags } ); @@ -281,14 +284,17 @@ describe('database resize', () => { const threeNodesRadioButton = getByTestId('database-node-3').children[0] .children[0] as HTMLInputElement; await userEvent.click(threeNodesRadioButton); - const resizeButton = getByText(/Resize Database Cluster/i).closest( - 'button' - ); + + const buttonHost = getByTestId('resize-database-button'); + const resizeButton = await getShadowRootElement(buttonHost, 'button'); + expect(resizeButton).toBeEnabled(); + // Mock clicking 1 Node option const oneNodeRadioButton = getByTestId('database-node-1').children[0] .children[0] as HTMLInputElement; await userEvent.click(oneNodeRadioButton); + expect(resizeButton).toBeDisabled(); }); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index 4b79f5b428b..91dc5df91b9 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -1,3 +1,4 @@ +import { useDatabaseMutation, useDatabaseTypesQuery } from '@linode/queries'; import { Box, CircleProgress, @@ -19,8 +20,6 @@ import { DatabaseSummarySection } from 'src/features/Databases/DatabaseCreate/Da import { DatabaseResizeCurrentConfiguration } from 'src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration'; import { useIsDatabasesEnabled } from 'src/features/Databases/utilities'; import { typeLabelDetails } from 'src/features/Linodes/presentation'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; import { StyledGrid, @@ -332,12 +331,13 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { { setIsResizeConfirmationDialogOpen(true); }} type="submit" + variant="primary" > Resize Database Cluster diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index b35542436f3..7765f4cdf37 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx @@ -1,11 +1,10 @@ -import { useRegionsQuery } from '@linode/queries'; +import { useDatabaseTypesQuery, useRegionsQuery } from '@linode/queries'; import { Box, CircleProgress, ErrorState, TooltipIcon } from '@linode/ui'; import { convertMegabytesTo, formatStorageUnits } from '@linode/utilities'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { useInProgressEvents } from 'src/queries/events/events'; import { DatabaseStatusDisplay } from '../DatabaseStatusDisplay'; @@ -126,7 +125,7 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => { Total Disk Size{' '} {database.total_disk_size_gb} GB diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx index 82f1499c57d..19d990335c2 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { databaseFactory } from 'src/factories/databases'; import { + getShadowRootElement, mockMatchMedia, renderWithThemeAndRouter, } from 'src/utilities/testHelpers'; @@ -99,20 +100,30 @@ describe('DatabaseSettings Component', () => { ['disable', true], ['enable', false], ])('should %s buttons when disabled is %s', async (_, isDisabled) => { - const { getByRole, getByTitle } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( ); - const button1 = getByTitle('Reset Root Password'); - const button2 = getByTitle('Save Changes'); - const button3 = getByRole('button', { name: 'Manage Access' }); + + const resetPasswordButtonHost = getByTestId( + 'settings-button-Reset Root Password' + ); + const resetPasswordButton = await getShadowRootElement( + resetPasswordButtonHost, + 'button' + ); + + const manageAccessButtonHost = getByTestId('button-access-control'); + const manageAccessButton = await getShadowRootElement( + manageAccessButtonHost, + 'button' + ); if (isDisabled) { - expect(button1).toBeDisabled(); - expect(button2).toBeDisabled(); - expect(button3).toBeDisabled(); + expect(resetPasswordButton).toBeDisabled(); + expect(manageAccessButton).toBeDisabled(); } else { - expect(button1).toBeEnabled(); - expect(button3).toBeEnabled(); + expect(resetPasswordButton).toBeEnabled(); + expect(manageAccessButton).toBeEnabled(); } }); @@ -299,14 +310,20 @@ describe('DatabaseSettings Component', () => { isUserNewBeta: false, }); - const { getAllByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( , { flags } ); - const suspendElements = getAllByText(/Suspend Cluster/i); - const suspendButton = suspendElements[1].closest('button'); - expect(suspendButton).toHaveAttribute('aria-disabled', 'true'); + const suspendClusterButtonHost = getByTestId( + 'settings-button-Suspend Cluster' + ); + const suspendClusterButton = await getShadowRootElement( + suspendClusterButtonHost, + 'button' + ); + + expect(suspendClusterButton).toBeDisabled(); }); it('should enable suspend when database status is active', async () => { @@ -331,13 +348,19 @@ describe('DatabaseSettings Component', () => { isUserNewBeta: false, }); - const { getAllByText } = await renderWithThemeAndRouter( + const { getByTestId } = await renderWithThemeAndRouter( , { flags } ); - const suspendElements = getAllByText(/Suspend Cluster/i); - const suspendButton = suspendElements[1].closest('button'); - expect(suspendButton).toHaveAttribute('aria-disabled', 'false'); + const suspendClusterButtonHost = getByTestId( + 'settings-button-Suspend Cluster' + ); + const suspendClusterButton = await getShadowRootElement( + suspendClusterButtonHost, + 'button' + ); + + expect(suspendClusterButton).toBeEnabled(); }); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx index 114fbaa6eeb..620707f3244 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx @@ -1,10 +1,10 @@ +import { useDeleteDatabaseMutation } from '@linode/queries'; import { Notice, Typography } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; -import { useDeleteDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import type { Engine } from '@linode/api-v4/lib/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.test.tsx index 336b5b53d3a..68d7e06284d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.test.tsx @@ -2,12 +2,13 @@ import React from 'react'; import { databaseFactory } from 'src/factories'; import { DatabaseSettingsMaintenance } from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { + getShadowRootElement, + renderWithTheme, +} from 'src/utilities/testHelpers'; import type { Engine } from '@linode/api-v4'; -const UPGRADE_VERSION = 'Upgrade Version'; - const queryMocks = vi.hoisted(() => ({ useDatabaseEnginesQuery: vi.fn().mockReturnValue({ data: [ @@ -40,8 +41,8 @@ const queryMocks = vi.hoisted(() => ({ }), })); -vi.mock('src/queries/databases/databases', async () => { - const actual = await vi.importActual('src/queries/databases/databases'); +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); return { ...actual, useDatabaseEnginesQuery: queryMocks.useDatabaseEnginesQuery, @@ -58,7 +59,7 @@ describe('Database Settings Maintenance', () => { const onReviewUpdates = vi.fn(); const onUpgradeVersion = vi.fn(); - const { findByRole } = renderWithTheme( + const { queryByTestId } = renderWithTheme( { /> ); - const button = await findByRole('button', { name: UPGRADE_VERSION }); + const buttonHost = queryByTestId('upgrade'); + const shadowButton = buttonHost + ? await getShadowRootElement(buttonHost, 'button') + : null; - expect(button).toBeDisabled(); + expect(shadowButton).toBeDisabled(); }); it('should disable upgrade version modal button when there are upgrades available, but there are still updates available', async () => { @@ -91,7 +95,7 @@ describe('Database Settings Maintenance', () => { const onReviewUpdates = vi.fn(); const onUpgradeVersion = vi.fn(); - const { findByRole } = renderWithTheme( + const { queryByTestId } = renderWithTheme( { /> ); - const button = await findByRole('button', { name: UPGRADE_VERSION }); + const buttonHost = queryByTestId('upgrade'); + const shadowButton = buttonHost + ? await getShadowRootElement(buttonHost, 'button') + : null; - expect(button).toBeDisabled(); + expect(shadowButton).toBeDisabled(); }); it('should enable upgrade version modal button when there are upgrades available, and there are no pending updates', async () => { @@ -118,7 +125,7 @@ describe('Database Settings Maintenance', () => { const onReviewUpdates = vi.fn(); const onUpgradeVersion = vi.fn(); - const { findByRole } = renderWithTheme( + const { queryByTestId } = renderWithTheme( { /> ); - const button = await findByRole('button', { name: UPGRADE_VERSION }); + const buttonHost = queryByTestId('upgrade'); + const shadowButton = buttonHost + ? await getShadowRootElement(buttonHost, 'button') + : null; - expect(button).toBeEnabled(); + expect(shadowButton).toBeEnabled(); }); it('should show review text and modal button when there are updates ', async () => { @@ -149,7 +159,7 @@ describe('Database Settings Maintenance', () => { const onReviewUpdates = vi.fn(); const onUpgradeVersion = vi.fn(); - const { queryByRole } = renderWithTheme( + const { queryByTestId } = renderWithTheme( { /> ); - const button = queryByRole('button', { name: 'Click to review' }); + const button = queryByTestId('review'); expect(button).toBeInTheDocument(); }); @@ -174,7 +184,7 @@ describe('Database Settings Maintenance', () => { const onReviewUpdates = vi.fn(); const onUpgradeVersion = vi.fn(); - const { queryByRole } = renderWithTheme( + const { queryByTestId } = renderWithTheme( { /> ); - const button = queryByRole('button', { name: 'Click to review' }); + const button = queryByTestId('review'); expect(button).not.toBeInTheDocument(); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx index e4d4b2ef2c5..8d76a33f127 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx @@ -1,5 +1,7 @@ -import { StyledLinkButton, TooltipIcon, Typography } from '@linode/ui'; +import { useDatabaseEnginesQuery } from '@linode/queries'; +import { TooltipIcon, Typography } from '@linode/ui'; import { GridLegacy, styled } from '@mui/material'; +import { Button } from 'akamai-cds-react-components'; import * as React from 'react'; import { @@ -7,7 +9,6 @@ import { hasPendingUpdates, upgradableVersions, } from 'src/features/Databases/utilities'; -import { useDatabaseEnginesQuery } from 'src/queries/databases/databases'; import type { Engine, PendingUpdates } from '@linode/api-v4'; @@ -38,16 +39,17 @@ export const DatabaseSettingsMaintenance = (props: Props) => { Maintenance Version {engineVersion} - Upgrade Version - + {hasUpdates && ( { One or more minor version upgrades or patches will be applied during the next maintenance window.{' '} - + ) : ( diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.test.tsx index 71a663c18b5..8549869d02e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.test.tsx @@ -36,7 +36,7 @@ describe('DatabaseSettingsMenuItem Component', () => { }); it('Should have a primary button with provided text', () => { - const { getByRole } = renderWithTheme( + const { getByTestId } = renderWithTheme( { sectionTitle={sectionTitle} /> ); - const button = getByRole('button'); + const button = getByTestId(`settings-button-${buttonText}`); expect(button).toHaveTextContent(buttonText); }); it('Should have a primary button that calls the provided callback when clicked', () => { const onClick = vi.fn(); - const { getByRole } = renderWithTheme( + const { getByTestId } = renderWithTheme( { sectionTitle={sectionTitle} /> ); - const button = getByRole('button'); + const button = getByTestId(`settings-button-${buttonText}`); fireEvent.click(button); expect(onClick).toHaveBeenCalled(); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx index a6c8f66d078..9d285dc4a32 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx @@ -1,4 +1,5 @@ -import { Button, Typography } from '@linode/ui'; +import { Typography } from '@linode/ui'; +import { Button } from 'akamai-cds-react-components'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -66,12 +67,13 @@ export const DatabaseSettingsMenuItem = (props: Props) => { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx index ac21f52b9fd..813539ac8d3 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx @@ -1,8 +1,8 @@ +import { useDatabaseCredentialsMutation } from '@linode/queries'; import { ActionsPanel, Notice, Typography } from '@linode/ui'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { useDatabaseCredentialsMutation } from 'src/queries/databases/databases'; import type { Engine } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx index 57e4960a7e2..3803de61367 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx @@ -1,10 +1,10 @@ +import { usePatchDatabaseMutation } from '@linode/queries'; import { ActionsPanel, Typography } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { usePatchDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import type { Engine, PendingUpdates } from '@linode/api-v4/lib/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx index 58402553370..c6e2e9dcb7b 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx @@ -1,10 +1,10 @@ +import { useSuspendDatabaseMutation } from '@linode/queries'; import { ActionsPanel, Checkbox, Notice, Typography } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { useSuspendDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import type { Engine } from '@linode/api-v4/lib/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.test.tsx index f537685046b..c703fb42ae4 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.test.tsx @@ -39,8 +39,8 @@ const queryMocks = vi.hoisted(() => ({ }), })); -vi.mock('src/queries/databases/databases', async () => { - const actual = await vi.importActual('src/queries/databases/databases'); +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); return { ...actual, useDatabaseEnginesQuery: queryMocks.useDatabaseEnginesQuery, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx index e9be33f0c16..8b1a5d92958 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx @@ -1,3 +1,4 @@ +import { useDatabaseEnginesQuery, useDatabaseMutation } from '@linode/queries'; import { ActionsPanel, Autocomplete, @@ -14,10 +15,6 @@ import { DATABASE_ENGINE_MAP, upgradableVersions, } from 'src/features/Databases/utilities'; -import { - useDatabaseEnginesQuery, - useDatabaseMutation, -} from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import type { Engine } from '@linode/api-v4/lib/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index 26e7328ac5b..a40bfd06db4 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -1,6 +1,6 @@ +import { useDatabaseMutation } from '@linode/queries'; import { Autocomplete, - Button, FormControl, FormControlLabel, Notice, @@ -9,6 +9,7 @@ import { TooltipIcon, Typography, } from '@linode/ui'; +import { Button } from 'akamai-cds-react-components'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import { useSnackbar } from 'notistack'; @@ -16,7 +17,6 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { Link } from 'src/components/Link'; -import { useDatabaseMutation } from 'src/queries/databases/databases'; import type { Database, UpdatesSchedule } from '@linode/api-v4/lib/databases'; import type { APIError } from '@linode/api-v4/lib/types'; @@ -265,7 +265,7 @@ export const MaintenanceWindow = (props: Props) => { )} /> { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.test.tsx index 588b6f5fe1e..7ec9b383cc0 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.test.tsx @@ -23,16 +23,12 @@ const queryMocks = vi.hoisted(() => ({ useRegionsQuery: vi.fn().mockReturnValue({}), })); -vi.mock('@linode/queries', async (importOriginal) => ({ - ...(await importOriginal()), - useRegionsQuery: queryMocks.useRegionsQuery, -})); - -vi.mock(import('src/queries/databases/databases'), async (importOriginal) => { +vi.mock(import('@linode/queries'), async (importOriginal) => { const actual = await importOriginal(); return { ...actual, useDatabaseTypesQuery: queryMocks.useDatabaseTypesQuery, + useRegionsQuery: queryMocks.useRegionsQuery, }; }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx index 3e49fc058d2..54e206a092f 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx @@ -1,4 +1,4 @@ -import { useRegionsQuery } from '@linode/queries'; +import { useDatabaseTypesQuery, useRegionsQuery } from '@linode/queries'; import { TooltipIcon, Typography } from '@linode/ui'; import { convertMegabytesTo, formatStorageUnits } from '@linode/utilities'; import Grid from '@mui/material/Grid'; @@ -12,7 +12,6 @@ import { StyledValueGrid, } from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style'; import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { useInProgressEvents } from 'src/queries/events/events'; import type { Region } from '@linode/api-v4'; @@ -179,7 +178,7 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => { <> {database.total_disk_size_gb} GB diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts index f654623b80d..cef7b59a304 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts @@ -39,6 +39,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({ minWidth: 'auto', padding: 0, }, + tooltipIcon: { + alignContent: 'center', + }, connectionDetailsCtn: { '& p': { lineHeight: '1.5rem', diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.test.tsx index 0feb9061416..c9729bc2a5f 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.test.tsx @@ -22,7 +22,7 @@ const queryMocks = vi.hoisted(() => ({ useDatabaseCredentialsQuery: vi.fn().mockReturnValue({}), })); -vi.mock(import('src/queries/databases/databases'), async (importOriginal) => { +vi.mock(import('@linode/queries'), async (importOriginal) => { const actual = await importOriginal(); return { ...actual, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx index 20d78ea0be5..89bc3c80c51 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx @@ -1,13 +1,9 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; -import { - Box, - Button, - CircleProgress, - TooltipIcon, - Typography, -} from '@linode/ui'; +import { useDatabaseCredentialsQuery } from '@linode/queries'; +import { Box, CircleProgress, TooltipIcon, Typography } from '@linode/ui'; import { downloadFile } from '@linode/utilities'; import Grid from '@mui/material/Grid'; +import { Button } from 'akamai-cds-react-components'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -16,7 +12,6 @@ import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { Link } from 'src/components/Link'; import { DB_ROOT_USERNAME } from 'src/constants'; import { useFlags } from 'src/hooks/useFlags'; -import { useDatabaseCredentialsQuery } from 'src/queries/databases/databases'; import { getErrorStringOrDefault } from 'src/utilities/errorUtils'; import { getReadOnlyHost, isDefaultDatabase } from '../../utilities'; @@ -134,7 +129,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => { )} {isLegacy && ( @@ -142,7 +137,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => { {!isLegacy && hasHost && ( @@ -155,8 +150,10 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => { return ( @@ -167,17 +164,19 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => { <> {disableDownloadCACertificateBtn && ( - + @@ -230,7 +229,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => { )} {disableShowBtn && ( { {!isLegacy && ( diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index 114859fcde6..b24d90efb5b 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -1,3 +1,8 @@ +import { + useDatabaseMutation, + useDatabaseQuery, + useDatabaseTypesQuery, +} from '@linode/queries'; import { BetaChip, CircleProgress, @@ -21,11 +26,6 @@ import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo'; import { useFlags } from 'src/hooks/useFlags'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; import { useTabs } from 'src/hooks/useTabs'; -import { - useDatabaseMutation, - useDatabaseQuery, - useDatabaseTypesQuery, -} from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { DatabaseAdvancedConfiguration } from './DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx index 722b73c2702..7c1e1a7a355 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx @@ -1,3 +1,4 @@ +import { useResumeDatabaseMutation } from '@linode/queries'; import { useNavigate } from '@tanstack/react-router'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; -import { useResumeDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { useIsDatabasesEnabled } from '../utilities'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index a7de4394e91..7c51a9a8e49 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -1,3 +1,4 @@ +import { useDatabasesQuery, useDatabaseTypesQuery } from '@linode/queries'; import { CircleProgress, ErrorState } from '@linode/ui'; import { Box } from '@mui/material'; import { useNavigate } from '@tanstack/react-router'; @@ -18,10 +19,6 @@ import { DatabaseMigrationInfoBanner } from 'src/features/GlobalNotifications/Da import { useOrderV2 } from 'src/hooks/useOrderV2'; import { usePaginationV2 } from 'src/hooks/usePaginationV2'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; -import { - useDatabasesQuery, - useDatabaseTypesQuery, -} from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; const preferenceKey = 'databases'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx index a66218f5357..ba13caa0258 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx @@ -1,4 +1,8 @@ -import { useProfile, useRegionsQuery } from '@linode/queries'; +import { + useDatabaseTypesQuery, + useProfile, + useRegionsQuery, +} from '@linode/queries'; import { Chip } from '@linode/ui'; import { Hidden } from '@linode/ui'; import { formatStorageUnits } from '@linode/utilities'; @@ -11,7 +15,6 @@ import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/Dat import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion'; import { DatabaseActionMenu } from 'src/features/Databases/DatabaseLanding/DatabaseActionMenu'; import { useIsDatabasesEnabled } from 'src/features/Databases/utilities'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { isWithinDays, parseAPIDate } from 'src/utilities/date'; import { formatDate } from 'src/utilities/formatDate'; diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts index ef8702393f2..e9603762d48 100644 --- a/packages/manager/src/features/Databases/utilities.test.ts +++ b/packages/manager/src/features/Databases/utilities.test.ts @@ -48,7 +48,7 @@ const queryMocks = vi.hoisted(() => ({ useDatabaseTypesQuery: vi.fn().mockReturnValue({}), })); -vi.mock(import('src/queries/databases/databases'), async (importOriginal) => { +vi.mock(import('@linode/queries'), async (importOriginal) => { const actual = await importOriginal(); return { ...actual, diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts index da3a9f10ecb..9a0946196b9 100644 --- a/packages/manager/src/features/Databases/utilities.ts +++ b/packages/manager/src/features/Databases/utilities.ts @@ -1,9 +1,8 @@ -import { useAccount } from '@linode/queries'; +import { useAccount, useDatabaseTypesQuery } from '@linode/queries'; import { isFeatureEnabledV2 } from '@linode/utilities'; import { DateTime } from 'luxon'; import { useFlags } from 'src/hooks/useFlags'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import type { Database, diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx index 1e52516e0ad..84af7131a81 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx @@ -1,3 +1,4 @@ +import { entityTransfersQueryKey, useCreateTransfer } from '@linode/queries'; import Grid from '@mui/material/Grid'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,7 +7,6 @@ import { useHistory } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { queryKey, useCreateTransfer } from 'src/queries/entityTransfers'; import { sendEntityTransferCreateEvent } from 'src/utilities/analytics/customEventAnalytics'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; @@ -68,7 +68,7 @@ export const EntityTransfersCreate = () => { sendEntityTransferCreateEvent(entityCount); queryClient.invalidateQueries({ - queryKey: [queryKey], + queryKey: [entityTransfersQueryKey], }); push({ pathname: '/account/service-transfers', state: { transfer } }); }, diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx index 51d54ec63b9..7afd87843c1 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx @@ -1,11 +1,11 @@ import { cancelTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { entityTransfersQueryKey } from '@linode/queries'; import { ActionsPanel, Notice, Typography } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { queryKey } from 'src/queries/entityTransfers'; import { sendEntityTransferCancelEvent } from 'src/utilities/analytics/customEventAnalytics'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; @@ -53,7 +53,7 @@ export const ConfirmTransferCancelDialog = React.memo((props: Props) => { // Refresh the query for Entity Transfers. queryClient.invalidateQueries({ - queryKey: [queryKey], + queryKey: [entityTransfersQueryKey], }); onClose(); diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx index a29598beb88..5d69f5cc9b0 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx @@ -1,5 +1,10 @@ import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers'; -import { useProfile } from '@linode/queries'; +import { + entityTransfersQueryKey, + TRANSFER_FILTERS, + useProfile, + useTransferQuery, +} from '@linode/queries'; import { Checkbox, CircleProgress, ErrorState, Notice } from '@linode/ui'; import { capitalize, pluralize } from '@linode/utilities'; import { useQueryClient } from '@tanstack/react-query'; @@ -7,11 +12,6 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { - queryKey, - TRANSFER_FILTERS, - useTransferQuery, -} from 'src/queries/entityTransfers'; import { sendEntityTransferReceiveEvent } from 'src/utilities/analytics/customEventAnalytics'; import { parseAPIDate } from 'src/utilities/date'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; @@ -90,7 +90,7 @@ export const ConfirmTransferDialog = React.memo( // Update the received transfer table since we're already on the landing page queryClient.invalidateQueries({ predicate: (query) => - query.queryKey[0] === queryKey && + query.queryKey[0] === entityTransfersQueryKey && query.queryKey[2] === TRANSFER_FILTERS.received, }); onClose(); diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx index 925399dac1c..d1f55916563 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx @@ -1,13 +1,10 @@ +import { TRANSFER_FILTERS, useEntityTransfersQuery } from '@linode/queries'; import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { usePaginationV2 } from 'src/hooks/usePaginationV2'; -import { - TRANSFER_FILTERS, - useEntityTransfersQuery, -} from 'src/queries/entityTransfers'; import { TransfersTable } from '../TransfersTable'; import { CreateTransferSuccessDialog } from './CreateTransferSuccessDialog'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.test.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.test.tsx index 57492519d7e..e246c907ba9 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.test.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.test.tsx @@ -8,6 +8,16 @@ import { renderWithTheme } from 'src/utilities/testHelpers'; import { CreateFirewallDrawer } from './CreateFirewallDrawer'; +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { create_firewall: true }, + })), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + const props = { createFlow: undefined, onClose: vi.fn(), @@ -101,4 +111,24 @@ describe('Create Firewall Drawer', () => { ).not.toBeInTheDocument(); expect(queryByLabelText('Firewall Template')).not.toBeInTheDocument(); }); + + it('enables the submit button if the user has create_firewall permission', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { create_firewall: true }, + }); + + renderWithTheme(); + const submitButton = screen.getByTestId('submit'); + expect(submitButton).toBeEnabled(); + }); + + it('disables the submit button if the user does not have create_firewall permission', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { create_firewall: false }, + }); + + renderWithTheme(); + const submitButton = screen.getByTestId('submit'); + expect(submitButton).toBeDisabled(); + }); }); diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index 3a72ef782ac..10a7f416db7 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -20,7 +20,7 @@ import { useLocation } from 'react-router-dom'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { createFirewallFromTemplate } from 'src/components/GenerateFirewallDialog/useCreateFirewallFromTemplate'; -import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { sendLinodeCreateFormStepEvent } from 'src/utilities/analytics/formEventAnalytics'; import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes'; @@ -65,9 +65,7 @@ export const CreateFirewallDrawer = (props: CreateFirewallDrawerProps) => { const { mutateAsync: createFirewall } = useCreateFirewall(); - const isFirewallCreationRestricted = useRestrictedGlobalGrantCheck({ - globalGrantType: 'add_firewalls', - }); + const { permissions } = usePermissions('account', ['create_firewall']); const { enqueueSnackbar } = useSnackbar(); @@ -151,7 +149,7 @@ export const CreateFirewallDrawer = (props: CreateFirewallDrawerProps) => { title={createFirewallText} > - {isFirewallCreationRestricted && ( + {!permissions.create_firewall && ( { > } - disabled={isFirewallCreationRestricted} + disabled={!permissions.create_firewall} label="Custom Firewall" value="custom" /> } - disabled={isFirewallCreationRestricted} + disabled={!permissions.create_firewall} label="From a Template" value="template" /> @@ -207,7 +205,7 @@ export const CreateFirewallDrawer = (props: CreateFirewallDrawerProps) => { render={({ field, fieldState }) => ( { /> {createFirewallFrom === 'template' && isLinodeInterfacesEnabled ? ( ) : ( { firewallFormEventOptions={firewallFormEventOptions} isFromLinodeCreate={isFromLinodeCreate} open={open} - userCannotAddFirewall={isFirewallCreationRestricted} + userCannotAddFirewall={!permissions.create_firewall} /> )} ({ + userPermissions: vi.fn(() => ({ + permissions: { update_firewall: false, delete_firewall: false }, + })), + useIsLinodeInterfacesEnabled: vi.fn(() => ({ + permissions: { isLinodeInterfacesEnabled: false }, + })), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +vi.mock('src/utilities/linodes', () => ({ + useIsLinodeInterfacesEnabled: queryMocks.useIsLinodeInterfacesEnabled, +})); + +describe('FirewallActionMenu', () => { + const defaultProps = { + firewallID: 1, + firewallLabel: 'test-firewall', + firewallStatus: 'enabled' as FirewallStatus, + isDefaultFirewall: false, + triggerDeleteFirewall: vi.fn(), + triggerDisableFirewall: vi.fn(), + triggerEnableFirewall: vi.fn(), + }; + + it('disables Enable/Disable and Delete actions if user lacks permissions', async () => { + renderWithTheme(); + + const menuButton = screen.getByLabelText(/action menu for firewall/i); + await userEvent.click(menuButton); + + const enableDisable = screen.getByTestId('Disable'); + expect(enableDisable).toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('enables Enable/Disable and Delete actions if user has permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { update_firewall: true, delete_firewall: true }, + }); + + renderWithTheme(); + + const menuButton = screen.getByLabelText(/action menu for firewall/i); + await userEvent.click(menuButton); + + const enableDisable = screen.getByTestId('Disable'); + expect(enableDisable).not.toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); + + it('enables Enable/Disable and disabled Delete actions if user has permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { update_firewall: true, delete_firewall: false }, + }); + + renderWithTheme(); + + const menuButton = screen.getByLabelText(/action menu for firewall/i); + await userEvent.click(menuButton); + + const enableDisable = screen.getByTestId('Disable'); + expect(enableDisable).not.toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).toHaveAttribute('aria-disabled', 'true'); + }); +}); diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx index 9d16b6f055e..9054760943e 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx @@ -1,20 +1,16 @@ -import { useGrants, useProfile } from '@linode/queries'; -import { useTheme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; +import { useState } from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes'; -import { checkIfUserCanModifyFirewall } from '../shared'; import { DEFAULT_FIREWALL_TOOLTIP_TEXT, NO_PERMISSIONS_TOOLTIP_TEXT, } from './constants'; import type { FirewallStatus } from '@linode/api-v4/lib/firewalls'; -import type { Theme } from '@mui/material/styles'; import type { Action } from 'src/components/ActionMenu/ActionMenu'; export interface ActionHandlers { @@ -32,11 +28,8 @@ interface Props extends ActionHandlers { } export const FirewallActionMenu = React.memo((props: Props) => { - const theme = useTheme(); - const matchesSmDown = useMediaQuery(theme.breakpoints.down('md')); - const { data: profile } = useProfile(); - const { data: grants } = useGrants(); const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled(); + const [isOpen, setIsOpen] = useState(false); const { firewallID, @@ -48,14 +41,15 @@ export const FirewallActionMenu = React.memo((props: Props) => { triggerEnableFirewall, } = props; - const userCanModifyFirewall = checkIfUserCanModifyFirewall( + const { permissions } = usePermissions( + 'firewall', + ['update_firewall', 'delete_firewall'], firewallID, - profile, - grants + isOpen ); - const disabledProps = - !userCanModifyFirewall || (isLinodeInterfacesEnabled && isDefaultFirewall) + const disabledProps = (hasPermission: boolean) => + !hasPermission || (isLinodeInterfacesEnabled && isDefaultFirewall) ? { disabled: true, tooltip: isDefaultFirewall @@ -70,14 +64,14 @@ export const FirewallActionMenu = React.memo((props: Props) => { handleEnableDisable(); }, title: firewallStatus === 'enabled' ? 'Disable' : 'Enable', - ...disabledProps, + ...disabledProps(permissions.update_firewall), }, { onClick: () => { triggerDeleteFirewall(firewallID, firewallLabel); }, title: 'Delete', - ...disabledProps, + ...disabledProps(permissions.delete_firewall), }, ]; @@ -90,26 +84,10 @@ export const FirewallActionMenu = React.memo((props: Props) => { }; return ( - <> - {!matchesSmDown && - actions.map((action) => { - return ( - - ); - })} - {matchesSmDown && ( - - )} - + setIsOpen(true)} + /> ); }); diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx index 461703917aa..89e70c000d2 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx @@ -1,6 +1,5 @@ import { useFirewallsQuery } from '@linode/queries'; -import { Button, CircleProgress, ErrorState } from '@linode/ui'; -import { Hidden } from '@linode/ui'; +import { Button, CircleProgress, ErrorState, Hidden } from '@linode/ui'; import { useLocation, useNavigate } from '@tanstack/react-router'; import * as React from 'react'; @@ -15,10 +14,10 @@ import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell/TableSortCell'; import { getRestrictedResourceText } from 'src/features/Account/utils'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { useFlags } from 'src/hooks/useFlags'; import { useOrder } from 'src/hooks/useOrder'; import { usePagination } from 'src/hooks/usePagination'; -import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; @@ -73,9 +72,7 @@ const FirewallLanding = () => { (firewall) => firewall.id === selectedFirewallId ); - const isFirewallsCreationRestricted = useRestrictedGlobalGrantCheck({ - globalGrantType: 'add_firewalls', - }); + const { permissions } = usePermissions('account', ['create_firewall']); const openModal = (mode: Mode, id: number) => { setSelectedFirewallId(id); @@ -152,7 +149,7 @@ const FirewallLanding = () => { resourceType: 'Firewalls', }), }} - disabledCreateButton={isFirewallsCreationRestricted} + disabledCreateButton={!permissions.create_firewall} docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-cloud-firewalls" entity="Firewall" extraActions={ diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.test.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.test.tsx new file mode 100644 index 00000000000..cb923649a88 --- /dev/null +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.test.tsx @@ -0,0 +1,40 @@ +import { screen } from '@testing-library/react'; +import React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { FirewallLandingEmptyState } from './FirewallLandingEmptyState'; + +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { create_firewall: true }, + })), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +describe('FirewallLandingEmptyState', () => { + it('enables the Create Firewall button if the user has create_firewall permission', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { create_firewall: true }, + }); + renderWithTheme( + + ); + const submitButton = screen.getByTestId('placeholder-button'); + expect(submitButton).toBeEnabled(); + }); + + it('disables the Create Firewall button if the user does not have create_firewall permission', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { create_firewall: false }, + }); + renderWithTheme( + + ); + const submitButton = screen.getByTestId('placeholder-button'); + expect(submitButton).toBeDisabled(); + }); +}); diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.tsx index 14d3cb2b14d..349adb1700a 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLandingEmptyState.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import NetworkIcon from 'src/assets/icons/entityIcons/networking.svg'; import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection'; import { getRestrictedResourceText } from 'src/features/Account/utils'; -import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { sendEvent } from 'src/utilities/analytics/utils'; import { @@ -20,16 +20,14 @@ interface Props { export const FirewallLandingEmptyState = (props: Props) => { const { openAddFirewallDrawer } = props; - const isFirewallsCreationRestricted = useRestrictedGlobalGrantCheck({ - globalGrantType: 'add_firewalls', - }); + const { permissions } = usePermissions('account', ['create_firewall']); return ( { sendEvent({ action: 'Click:button', diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.test.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.test.tsx index f41265b44ef..4064d17f164 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.test.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.test.tsx @@ -2,7 +2,6 @@ import { capitalize } from '@linode/utilities'; import { render } from '@testing-library/react'; import * as React from 'react'; -import { firewalls } from 'src/__data__/firewalls'; import { accountFactory } from 'src/factories'; import { firewallDeviceFactory, @@ -37,13 +36,60 @@ vi.mock('@linode/queries', async () => { }; }); +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: vi.fn(() => ({ + permissions: { delete_firewall: true, update_firewall: true }, + })), +})); + beforeAll(() => mockMatchMedia()); describe('FirewallRow', () => { describe('Utility functions', () => { it('should return correct number of inbound and outbound rules', () => { - expect(getCountOfRules(firewalls[0].rules)).toEqual([1, 1]); - expect(getCountOfRules(firewalls[1].rules)).toEqual([0, 2]); + const firewall1 = firewallFactory.build({ + rules: { + inbound: [ + { + action: 'ACCEPT', + ports: '443', + protocol: 'ALL', + }, + ], + outbound: [ + { + action: 'ACCEPT', + addresses: { + ipv4: ['12.12.12.12'], + ipv6: ['192.168.12.12'], + }, + ports: '22', + protocol: 'UDP', + }, + ], + }, + }); + + const firewall2 = firewallFactory.build({ + rules: { + inbound: [], + outbound: [ + { + action: 'ACCEPT', + ports: '443', + protocol: 'ALL', + }, + { + action: 'ACCEPT', + ports: '80', + protocol: 'ALL', + }, + ], + }, + }); + + expect(getCountOfRules(firewall1.rules)).toEqual([1, 1]); + expect(getCountOfRules(firewall2.rules)).toEqual([0, 2]); }); it('should return the correct string given an array of numbers', () => { diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx index efdd36419c0..f6503d2e619 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx @@ -104,7 +104,7 @@ export const getRuleString = (count: [number, number]): string => { }; export const getCountOfRules = (rules: Firewall['rules']): [number, number] => { - return [(rules.inbound || []).length, (rules.outbound || []).length]; + return [(rules?.inbound || []).length, (rules?.outbound || []).length]; }; interface DeviceLinkInputs { diff --git a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx index 1f9546c4fd1..9cc83b971f7 100644 --- a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx @@ -1,14 +1,14 @@ -import { queryPresets } from '@linode/queries'; +import { queryPresets, useMaintenanceQuery } from '@linode/queries'; import { Stack, Typography } from '@linode/ui'; import * as React from 'react'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Link } from 'src/components/Link'; -import { useMaintenanceQuery } from 'src/queries/statusPage'; +import { LINODE_STATUS_PAGE_URL } from 'src/constants'; import { sanitizeHTML } from 'src/utilities/sanitizeHTML'; +import type { Maintenance } from '@linode/queries'; import type { SuppliedMaintenanceData } from 'src/featureFlags'; -import type { Maintenance } from 'src/queries/statusPage'; interface Props { suppliedMaintenances: SuppliedMaintenanceData[] | undefined; @@ -17,9 +17,12 @@ interface Props { export const APIMaintenanceBanner = React.memo((props: Props) => { const { suppliedMaintenances } = props; - const { data: maintenancesData } = useMaintenanceQuery({ - ...queryPresets.oneTimeFetch, - }); + const { data: maintenancesData } = useMaintenanceQuery( + LINODE_STATUS_PAGE_URL, + { + ...queryPresets.oneTimeFetch, + } + ); const maintenances = maintenancesData?.scheduled_maintenances ?? []; if ( diff --git a/packages/manager/src/features/Help/StatusBanners.tsx b/packages/manager/src/features/Help/StatusBanners.tsx index 2a665f5ab1f..6b703696a84 100644 --- a/packages/manager/src/features/Help/StatusBanners.tsx +++ b/packages/manager/src/features/Help/StatusBanners.tsx @@ -1,3 +1,4 @@ +import { useIncidentQuery } from '@linode/queries'; import { Box, Typography } from '@linode/ui'; import { capitalize, truncateEnd } from '@linode/utilities'; import { useTheme } from '@mui/material/styles'; @@ -6,13 +7,13 @@ import * as React from 'react'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Link } from 'src/components/Link'; -import { useIncidentQuery } from 'src/queries/statusPage'; +import { LINODE_STATUS_PAGE_URL } from 'src/constants'; import { sanitizeHTML } from 'src/utilities/sanitizeHTML'; -import type { IncidentImpact, IncidentStatus } from 'src/queries/statusPage'; +import type { IncidentImpact, IncidentStatus } from '@linode/queries'; export const StatusBanners = () => { - const { data: incidentsData } = useIncidentQuery(); + const { data: incidentsData } = useIncidentQuery(LINODE_STATUS_PAGE_URL); const incidents = incidentsData?.incidents ?? []; if (incidents.length === 0) { diff --git a/packages/manager/src/features/IAM/Shared/AssignedRolesTable/ChangeRoleDrawer.test.tsx b/packages/manager/src/features/IAM/Shared/AssignedRolesTable/ChangeRoleDrawer.test.tsx index 442bdebafda..179300bad1c 100644 --- a/packages/manager/src/features/IAM/Shared/AssignedRolesTable/ChangeRoleDrawer.test.tsx +++ b/packages/manager/src/features/IAM/Shared/AssignedRolesTable/ChangeRoleDrawer.test.tsx @@ -119,7 +119,9 @@ describe('ChangeRoleDrawer', () => { // Check that the correct text is displayed for account_access expect( - screen.getByText(/Select a role you want the entities to be attached to./i) + screen.getByText( + /Select a role you want the entities to be attached to./i + ) // screen.getByText('Select a role you want the entities to be attached to.') ).toBeVisible(); diff --git a/packages/manager/src/features/IAM/hooks/adapters/accountGrantsToPermissions.ts b/packages/manager/src/features/IAM/hooks/adapters/accountGrantsToPermissions.ts new file mode 100644 index 00000000000..3ad0c370e75 --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/adapters/accountGrantsToPermissions.ts @@ -0,0 +1,70 @@ +import type { + AccountAdmin, + GlobalGrantTypes, + GrantLevel, +} from '@linode/api-v4'; + +/** Map the existing Grant model to the new IAM RBAC model. */ +// list_vpcs_ip_addresses returned by API +// upload_image returned by API +export const accountGrantsToPermissions = ( + globalGrants?: Record, + isRestricted?: boolean +): Record => { + const unrestricted = isRestricted === false; // explicit === false since the profile can be undefined + const hasWriteAccess = + globalGrants?.account_access === 'read_write' || unrestricted; + const hasReadAccess = + globalGrants?.account_access === 'read_only' || hasWriteAccess; + + return { + // AccountAdmin + accept_service_transfer: unrestricted, + cancel_account: unrestricted || globalGrants?.cancel_account, + cancel_service_transfer: unrestricted, + create_service_transfer: unrestricted, + create_user: unrestricted, + delete_user: unrestricted, // TODO: verify mapping as this is not in the API + enable_managed: unrestricted, + enroll_beta_program: unrestricted, + is_account_admin: unrestricted, + update_account: unrestricted, + update_account_settings: unrestricted, + update_user: unrestricted, // TODO: verify mapping as this is not in the API + update_user_grants: unrestricted, // TODO: verify mapping as this is not in the API + // AccountViewer + list_account_agreements: unrestricted, + list_account_logins: unrestricted, + list_available_services: unrestricted, + list_default_firewalls: unrestricted, + list_service_transfers: unrestricted, + list_user_grants: unrestricted, // TODO: verify mapping as this is not in the API + view_account: unrestricted, + view_account_login: unrestricted, + view_account_settings: unrestricted, + view_enrolled_beta_program: unrestricted, + view_network_usage: unrestricted, + view_region_available_service: unrestricted, + view_service_transfer: unrestricted, + view_user: true, // TODO: verify mapping as this is not in the API + view_user_preferences: true, // TODO: verify mapping as this is not in the API + // AccountBillingAdmin + create_payment_method: hasWriteAccess, + create_promo_code: hasWriteAccess, + delete_payment_method: hasWriteAccess, + make_billing_payment: hasWriteAccess, + set_default_payment_method: hasWriteAccess, + // AccountBillingViewer + list_billing_invoices: hasReadAccess, + list_billing_payments: hasReadAccess, + list_invoice_items: hasReadAccess, + list_payment_methods: hasReadAccess, + view_billing_invoice: hasReadAccess, + view_billing_payment: hasReadAccess, + view_payment_method: hasReadAccess, + // AccountFirewallAdmin + create_firewall: unrestricted || globalGrants?.add_firewalls, + // AccountLinodeAdmin + create_linode: unrestricted || globalGrants?.add_linodes, + } as Record; +}; diff --git a/packages/manager/src/features/IAM/hooks/adapters/firewallGrantsToPermissions.ts b/packages/manager/src/features/IAM/hooks/adapters/firewallGrantsToPermissions.ts new file mode 100644 index 00000000000..5805d5e5675 --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/adapters/firewallGrantsToPermissions.ts @@ -0,0 +1,22 @@ +import type { FirewallAdmin, GrantLevel } from '@linode/api-v4'; + +/** Map the existing Grant model to the new IAM RBAC model. */ +export const firewallGrantsToPermissions = ( + grantLevel?: GrantLevel, + isRestricted?: boolean +): Record => { + const unrestricted = isRestricted === false; // explicit === false + return { + delete_firewall: unrestricted || grantLevel === 'read_write', + delete_firewall_device: unrestricted || grantLevel === 'read_write', + create_firewall_device: unrestricted || grantLevel === 'read_write', + update_firewall: unrestricted || grantLevel === 'read_write', + update_firewall_rules: unrestricted || grantLevel === 'read_write', + list_firewall_devices: unrestricted || grantLevel !== null, + list_firewall_rule_versions: unrestricted || grantLevel !== null, + list_firewall_rules: unrestricted || grantLevel !== null, + view_firewall: unrestricted || grantLevel !== null, + view_firewall_device: unrestricted || grantLevel !== null, + view_firewall_rule_version: unrestricted || grantLevel !== null, + }; +}; diff --git a/packages/manager/src/features/IAM/hooks/adapters/linodeGrantsToPermissions.ts b/packages/manager/src/features/IAM/hooks/adapters/linodeGrantsToPermissions.ts new file mode 100644 index 00000000000..d79f19abe4d --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/adapters/linodeGrantsToPermissions.ts @@ -0,0 +1,63 @@ +import type { GrantLevel, LinodeAdmin } from '@linode/api-v4'; + +/** Map the existing Grant model to the new IAM RBAC model. */ +export const linodeGrantsToPermissions = ( + grantLevel?: GrantLevel, + isRestricted?: boolean +): Record => { + const unrestricted = isRestricted === false; // explicit === false since the profile can be undefined + return { + cancel_linode_backups: unrestricted || grantLevel === 'read_write', + delete_linode: unrestricted || grantLevel === 'read_write', + delete_linode_config_profile: unrestricted || grantLevel === 'read_write', + delete_linode_config_profile_interface: + unrestricted || grantLevel === 'read_write', + delete_linode_disk: unrestricted || grantLevel === 'read_write', + apply_linode_firewalls: unrestricted || grantLevel === 'read_write', + boot_linode: unrestricted || grantLevel === 'read_write', + clone_linode: unrestricted || grantLevel === 'read_write', + clone_linode_disk: unrestricted || grantLevel === 'read_write', + create_linode_backup_snapshot: unrestricted || grantLevel === 'read_write', + create_linode_config_profile: unrestricted || grantLevel === 'read_write', + create_linode_config_profile_interface: + unrestricted || grantLevel === 'read_write', + create_linode_disk: unrestricted || grantLevel === 'read_write', + enable_linode_backups: unrestricted || grantLevel === 'read_write', + generate_linode_lish_token: unrestricted || grantLevel === 'read_write', + generate_linode_lish_token_remote: + unrestricted || grantLevel === 'read_write', + migrate_linode: unrestricted || grantLevel === 'read_write', + password_reset_linode: unrestricted || grantLevel === 'read_write', + reboot_linode: unrestricted || grantLevel === 'read_write', + rebuild_linode: unrestricted || grantLevel === 'read_write', + reorder_linode_config_profile_interfaces: + unrestricted || grantLevel === 'read_write', + rescue_linode: unrestricted || grantLevel === 'read_write', + reset_linode_disk_root_password: + unrestricted || grantLevel === 'read_write', + resize_linode: unrestricted || grantLevel === 'read_write', + resize_linode_disk: unrestricted || grantLevel === 'read_write', + restore_linode_backup: unrestricted || grantLevel === 'read_write', + shutdown_linode: unrestricted || grantLevel === 'read_write', + update_linode: unrestricted || grantLevel === 'read_write', + update_linode_config_profile: unrestricted || grantLevel === 'read_write', + update_linode_config_profile_interface: + unrestricted || grantLevel === 'read_write', + update_linode_disk: unrestricted || grantLevel === 'read_write', + update_linode_firewalls: unrestricted || grantLevel === 'read_write', + upgrade_linode: unrestricted || grantLevel === 'read_write', + list_linode_firewalls: unrestricted || grantLevel !== null, + list_linode_nodebalancers: unrestricted || grantLevel !== null, + list_linode_volumes: unrestricted || grantLevel !== null, + view_linode: unrestricted || grantLevel !== null, + view_linode_backup: unrestricted || grantLevel !== null, + view_linode_config_profile: unrestricted || grantLevel !== null, + view_linode_config_profile_interface: unrestricted || grantLevel !== null, + view_linode_disk: unrestricted || grantLevel !== null, + view_linode_monthly_network_transfer_stats: + unrestricted || grantLevel !== null, + view_linode_monthly_stats: unrestricted || grantLevel !== null, + view_linode_network_transfer: unrestricted || grantLevel !== null, + view_linode_stats: unrestricted || grantLevel !== null, + }; +}; diff --git a/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.test.ts b/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.test.ts new file mode 100644 index 00000000000..1b1a960abd8 --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.test.ts @@ -0,0 +1,164 @@ +import { fromGrants, toPermissionMap } from './permissionAdapters'; + +import type { Grants, PermissionType } from '@linode/api-v4'; + +describe('toPermissionMap', () => { + it('should map AccountAdmin permissions correctly', () => { + const permissionsToCheck: PermissionType[] = [ + 'cancel_account', + 'create_user', + 'update_account', + 'view_account', + ]; + const usersPermissions: PermissionType[] = [ + 'cancel_account', + 'create_user', + 'view_account', + ]; + const result = toPermissionMap(permissionsToCheck, usersPermissions); + expect(result).toEqual({ + cancel_account: true, + create_user: true, + update_account: false, + view_account: true, + }); + }); + + it('should map LinodeContributor permissions correctly', () => { + const permissionsToCheck: PermissionType[] = [ + 'boot_linode', + 'apply_linode_firewalls', + 'resize_linode', + ]; + const usersPermissions: PermissionType[] = ['boot_linode', 'resize_linode']; + const result = toPermissionMap(permissionsToCheck, usersPermissions); + expect(result).toEqual({ + boot_linode: true, + apply_linode_firewalls: false, + resize_linode: true, + }); + }); +}); + +describe('fromGrants', () => { + const grants: Grants = { + global: { + account_access: null, + add_databases: false, + add_domains: false, + add_firewalls: false, + add_images: false, + add_kubernetes: false, + add_linodes: true, + add_lkes: false, + add_longview: false, + add_nodebalancers: false, + add_stackscripts: false, + add_volumes: true, + add_vpcs: false, + cancel_account: false, + child_account_access: null, + longview_subscription: false, + }, + linode: [ + { + id: 99487769, + label: 'corya-read_write-linode', + permissions: 'read_write', + }, + { + id: 99496487, + label: 'corya-read_only-linode', + permissions: 'read_only', + }, + ], + firewall: [ + { + id: 126860, + label: 'corya-read_write-firewall', + permissions: 'read_write', + }, + { + id: 129617, + label: 'corya-read_only-firewall', + permissions: 'read_only', + }, + ], + volume: [ + { + id: 47145, + label: 'corya-read_write-volume', + permissions: 'read_write', + }, + { + id: 47846, + label: 'corya-read_only-volume', + permissions: 'read_only', + }, + ], + nodebalancer: [], + domain: [], + stackscript: [], + longview: [], + image: [], + database: [], + vpc: [], + lkecluster: [], + }; + + it('should check account level permissions', () => { + const permissionsToCheck: PermissionType[] = [ + 'cancel_account', + 'update_account', + 'create_linode', + 'create_firewall', + ]; + const result = fromGrants('account', permissionsToCheck, grants); + expect(result).toEqual({ + cancel_account: false, + update_account: false, + create_linode: true, + create_firewall: false, + }); + }); + + it('should check firewall permissions for read_write firewall', () => { + const permissionsToCheck: PermissionType[] = [ + 'update_firewall', + 'update_firewall_rules', + ]; + const result = fromGrants( + 'firewall', + permissionsToCheck, + grants, + false, + 126860 + ); + expect(result).toEqual({ + update_firewall: true, + update_firewall_rules: true, + }); + }); + + it('should check linode permissions for read_write linode', () => { + const permissionsToCheck: PermissionType[] = [ + 'clone_linode', + 'reboot_linode', + 'update_linode', + 'upgrade_linode', + ]; + const result = fromGrants( + 'linode', + permissionsToCheck, + grants, + false, + 99487769 + ); + expect(result).toEqual({ + clone_linode: true, + reboot_linode: true, + update_linode: true, + upgrade_linode: true, + }); + }); +}); diff --git a/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.ts b/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.ts new file mode 100644 index 00000000000..01c922c8b3e --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.ts @@ -0,0 +1,72 @@ +import { accountGrantsToPermissions } from './accountGrantsToPermissions'; +import { firewallGrantsToPermissions } from './firewallGrantsToPermissions'; +import { linodeGrantsToPermissions } from './linodeGrantsToPermissions'; + +import type { AccessType, Grants, PermissionType } from '@linode/api-v4'; + +export const toPermissionMap = ( + permissionsToCheck: PermissionType[], + usersPermissions: PermissionType[], + isRestricted?: boolean +): Record => { + const unrestricted = isRestricted === false; // explicit === false since the profile can be undefined + const usersPermissionMap = {} as Record; + usersPermissions?.forEach( + (permission) => (usersPermissionMap[permission] = true) + ); + + const permissionMap = {} as Record; + permissionsToCheck?.forEach( + (permission) => + (permissionMap[permission] = + (unrestricted || usersPermissionMap[permission]) ?? false) + ); + + return permissionMap; +}; + +/** Map the existing Grant model to the new IAM RBAC model. */ +export const fromGrants = ( + accessType: AccessType, + permissionsToCheck: PermissionType[], + grants: Grants, + isRestricted?: boolean, + entittyId?: number +): Record => { + let usersPermissionsMap = {} as Record; + + switch (accessType) { + case 'account': + usersPermissionsMap = accountGrantsToPermissions( + grants?.global, + isRestricted + ) as Record; + break; + case 'firewall': + // eslint-disable-next-line no-case-declarations + const firewall = grants?.firewall.find((f) => f.id === entittyId); + usersPermissionsMap = firewallGrantsToPermissions( + firewall?.permissions, + isRestricted + ) as Record; + break; + case 'linode': + // eslint-disable-next-line no-case-declarations + const linode = grants?.linode.find((f) => f.id === entittyId); + usersPermissionsMap = linodeGrantsToPermissions( + linode?.permissions, + isRestricted + ) as Record; + break; + default: + throw new Error(`Unknown access type: ${accessType}`); + } + + const permissionsMap = {} as Record; + permissionsToCheck?.forEach( + (permission) => + (permissionsMap[permission] = usersPermissionsMap[permission] ?? false) + ); + + return permissionsMap; +}; diff --git a/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.test.ts b/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.test.ts index 0b8e92e5177..b4c671a46a6 100644 --- a/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.test.ts +++ b/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.test.ts @@ -1,34 +1,39 @@ import { renderHook, waitFor } from '@testing-library/react'; -import { accountRolesFactory } from 'src/factories/accountRoles'; import { http, HttpResponse, server } from 'src/mocks/testServer'; import { wrapWithTheme } from 'src/utilities/testHelpers'; import { useIsIAMEnabled } from './useIsIAMEnabled'; const queryMocks = vi.hoisted(() => ({ - useAccountRoles: vi.fn().mockReturnValue({ foo: 'bar' }), + useUserAccountPermissions: vi + .fn() + .mockReturnValue(['cancel_account', 'create_user']), + useProfile: vi + .fn() + .mockReturnValue({ data: { username: 'mock-user', restricted: true } }), })); vi.mock(import('@linode/queries'), async (importOriginal) => { const actual = await importOriginal(); return { ...actual, - useAccountRoles: queryMocks.useAccountRoles, + useUserAccountPermissions: queryMocks.useUserAccountPermissions, + useProfile: queryMocks.useProfile, }; }); describe('useIsIAMEnabled', () => { it('should be enabled for a BETA user', async () => { - const rolePermissions = accountRolesFactory.build(); + const accountPermissions = ['cancel_account', 'create_user']; server.use( - http.get('*/v4beta/iam/role-permissions', () => { - return HttpResponse.json(rolePermissions); + http.get('*/v4beta/iam/users/mock-user/permissions/account', () => { + return HttpResponse.json(accountPermissions); }) ); - queryMocks.useAccountRoles.mockReturnValue({ - data: rolePermissions, + queryMocks.useUserAccountPermissions.mockReturnValue({ + data: accountPermissions, }); const flags = { iam: { beta: true, enabled: true } }; @@ -44,15 +49,15 @@ describe('useIsIAMEnabled', () => { }); it('should enabled for a GA user', async () => { - const rolePermissions = accountRolesFactory.build(); + const accountPermissions = ['cancel_account', 'create_user']; server.use( - http.get('*/v4beta/iam/role-permissions', () => { - return HttpResponse.json(rolePermissions); + http.get('*/v4beta/iam/users/mock-user/permissions/account', () => { + return HttpResponse.json(accountPermissions); }) ); - queryMocks.useAccountRoles.mockReturnValue({ - data: rolePermissions, + queryMocks.useUserAccountPermissions.mockReturnValue({ + data: accountPermissions, }); const flags = { iam: { beta: false, enabled: true } }; @@ -66,20 +71,20 @@ describe('useIsIAMEnabled', () => { // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions expect(result.current.isIAMEnabled).toBe(true); // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions - expect(queryMocks.useAccountRoles).toHaveBeenCalledWith(true); + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(true); }); }); it('should be diabled for all users via a feature flag', async () => { - const rolePermissions = accountRolesFactory.build(); + const accountPermissions = ['cancel_account', 'create_user']; server.use( - http.get('*/v4beta/iam/role-permissions', () => { - return HttpResponse.json(rolePermissions); + http.get('*/v4beta/iam/users/mock-user/permissions/account', () => { + return HttpResponse.json(accountPermissions); }) ); - queryMocks.useAccountRoles.mockReturnValue({ - data: rolePermissions, + queryMocks.useUserAccountPermissions.mockReturnValue({ + data: accountPermissions, }); const flags = { iam: { beta: false, enabled: false } }; @@ -93,18 +98,18 @@ describe('useIsIAMEnabled', () => { // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions expect(result.current.isIAMEnabled).toBe(false); // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions - expect(queryMocks.useAccountRoles).toHaveBeenCalledWith(false); + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(false); }); }); it('should be diabled for a user via API', async () => { server.use( - http.get('*/v4beta/iam/role-permissions', () => { + http.get('*/v4beta/iam/users/mock-user/permissions/account', () => { return HttpResponse.json({}, { status: 403 }); }) ); - queryMocks.useAccountRoles.mockReturnValue({ + queryMocks.useUserAccountPermissions.mockReturnValue({ data: null, }); @@ -119,7 +124,7 @@ describe('useIsIAMEnabled', () => { // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions expect(result.current.isIAMEnabled).toBe(false); // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions - expect(queryMocks.useAccountRoles).toHaveBeenCalledWith(true); + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(true); }); }); }); diff --git a/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.ts b/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.ts index c96b48df7ca..bb5703eb05d 100644 --- a/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.ts +++ b/packages/manager/src/features/IAM/hooks/useIsIAMEnabled.ts @@ -1,4 +1,8 @@ -import { useAccountRoles } from '@linode/queries'; +import { + useAccountRoles, + useProfile, + useUserAccountPermissions, +} from '@linode/queries'; import { useFlags } from 'src/hooks/useFlags'; @@ -9,15 +13,17 @@ import { useFlags } from 'src/hooks/useFlags'; */ export const useIsIAMEnabled = () => { const flags = useFlags(); - const { data: accountRoles } = useAccountRoles(flags.iam?.enabled); + const { data: profile } = useProfile(); + const { data: roles } = useAccountRoles( + flags?.iam?.enabled === true && !profile?.restricted + ); - const hasAccountAccess = accountRoles?.account_access?.length; - const hasEntityAccess = accountRoles?.entity_access?.length; + const { data: permissions } = useUserAccountPermissions( + flags?.iam?.enabled === true + ); return { isIAMBeta: flags.iam?.beta, - isIAMEnabled: Boolean( - flags.iam?.enabled && (hasAccountAccess || hasEntityAccess) - ), + isIAMEnabled: flags?.iam?.enabled && Boolean(roles || permissions?.length), }; }; diff --git a/packages/manager/src/features/IAM/hooks/usePermissions.test.ts b/packages/manager/src/features/IAM/hooks/usePermissions.test.ts new file mode 100644 index 00000000000..e0b19f6028b --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/usePermissions.test.ts @@ -0,0 +1,130 @@ +import { renderHook } from '@testing-library/react'; + +import { wrapWithTheme } from 'src/utilities/testHelpers'; + +import { usePermissions } from './usePermissions'; + +import type { AccessType, PermissionType } from '@linode/api-v4'; + +const queryMocks = vi.hoisted(() => ({ + useIsIAMEnabled: vi + .fn() + .mockReturnValue({ isIAMEnabled: true, isIAMBeta: true }), + useUserAccountPermissions: vi.fn().mockReturnValue({ + data: ['cancel_account', 'create_linode'], + }), + useUserEntityPermissions: vi + .fn() + .mockReturnValue({ data: ['boot_linode', 'update_linode'] }), + useGrants: vi.fn().mockReturnValue({ data: null }), +})); + +vi.mock(import('@linode/queries'), async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useIsIAMEnabled: queryMocks.useIsIAMEnabled, + useUserAccountPermissions: queryMocks.useUserAccountPermissions, + useUserEntityPermissions: queryMocks.useUserEntityPermissions, + useGrants: queryMocks.useGrants, + }; +}); + +vi.mock('./adapters', () => ({ + fromGrants: vi.fn( + ( + _accessType: AccessType, + permissions: PermissionType[], + _grants: unknown, + _entityId?: number + ) => { + return permissions.reduce>( + (acc, p) => { + acc[p] = true; + return acc; + }, + {} as Record + ); + } + ), + toPermissionMap: vi.fn( + (permissions: PermissionType[], _permsData: unknown) => { + return permissions.reduce>( + (acc, p) => { + acc[p] = true; + return acc; + }, + {} as Record + ); + } + ), +})); + +describe('usePermissions', () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it('returns correct map when IAM is enabled (account)', () => { + const flags = { iam: { beta: true, enabled: true } }; + + renderHook( + () => usePermissions('account', ['cancel_account', 'create_linode']), + { + wrapper: (ui) => wrapWithTheme(ui, { flags }), + } + ); + + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(true); + expect(queryMocks.useUserEntityPermissions).toHaveBeenCalledWith( + 'account', + undefined, + true + ); + expect(queryMocks.useGrants).toHaveBeenCalledWith(false); + }); + + it('returns correct map when IAM is enabled (entity)', () => { + const flags = { iam: { beta: true, enabled: true } }; + + renderHook( + () => usePermissions('linode', ['reboot_linode', 'view_linode'], 123), + { + wrapper: (ui) => wrapWithTheme(ui, { flags }), + } + ); + + expect(queryMocks.useUserEntityPermissions).toHaveBeenCalledWith( + 'linode', + 123, + true + ); + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(false); + expect(queryMocks.useGrants).toHaveBeenCalledWith(false); + }); + + it('returns correct map when IAM is disabled (uses grants)', () => { + queryMocks.useIsIAMEnabled.mockReturnValue({ isIAMEnabled: false }); + queryMocks.useUserAccountPermissions.mockReturnValue({ data: null }); + queryMocks.useUserEntityPermissions.mockReturnValue({ data: null }); + queryMocks.useGrants.mockReturnValue({ + data: { global: { add_linode: true } }, + }); + + const flags = { iam: { beta: false, enabled: false } }; + renderHook( + () => usePermissions('account', ['cancel_account', 'create_linode']), + { + wrapper: (ui) => wrapWithTheme(ui, { flags }), + } + ); + + expect(queryMocks.useGrants).toHaveBeenCalledWith(true); + expect(queryMocks.useUserAccountPermissions).toHaveBeenCalledWith(false); + expect(queryMocks.useUserEntityPermissions).toHaveBeenCalledWith( + 'account', + undefined, + false + ); + }); +}); diff --git a/packages/manager/src/features/IAM/hooks/usePermissions.ts b/packages/manager/src/features/IAM/hooks/usePermissions.ts new file mode 100644 index 00000000000..83e6e87d9dc --- /dev/null +++ b/packages/manager/src/features/IAM/hooks/usePermissions.ts @@ -0,0 +1,52 @@ +import { + useGrants, + useProfile, + useUserAccountPermissions, + useUserEntityPermissions, +} from '@linode/queries'; + +import { fromGrants, toPermissionMap } from './adapters/permissionAdapters'; +import { useIsIAMEnabled } from './useIsIAMEnabled'; + +import type { AccessType, PermissionType } from '@linode/api-v4'; + +export const usePermissions = ( + accessType: AccessType, + permissionsToCheck: PermissionType[], + entityId?: number, + enabled: boolean = true +): { permissions: Record } => { + const { isIAMEnabled } = useIsIAMEnabled(); + + const { data: userAccountPermissions } = useUserAccountPermissions( + isIAMEnabled && accessType === 'account' && enabled + ); + + const { data: userEntityPermisssions } = useUserEntityPermissions( + accessType, + entityId!, + isIAMEnabled && enabled + ); + + const usersPermissions = + accessType === 'account' ? userAccountPermissions : userEntityPermisssions; + + const { data: profile } = useProfile(); + const { data: grants } = useGrants(!isIAMEnabled && enabled); + + const permissionMap = isIAMEnabled + ? toPermissionMap( + permissionsToCheck, + usersPermissions!, + profile?.restricted + ) + : fromGrants( + accessType, + permissionsToCheck, + grants!, + profile?.restricted, + entityId + ); + + return { permissions: permissionMap } as const; +}; diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx index f1da3b03a58..4b06a293f4d 100644 --- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx @@ -304,7 +304,7 @@ export const CreateImageTab = () => { <> This image is cloud-init compatible Many Linode supported operating systems are diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx index f31af07fb93..1158865824a 100644 --- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx @@ -18,7 +18,7 @@ import { Typography, } from '@linode/ui'; import { readableBytes } from '@linode/utilities'; -import { useNavigate, useSearch } from '@tanstack/react-router'; +import { useBlocker, useNavigate, useSearch } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import React, { useState } from 'react'; import { flushSync } from 'react-dom'; @@ -181,6 +181,37 @@ export const ImageUpload = () => { navigate({ search: () => ({}), to: nextLocation }); }; + const { proceed, reset, status } = useBlocker({ + enableBeforeUnload: hasPendingUpload, + shouldBlockFn: ({ next }) => { + // Only block if there are unsaved changes + if (!hasPendingUpload) { + return false; + } + + // Don't block navigation to the specific route + const isNavigatingToAllowedRoute = + next.routeId === '/images/create/upload'; + + return !isNavigatingToAllowedRoute; + }, + withResolver: true, + }); + + // Create a combined handler for proceeding with navigation + const handleProceedNavigation = React.useCallback(() => { + if (status === 'blocked' && proceed) { + proceed(); + } + }, [status, proceed]); + + // Create a combined handler for canceling navigation + const handleCancelNavigation = React.useCallback(() => { + if (status === 'blocked' && reset) { + reset(); + } + }, [status, reset]); + return ( @@ -401,6 +432,8 @@ export const ImageUpload = () => { isOpen={linodeCLIModalOpen} onClose={() => setLinodeCLIModalOpen(false)} /> + + {/* Use Prompt for now until Link is coupled with Tanstack router */} { { + handleProceedNavigation(); + handleConfirm(); + }, }} secondaryButtonProps={{ label: 'Cancel', - onClick: handleCancel, + onClick: () => { + handleCancelNavigation(); + handleCancel(); + }, }} /> } - onClose={handleCancel} - open={isModalOpen} + onClose={() => { + handleCancelNavigation(); + handleCancel(); + }} + open={status === 'blocked' || isModalOpen} title="Leave this page?" > diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx index 72521ea2a9b..8c2e96b0925 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx @@ -1,5 +1,5 @@ import { useProfile } from '@linode/queries'; -import { Stack, Tooltip } from '@linode/ui'; +import { Stack, TooltipIcon } from '@linode/ui'; import { Hidden } from '@linode/ui'; import { convertStorageUnit, pluralize } from '@linode/utilities'; import React from 'react'; @@ -79,18 +79,23 @@ export const ImageRow = (props: Props) => { {type === 'manual' && status !== 'creating' && !image.capabilities.includes('distributed-sites') && ( - -
- -
- + } + sxTooltipIcon={{ + padding: 0, + mr: '2px', + }} + text="This image is not encrypted. You can recreate the image to enable encryption and then delete this image." + /> )} {type === 'manual' && capabilities.includes('cloud-init') && ( - -
- -
- + } + sxTooltipIcon={{ + padding: 0, + }} + text="This image supports our Metadata service via cloud-init." + /> )} diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageStatus.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageStatus.tsx index a3abe9d1581..3f297d94cf1 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageStatus.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageStatus.tsx @@ -36,7 +36,7 @@ export const ImageStatus = (props: Props) => { Upload Failed {event.message && ( diff --git a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx index 661e8982fe4..70914c5689c 100644 --- a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx +++ b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx @@ -82,7 +82,7 @@ export const KubernetesClusterRow = (props: Props) => { {cluster.k8s_version} - {hasUpgrade && ( + {hasUpgrade && !isLKEClusterReadOnly && ( void; @@ -29,75 +33,74 @@ export const APLCopy = () => ( ); export const ApplicationPlatform = (props: APLProps) => { - const { isSectionDisabled, setAPL, setHighAvailability } = props; - const { isAPLGeneralAvailability } = useAPLAvailability(); - const [isAPLChecked, setIsAPLChecked] = React.useState( - isSectionDisabled ? false : undefined - ); - const [isAPLNotChecked, setIsAPLNotChecked] = React.useState< - boolean | undefined - >(isSectionDisabled ? true : undefined); - const APL_UNSUPPORTED_CHIP_COPY = `${!isAPLGeneralAvailability ? ' - ' : ''}${isSectionDisabled ? 'COMING SOON' : ''}`; - - /** - * Reset the radio buttons to the correct default state once the user toggles cluster tiers. - */ - React.useEffect(() => { - setIsAPLChecked(isSectionDisabled ? false : undefined); - setIsAPLNotChecked(isSectionDisabled ? true : undefined); - }, [isSectionDisabled]); - - const CHIP_COPY = `${!isAPLGeneralAvailability ? 'BETA' : ''}${isSectionDisabled ? APL_UNSUPPORTED_CHIP_COPY : ''}`; + const { setAPL, setHighAvailability, isSectionDisabled } = props; + const [selectedValue, setSelectedValue] = React.useState< + 'no' | 'yes' | undefined + >(isSectionDisabled ? 'no' : undefined); const handleChange = (e: React.ChangeEvent) => { - setAPL(e.target.value === 'yes'); - setHighAvailability(e.target.value === 'yes'); + const value = e.target.value; + if (value === 'yes' || value === 'no') { + setSelectedValue(value); + setAPL(value === 'yes'); + setHighAvailability(value === 'yes'); + } }; return ( ({ - '&&.MuiFormLabel-root.Mui-focused': { - color: - theme.name === 'dark' - ? theme.tokens.color.Neutrals.White - : theme.color.black, - }, + color: theme.tokens.alias.Typography.Label.Bold.S, })} > - Akamai App Platform - {(!isAPLGeneralAvailability || isSectionDisabled) && ( - + Akamai App Platform + + {isSectionDisabled ? ( + + ) : ( + )} - handleChange(e)}> + } + control={ + + } disabled={isSectionDisabled} - label="Yes, enable Akamai App Platform." - name="yes" + label="Yes, enable Akamai App Platform" value="yes" /> } + control={ + + } disabled={isSectionDisabled} label="No" - name="no" value="no" /> ); }; + +const StyledComingSoonChip = styled(StyledBetaChip, { + label: 'StyledComingSoonChip', + shouldForwardProp: (prop) => prop !== 'color', +})(({ theme }) => ({ + background: theme.tokens.color.Brand[80], + textTransform: theme.tokens.font.Textcase.Uppercase, +})); diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts index b37153379c4..04360c47349 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts @@ -1,45 +1,5 @@ import { Box, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { makeStyles } from 'tss-react/mui'; - -import type { Theme } from '@mui/material/styles'; - -export const useStyles = makeStyles()((theme: Theme) => ({ - root: { - '& .mlMain': { - flexBasis: '100%', - maxWidth: '100%', - [theme.breakpoints.up('lg')]: { - flexBasis: '78.8%', - maxWidth: '78.8%', - }, - }, - '& .mlSidebar': { - flexBasis: '100%', - maxWidth: '100%', - position: 'static', - [theme.breakpoints.up('lg')]: { - flexBasis: '21.2%', - maxWidth: '21.2%', - position: 'sticky', - }, - width: '100%', - }, - }, - sidebar: { - background: 'none', - marginTop: '0px !important', - paddingTop: '0px !important', - [theme.breakpoints.down('lg')]: { - background: theme.color.white, - marginTop: `${theme.spacing(3)} !important`, - padding: `${theme.spacing(3)} !important`, - }, - [theme.breakpoints.down('md')]: { - padding: `${theme.spacing()} !important`, - }, - }, -})); export const StyledStackWithTabletBreakpoint = styled(Stack, { label: 'StyledStackWithTabletBreakpoint', diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index cf8263f9d98..b225ad03617 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -66,7 +66,6 @@ import { ControlPlaneACLPane } from './ControlPlaneACLPane'; import { StyledDocsLinkContainer, StyledStackWithTabletBreakpoint, - useStyles, } from './CreateCluster.styles'; import { HAControlPlane } from './HAControlPlane'; import { NodePoolPanel } from './NodePoolPanel'; @@ -88,7 +87,6 @@ export const CreateCluster = () => { flags.gecko2?.enabled, flags.gecko2?.la ); - const { classes } = useStyles(); const [selectedRegion, setSelectedRegion] = React.useState< Region | undefined >(); @@ -380,8 +378,8 @@ export const CreateCluster = () => { docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-lke-linode-kubernetes-engine" title="Create Cluster" /> - - + + {generalError && ( { disabled={isCreateClusterRestricted} errorText={errorMap.label} label="Cluster Label" + noMarginTop onChange={(e: React.ChangeEvent) => updateLabel(e.target.value) } @@ -583,8 +582,8 @@ export const CreateCluster = () => { { updatePool, removePool, createCluster, - classes, ]} updatePool={updatePool} /> diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index 0290574e088..ce6aafecf16 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -103,7 +103,7 @@ export const HAControlPlane = (props: HAControlPlaneProps) => { {isAPLEnabled && ( { return ; } + const price = region + ? getTotalClusterPrice({ + enterprisePrice: enterprisePrice ?? undefined, + highAvailabilityPrice: + highAvailability && !enterprisePrice + ? Number(highAvailabilityPrice) + : undefined, + pools, + region, + types: types ?? [], + }) + : undefined; + return ( ) : undefined } - calculatedPrice={ - region - ? getTotalClusterPrice({ - enterprisePrice: enterprisePrice ?? undefined, - highAvailabilityPrice: - highAvailability && !enterprisePrice - ? Number(highAvailabilityPrice) - : undefined, - pools, - region, - types: types ?? [], - }) - : undefined - } + calculatedPrice={price} data-qa-checkout-bar disabled={disableCheckout} heading="Cluster Summary" @@ -127,22 +132,20 @@ export const KubeCheckoutBar = (props: Props) => { } submitText="Create Cluster" > - <> + } mt={2} spacing={2}> {region && highAvailability && !enterprisePrice && ( - - - High Availability (HA) Control Plane + + + High Availability (HA) Control Plane + {`$${highAvailabilityPrice}/month`} - + )} {enterprisePrice && ( - - - LKE Enterprise - {`$${enterprisePrice?.toFixed( - 2 - )}/month`} - + + LKE Enterprise + {`$${enterprisePrice?.toFixed(2)}/month`} + )} {pools.map((thisPool, idx) => ( { } /> ))} - {showWarning && ( )} - + {price && price >= 0 && ( + + {LKE_ADDITIONAL_PRICING} + + See pricing + + . + + + )} + ); }; -const AdditionalPricing = ( - <> - - {LKE_ADDITIONAL_PRICING} - - See pricing - - . - -); - export default RenderGuard(KubeCheckoutBar); diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutSummary.styles.ts b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutSummary.styles.ts deleted file mode 100644 index 4b2a86678a6..00000000000 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutSummary.styles.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Box, IconButton, Typography } from '@linode/ui'; -import { styled } from '@mui/material/styles'; - -export const StyledHeader = styled(Typography, { - label: 'StyledHeader', -})(({ theme }) => ({ - font: theme.font.bold, - fontSize: '16px', - paddingBottom: theme.spacing(0.5), - paddingTop: theme.spacing(0.5), -})); - -export const StyledBox = styled(Box, { - label: 'StyledBox', -})(({ theme }) => ({ - marginTop: theme.spacing(2), -})); - -export const StyledNodePoolSummaryBox = styled(Box, { - label: 'StyledNodePoolSummaryBox', -})(() => ({ - '& $textField': { - width: 53, - }, - display: 'flex', - flexDirection: 'column', -})); - -export const StyledIconButton = styled(IconButton, { - label: 'StyledIconButton', -})(({ theme }) => ({ - '&:hover': { - color: theme.tokens.color.Neutrals[70], - }, - alignItems: 'flex-start', - color: theme.tokens.color.Neutrals[60], - marginTop: -4, - padding: 0, -})); - -export const StyledPriceBox = styled(Box, { - label: 'StyledPriceBox', -})(({ theme }) => ({ - '& h3': { - color: theme.palette.text.primary, - font: theme.font.normal, - }, -})); diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummaryItem.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummaryItem.tsx index 0e1f933fbc0..cfcbd267f3e 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummaryItem.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummaryItem.tsx @@ -1,4 +1,4 @@ -import { Box, CloseIcon, Divider, Typography } from '@linode/ui'; +import { Box, CloseIcon, IconButton, Stack, Typography } from '@linode/ui'; import { pluralize } from '@linode/utilities'; import * as React from 'react'; @@ -9,13 +9,6 @@ import { MAX_NODES_PER_POOL_STANDARD_TIER, } from 'src/features/Kubernetes/constants'; -import { - StyledHeader, - StyledIconButton, - StyledNodePoolSummaryBox, - StyledPriceBox, -} from './KubeCheckoutSummary.styles'; - import type { KubernetesTier } from '@linode/api-v4'; import type { ExtendedType } from 'src/utilities/extendType'; @@ -39,44 +32,48 @@ export const NodePoolSummaryItem = React.memo((props: Props) => { } return ( - <> - - - -
- {poolType.formattedLabel} Plan - - {pluralize('CPU', 'CPUs', poolType.vcpus)}, {poolType.disk / 1024}{' '} - GB Storage - -
- - - - - - + + + {poolType.formattedLabel} Plan + + {pluralize('CPU', 'CPUs', poolType.vcpus)}, {poolType.disk / 1024}{' '} + GB Storage + + + + + + + + + {price ? ( + - - - {price ? ( - - ) : undefined} - - - + ) : undefined} + + ); }); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index 648e69daf51..a16934dc5fb 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -102,7 +102,7 @@ export const KubeClusterSpecs = React.memo((props: Props) => { ${UNKNOWN_PRICE}/month ({ disabled: { '& g': { - stroke: theme.palette.text.secondary, + stroke: theme.tokens.alias.Content.Icon.Primary.Disabled, }, - color: theme.palette.text.secondary, + color: theme.tokens.alias.Content.Text.Primary.Disabled, pointer: 'default', pointerEvents: 'none', }, @@ -153,6 +154,12 @@ export const KubeConfigDisplay = (props: Props) => { isLoading: endpointsLoading, } = useAllKubernetesClusterAPIEndpointsQuery(clusterId); + const isClusterReadOnly = useIsResourceRestricted({ + grantLevel: 'read_only', + grantType: 'lkecluster', + id: clusterId, + }); + const downloadKubeConfig = async () => { try { const queryResult = await getKubeConfig(); @@ -221,27 +228,50 @@ export const KubeConfigDisplay = (props: Props) => { - + {`${clusterLabel}-kubeconfig.yaml`} - - View + + + View + {isCopyTokenLoading ? ( @@ -251,25 +281,39 @@ export const KubeConfigDisplay = (props: Props) => { size="xs" /> ) : ( - + )} - Copy Token + + Copy Token + setResetKubeConfigDialogOpen(true)} > Reset diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx index 71a6519bfac..0d6dc184855 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx @@ -134,6 +134,14 @@ export const KubeEntityDetailFooter = React.memo((props: FooterProps) => { setControlPlaneACLDrawerOpen(true)} + sx={(theme) => ({ + '&:disabled': { + '& g': { + stroke: theme.tokens.alias.Content.Icon.Primary.Disabled, + }, + color: theme.tokens.alias.Content.Text.Primary.Disabled, + }, + })} > {buttonCopyACL} diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx index 50a74369224..a9aea41fa7d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx @@ -181,14 +181,19 @@ export const KubeSummaryPanel = React.memo((props: Props) => { {isLkeEnterpriseLAFeatureEnabled && cluster.tier === 'enterprise' ? undefined : ( } onClick={() => window.open(dashboard?.url, '_blank')} > Kubernetes Dashboard )} - setIsDeleteDialogOpen(true)}> + setIsDeleteDialogOpen(true)} + > Delete Cluster diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index 15c9d5bc273..2318d5e5d1d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -61,12 +61,6 @@ export const KubernetesClusterDetail = () => { cluster ); - const isLkeClusterRestricted = useIsResourceRestricted({ - grantLevel: 'read_only', - grantType: 'lkecluster', - id: cluster?.id, - }); - const [updateError, setUpdateError] = React.useState(); const [isUpgradeToHAOpen, setIsUpgradeToHAOpen] = React.useState(false); @@ -113,12 +107,14 @@ export const KubernetesClusterDetail = () => { - - {isLkeClusterRestricted && restrictedLkeNotice} + {!isClusterReadOnly && ( + + )} + {isClusterReadOnly && restrictedLkeNotice} { clusterLabel={cluster.label} clusterRegionId={cluster.region} clusterTier={cluster.tier ?? 'standard'} - isLkeClusterRestricted={isLkeClusterRestricted} + isLkeClusterRestricted={isClusterReadOnly} regionsData={regionsData || []} /> diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 5379ae6047f..bb61e9204ea 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -347,7 +347,7 @@ export const EncryptedStatus = ({ Not Encrypted {regionSupportsDiskEncryption && tooltipText ? ( - + ) : null} diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx index 840db11f5d5..4aad4c66c33 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx @@ -133,7 +133,7 @@ describe('KubernetesPlanSelection (table, desktop view)', () => { ) ); - const button = getByTestId('disabled-plan-tooltip'); + const button = getByTestId('tooltip-info-icon'); fireEvent.mouseOver(button); await waitFor(() => { diff --git a/packages/manager/src/features/Kubernetes/UpgradeVersionModal.tsx b/packages/manager/src/features/Kubernetes/UpgradeVersionModal.tsx index cb964e439d5..83a602b02bd 100644 --- a/packages/manager/src/features/Kubernetes/UpgradeVersionModal.tsx +++ b/packages/manager/src/features/Kubernetes/UpgradeVersionModal.tsx @@ -17,12 +17,36 @@ import { import { LocalStorageWarningNotice } from './KubernetesClusterDetail/LocalStorageWarningNotice'; +import type { KubernetesTier } from '@linode/api-v4/lib/kubernetes'; + interface Props { clusterID: number; isOpen: boolean; onClose: () => void; } +const getWorkerNodeCopy = (clusterTier: KubernetesTier = 'standard') => { + return clusterTier === 'standard' ? ( + + {' '} + and ensures that any new worker nodes are created using the newer + Kubernetes version.{' '} + + Learn more + + . + + ) : ( + + . Worker nodes within each node pool can then be upgraded separately.{' '} + + Learn more + + .{' '} + + ); +}; + export const UpgradeDialog = (props: Props) => { const { clusterID, isOpen, onClose } = props; @@ -53,6 +77,10 @@ export const UpgradeDialog = (props: Props) => { const [error, setError] = React.useState(); const [submitting, setSubmitting] = React.useState(false); + // Show the second step of the modal for LKE, but not LKE-E. + const shouldShowRecycleNodesStep = + cluster?.tier === 'standard' && hasUpdatedSuccessfully; + React.useEffect(() => { if (isOpen) { setError(undefined); @@ -74,6 +102,10 @@ export const UpgradeDialog = (props: Props) => { .then((_) => { setHasUpdatedSuccessfully(true); setSubmitting(false); + // Do not proceed to the recycle step for LKE-E. + if (cluster?.tier === 'enterprise') { + onClose(); + } }) .catch((e) => { setSubmitting(false); @@ -97,7 +129,7 @@ export const UpgradeDialog = (props: Props) => { }); }; - const dialogTitle = hasUpdatedSuccessfully + const dialogTitle = shouldShowRecycleNodesStep ? 'Upgrade complete' : `Upgrade Kubernetes version ${ nextVersion ? `to ${nextVersion}` : '' @@ -107,9 +139,11 @@ export const UpgradeDialog = (props: Props) => { { title={dialogTitle} > - {hasUpdatedSuccessfully ? ( + {shouldShowRecycleNodesStep ? ( <> The cluster’s Kubernetes version has been updated successfully to{' '} {cluster?.k8s_version}.

@@ -151,12 +185,7 @@ export const UpgradeDialog = (props: Props) => { Upgrade the Kubernetes version on {cluster?.label}{' '} from {cluster?.k8s_version} to{' '} {nextVersion}. This upgrades the control plane on - your cluster and ensures that any new worker nodes are created using - the newer Kubernetes version.{' '} - - Learn more - - . + your cluster{getWorkerNodeCopy(cluster?.tier)} )} diff --git a/packages/manager/src/features/Linodes/AccessRow.tsx b/packages/manager/src/features/Linodes/AccessRow.tsx index d5f530fdf09..d1aaa9910b5 100644 --- a/packages/manager/src/features/Linodes/AccessRow.tsx +++ b/packages/manager/src/features/Linodes/AccessRow.tsx @@ -11,15 +11,19 @@ import { StyledTableCell, } from './LinodeEntityDetail.styles'; import { StyledTableRow } from './LinodeEntityDetail.styles'; +import { PublicIPAddressTooltip } from './PublicIPAddressTooltip'; interface AccessRowProps { + hasPublicInterface?: boolean; heading?: string; isDisabled: boolean; + isLinodeInterface?: boolean; text: string; } export const AccessRow = (props: AccessRowProps) => { - const { heading, text, isDisabled } = props; + const { heading, text, isDisabled, hasPublicInterface, isLinodeInterface } = + props; const { data: maskedPreferenceSetting } = usePreferences( (preferences) => preferences?.maskSensitiveData @@ -47,7 +51,14 @@ export const AccessRow = (props: AccessRowProps) => { /> - + {isDisabled ? ( + + ) : ( + + )} {maskedPreferenceSetting && ( setIsTextMasked(!isTextMasked)} diff --git a/packages/manager/src/features/Linodes/AccessTable.test.tsx b/packages/manager/src/features/Linodes/AccessTable.test.tsx index 9b33b8acc9d..38c0cee7dac 100644 --- a/packages/manager/src/features/Linodes/AccessTable.test.tsx +++ b/packages/manager/src/features/Linodes/AccessTable.test.tsx @@ -1,30 +1,32 @@ import { linodeFactory } from '@linode/utilities'; -import { fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; -import { PUBLIC_IP_ADDRESSES_CONFIG_INTERFACE_TOOLTIP_TEXT } from 'src/features/Linodes/constants'; import { renderWithTheme } from 'src/utilities/testHelpers'; import { AccessTable } from './AccessTable'; +import { PUBLIC_IP_ADDRESSES_CONFIG_INTERFACE_TOOLTIP_TEXT } from './constants'; const linode = linodeFactory.build(); describe('AccessTable', () => { - it('should display help icon tooltip if isVPCOnlyLinode is true', async () => { - const { findByRole, getAllByRole } = renderWithTheme( + it('should display help icon tooltip for each disabled row', async () => { + const { findByRole, findAllByTestId } = renderWithTheme( ); - const buttons = getAllByRole('button'); - const helpIconButton = buttons[0]; - - fireEvent.mouseEnter(helpIconButton); + // two tooltip buttons should appear + const tooltips = await findAllByTestId('tooltip-info-icon'); + expect(tooltips).toHaveLength(2); + await userEvent.click(tooltips[0]); const publicIPAddressesTooltip = await findByRole('tooltip'); expect(publicIPAddressesTooltip).toContainHTML( PUBLIC_IP_ADDRESSES_CONFIG_INTERFACE_TOOLTIP_TEXT @@ -36,14 +38,12 @@ describe('AccessTable', () => { <> @@ -57,12 +57,14 @@ describe('AccessTable', () => { }); }); - it('should disable copy buttons for Public IP Addresses if isVPCOnlyLinode is true', () => { + it('should disable copy buttons for Public IP Addresses if those rows are disabled', () => { const { container } = renderWithTheme( ); diff --git a/packages/manager/src/features/Linodes/AccessTable.tsx b/packages/manager/src/features/Linodes/AccessTable.tsx index 9c98c5165b7..287c7df5c6f 100644 --- a/packages/manager/src/features/Linodes/AccessTable.tsx +++ b/packages/manager/src/features/Linodes/AccessTable.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import type { JSX } from 'react'; import { TableBody } from 'src/components/TableBody'; -import { PublicIPAddressesTooltip } from 'src/features/Linodes/PublicIPAddressesTooltip'; import { AccessRow } from './AccessRow'; import { @@ -16,6 +15,7 @@ import type { SxProps, Theme } from '@mui/material/styles'; import type { MaskableTextLength } from 'src/components/MaskableText/MaskableText'; interface AccessTableRow { + disabled?: boolean; heading?: string; isMasked?: boolean; maskedTextLength?: MaskableTextLength; @@ -28,9 +28,8 @@ interface AccessTableProps { lg: number; xs: number; }; - hasPublicLinodeInterface?: boolean; + hasPublicInterface?: boolean; isLinodeInterface?: boolean; - isVPCOnlyLinode: boolean; rows: AccessTableRow[]; sx?: SxProps; title: string; @@ -40,16 +39,13 @@ export const AccessTable = React.memo((props: AccessTableProps) => { const { footer, gridSize, - hasPublicLinodeInterface, - isVPCOnlyLinode, + hasPublicInterface, isLinodeInterface = false, rows, sx, title, } = props; - const isDisabled = isVPCOnlyLinode && title.includes('Public IP Address'); - return ( { }} sx={sx} > - - {title}{' '} - {isDisabled && ( - - )} - + {title} {rows.map((thisRow) => { return thisRow.text ? ( diff --git a/packages/manager/src/features/Linodes/AclpPreferenceToggle.test.tsx b/packages/manager/src/features/Linodes/AclpPreferenceToggle.test.tsx index 36dd917d080..7579e715b01 100644 --- a/packages/manager/src/features/Linodes/AclpPreferenceToggle.test.tsx +++ b/packages/manager/src/features/Linodes/AclpPreferenceToggle.test.tsx @@ -33,9 +33,9 @@ const expectedAclpPreferences: Record< alerts: { preference: true, legacyModeBannerText: - 'Try the new Alerts (Beta) for more options, including customizable alerts. You can switch back to the current view at any time.', + 'Try the Alerts (Beta), featuring new options like customizable alerts. You can switch back to legacy Alerts at any time.', betaModeBannertext: - 'Welcome to Alerts (Beta) with more options and greater flexibility.', + 'Welcome to Alerts (Beta), designed for flexibility with features like customizable alerts.', legacyModeButtonText: 'Try Alerts (Beta)', betaModeButtonText: 'Switch to legacy Alerts', }, @@ -57,7 +57,7 @@ vi.mock('@linode/queries', async () => { describe('AclpPreferenceToggle', () => { /** - * ACLP Preference Toggle for Metrics + * ACLP Preference Toggle tests for Metrics */ it('should display loading state for Metrics preference correctly', () => { queryMocks.usePreferences.mockReturnValue({ @@ -165,30 +165,16 @@ describe('AclpPreferenceToggle', () => { }); /** - * ACLP Preference Toggle for Alerts + * ACLP Preference Toggle tests for Alerts */ - it('should display loading state for Alerts preference correctly', () => { - queryMocks.usePreferences.mockReturnValue({ - data: undefined, - isLoading: true, - }); - queryMocks.useMutatePreferences.mockReturnValue({ - mutateAsync: vi.fn().mockResolvedValue(undefined), - }); - - renderWithTheme(); - - const skeleton = screen.getByTestId('alerts-preference-skeleton'); - expect(skeleton).toBeInTheDocument(); - }); - - it('should display the correct legacy mode banner and button text for Alerts when isAclpAlertsBeta preference is disabled', () => { - queryMocks.usePreferences.mockReturnValue({ - data: false, - isLoading: false, - }); - - renderWithTheme(); + it('should display the correct legacy mode banner and button text for Alerts when isAlertsBetaMode is false', () => { + renderWithTheme( + + ); // Check if the banner content and button text is correct in legacy mode const typography = screen.getByTestId('alerts-preference-banner-text'); @@ -196,19 +182,20 @@ describe('AclpPreferenceToggle', () => { expectedAclpPreferences.alerts.legacyModeBannerText ); - const expectedLegacyModeButtonText = screen.getByText( + const button = screen.getByText( expectedAclpPreferences.alerts.legacyModeButtonText ); - expect(expectedLegacyModeButtonText).toBeInTheDocument(); + expect(button).toBeInTheDocument(); }); - it('should display the correct beta mode banner and button text for Alerts when isAclpAlertsBeta preference is enabled', () => { - queryMocks.usePreferences.mockReturnValue({ - data: expectedAclpPreferences.alerts.preference, - isLoading: false, - }); - - renderWithTheme(); + it('should display the correct beta mode banner and button text for Alerts when isAlertsBetaMode is true', () => { + renderWithTheme( + + ); // Check if the banner content and button text is correct in beta mode const typography = screen.getByTestId('alerts-preference-banner-text'); @@ -216,25 +203,22 @@ describe('AclpPreferenceToggle', () => { expectedAclpPreferences.alerts.betaModeBannertext ); - const expectedLegacyModeButtonText = screen.getByText( + const button = screen.getByText( expectedAclpPreferences.alerts.betaModeButtonText ); - expect(expectedLegacyModeButtonText).toBeInTheDocument(); + expect(button).toBeInTheDocument(); }); - it('should update ACLP Alerts preference to beta mode when toggling from legacy mode', async () => { - queryMocks.usePreferences.mockReturnValue({ - data: false, - isLoading: false, - }); - const mockUpdatePreferences = vi.fn().mockResolvedValue({ - isAclpMetricsBeta: false, - }); - queryMocks.useMutatePreferences.mockReturnValue({ - mutateAsync: mockUpdatePreferences, - }); + it('should call onAlertsModeChange with true when switching from legacy to beta mode', async () => { + const mockSetIsAclpBetaLocal = vi.fn(); - renderWithTheme(); + renderWithTheme( + + ); // Click the button to switch from legacy to beta const button = screen.getByText( @@ -242,24 +226,19 @@ describe('AclpPreferenceToggle', () => { ); await userEvent.click(button); - expect(mockUpdatePreferences).toHaveBeenCalledWith({ - isAclpAlertsBeta: true, - }); + expect(mockSetIsAclpBetaLocal).toHaveBeenCalledWith(true); }); - it('should update ACLP Alerts preference to legacy mode when toggling from beta mode', async () => { - queryMocks.usePreferences.mockReturnValue({ - data: expectedAclpPreferences.alerts.preference, - isLoading: false, - }); - const mockUpdatePreferences = vi.fn().mockResolvedValue({ - isAclpMetricsBeta: true, - }); - queryMocks.useMutatePreferences.mockReturnValue({ - mutateAsync: mockUpdatePreferences, - }); + it('should call onAlertsModeChange with false when switching from beta to legacy mode', async () => { + const mockSetIsAclpBetaLocal = vi.fn(); - renderWithTheme(); + renderWithTheme( + + ); // Click the button to switch from beta to legacy const button = screen.getByText( @@ -267,8 +246,6 @@ describe('AclpPreferenceToggle', () => { ); await userEvent.click(button); - expect(mockUpdatePreferences).toHaveBeenCalledWith({ - isAclpAlertsBeta: false, - }); + expect(mockSetIsAclpBetaLocal).toHaveBeenCalledWith(false); }); }); diff --git a/packages/manager/src/features/Linodes/AclpPreferenceToggle.tsx b/packages/manager/src/features/Linodes/AclpPreferenceToggle.tsx index ab27394165f..e23bc557376 100644 --- a/packages/manager/src/features/Linodes/AclpPreferenceToggle.tsx +++ b/packages/manager/src/features/Linodes/AclpPreferenceToggle.tsx @@ -5,9 +5,18 @@ import React, { type JSX } from 'react'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Skeleton } from 'src/components/Skeleton'; -import type { ManagerPreferences } from '@linode/utilities'; - export interface AclpPreferenceToggleType { + /** + * Alerts toggle state. Use only when type is `alerts` + */ + isAlertsBetaMode?: boolean; + /** + * Handler for alerts toggle. Use only when type is `alerts` + */ + onAlertsModeChange?: (isBeta: boolean) => void; + /** + * Toggle type: `alerts` or `metrics` + */ type: 'alerts' | 'metrics'; } @@ -15,10 +24,6 @@ interface PreferenceConfigItem { getBannerText: (isBeta: boolean | undefined) => JSX.Element; getButtonText: (isBeta: boolean | undefined) => string; preferenceKey: string; - updateKey: keyof ManagerPreferences; - usePreferenceSelector: ( - preferences: ManagerPreferences | undefined - ) => boolean | undefined; } const preferenceConfig: Record< @@ -26,8 +31,6 @@ const preferenceConfig: Record< PreferenceConfigItem > = { metrics: { - usePreferenceSelector: (preferences) => preferences?.isAclpMetricsBeta, - updateKey: 'isAclpMetricsBeta', preferenceKey: 'metrics-preference', getButtonText: (isBeta) => isBeta ? 'Switch to legacy Metrics' : 'Try the Metrics (Beta)', @@ -46,40 +49,41 @@ const preferenceConfig: Record< ), }, alerts: { - usePreferenceSelector: (preferences) => preferences?.isAclpAlertsBeta, - updateKey: 'isAclpAlertsBeta', preferenceKey: 'alerts-preference', getButtonText: (isBeta) => isBeta ? 'Switch to legacy Alerts' : 'Try Alerts (Beta)', getBannerText: (isBeta) => isBeta ? ( - Welcome to Alerts (Beta) with more options and - greater flexibility. + Welcome to Alerts (Beta), designed for flexibility + with features like customizable alerts. ) : ( - Try the new Alerts (Beta) for more options, including - customizable alerts. You can switch back to the current view at any - time. + Try the Alerts (Beta), featuring new options like + customizable alerts. You can switch back to legacy Alerts at any time. ), }, }; -export const AclpPreferenceToggle = ({ type }: AclpPreferenceToggleType) => { +export const AclpPreferenceToggle = (props: AclpPreferenceToggleType) => { + const { isAlertsBetaMode, onAlertsModeChange, type } = props; + const config = preferenceConfig[type]; - const { data: isBeta, isLoading } = usePreferences( - config.usePreferenceSelector - ); + // -------------------- Metrics related logic ------------------------ + const { data: isAclpMetricsBeta, isLoading: isAclpMetricsBetaLoading } = + usePreferences((preferences) => { + return preferences?.isAclpMetricsBeta; + }, type === 'metrics'); const { mutateAsync: updatePreferences } = useMutatePreferences(); - if (isLoading) { + if (isAclpMetricsBetaLoading) { return ( ({ marginTop: `-${theme.tokens.spacing.S20}`, @@ -87,17 +91,23 @@ export const AclpPreferenceToggle = ({ type }: AclpPreferenceToggleType) => { /> ); } + // ------------------------------------------------------------------- + + const isBeta = type === 'alerts' ? isAlertsBetaMode : isAclpMetricsBeta; + const handleBetaToggle = () => { + if (type === 'alerts' && onAlertsModeChange) { + onAlertsModeChange(!isBeta); + } else { + updatePreferences({ isAclpMetricsBeta: !isBeta }); + } + }; return ( - updatePreferences({ - [config.updateKey]: !isBeta, - }) - } + onClick={handleBetaToggle} sx={{ textTransform: 'none' }} > {config.getButtonText(isBeta)} diff --git a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx index 6adff24de39..203d8ef5c46 100644 --- a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx +++ b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx @@ -9,21 +9,16 @@ import { Box, Notice, Paper, Typography } from '@linode/ui'; import { getQueryParamsFromQueryString } from '@linode/utilities'; import Grid from '@mui/material/Grid'; import { useTheme } from '@mui/material/styles'; +import { useNavigate, useParams } from '@tanstack/react-router'; import { castDraft } from 'immer'; import * as React from 'react'; -import { - matchPath, - useHistory, - useLocation, - useParams, - useRouteMatch, -} from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; 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 { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList'; +import { useTabs } from 'src/hooks/useTabs'; import { useEventsPollingActions } from 'src/queries/events/events'; import { getErrorMap } from 'src/utilities/errorUtils'; @@ -51,11 +46,9 @@ const LinodesDetailHeader = React.lazy(() => ); export const CloneLanding = () => { - const { linodeId: _linodeId } = useParams<{ linodeId: string }>(); - const history = useHistory(); - const match = useRouteMatch(); - const location = useLocation(); + const { linodeId: _linodeId } = useParams({ from: '/linodes/$linodeId' }); const theme = useTheme(); + const navigate = useNavigate(); const { checkForNewEvents } = useEventsPollingActions(); @@ -69,29 +62,17 @@ export const CloneLanding = () => { const configs = _configs ?? []; const disks = _disks ?? []; - /** - * ROUTING - */ - const tabs = [ + const { tabs, handleTabChange, tabIndex } = useTabs([ // These must correspond to the routes inside the Switch { - routeName: `${match.url}/configs`, + to: '/linodes/$linodeId/clone/configs', title: 'Configuration Profiles', }, { - routeName: `${match.url}/disks`, + to: '/linodes/$linodeId/clone/disks', title: 'Disks', }, - ]; - - // Helper function for the component - const matches = (p: string) => { - return Boolean(matchPath(p, { path: location.pathname })); - }; - - const navToURL = (index: number) => { - history.push(tabs[index].routeName); - }; + ]); /** * STATE MANAGEMENT @@ -244,7 +225,10 @@ export const CloneLanding = () => { .then(() => { setSubmitting(false); checkForNewEvents(); - history.push(`/linodes/${linodeId}/configurations`); + navigate({ + to: '/linodes/$linodeId/configurations', + params: { linodeId }, + }); }) .catch((errors) => { setSubmitting(false); @@ -253,7 +237,10 @@ export const CloneLanding = () => { }; const handleCancel = () => { - history.push(`/linodes/${linodeId}/configurations`); + navigate({ + to: '/linodes/$linodeId/configurations', + params: { linodeId }, + }); }; // Cast the results of the Immer state to a mutable data structure. @@ -294,14 +281,8 @@ export const CloneLanding = () => { Clone - matches(tab.routeName)), - 0 - )} - onChange={navToURL} - > - + + diff --git a/packages/manager/src/features/Linodes/CloneLanding/cloneLandingLazyRoute.ts b/packages/manager/src/features/Linodes/CloneLanding/cloneLandingLazyRoute.ts new file mode 100644 index 00000000000..5fe6c471b6d --- /dev/null +++ b/packages/manager/src/features/Linodes/CloneLanding/cloneLandingLazyRoute.ts @@ -0,0 +1,9 @@ +import { createLazyRoute } from '@tanstack/react-router'; + +import { CloneLanding } from './CloneLanding'; + +export const cloneLandingLazyRoute = createLazyRoute( + '/linodes/$linodeId/clone' +)({ + component: CloneLanding, +}); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx index f7ff507d752..5d1604a4110 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx @@ -4,7 +4,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { Actions } from './Actions'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Actions', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a create button', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , @@ -16,7 +38,8 @@ describe('Actions', () => { expect(button).toHaveAttribute('type', 'submit'); expect(button).toBeEnabled(); }); - it("should render a ' View Code Snippets' button", () => { + + it("should render a 'View Code Snippets' button", () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , }); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx index 0cf52fc2673..44b23d4d9d9 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx @@ -3,6 +3,7 @@ import { scrollErrorIntoView } from '@linode/utilities'; import React, { useState } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; +import { useFlags } from 'src/hooks/useFlags'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics'; import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics'; @@ -17,11 +18,16 @@ import { import type { LinodeCreateFormValues } from './utilities'; -export const Actions = () => { +interface ActionProps { + isAlertsBetaMode?: boolean; +} + +export const Actions = ({ isAlertsBetaMode }: ActionProps) => { const { params } = useLinodeCreateQueryParams(); const [isAPIAwarenessModalOpen, setIsAPIAwarenessModalOpen] = useState(false); const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled(); + const { aclpBetaServices } = useFlags(); const { formState, getValues, trigger, control } = useFormContext(); @@ -76,6 +82,8 @@ export const Actions = () => { onClose={() => setIsAPIAwarenessModalOpen(false)} payLoad={getLinodeCreatePayload(structuredClone(getValues()), { isShowingNewNetworkingUI: isLinodeInterfacesEnabled, + isAclpIntegration: aclpBetaServices?.linode?.alerts, + isAclpAlertsPreferenceBeta: isAlertsBetaMode, })} /> diff --git a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/AdditionalOptions.tsx b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/AdditionalOptions.tsx index 7eb5caacfbe..9dd7b1ca9b4 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/AdditionalOptions.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/AdditionalOptions.tsx @@ -5,14 +5,22 @@ import React from 'react'; import { useWatch } from 'react-hook-form'; import { useVMHostMaintenanceEnabled } from 'src/features/Account/utils'; -import { MaintenancePolicy } from 'src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy'; import { useFlags } from 'src/hooks/useFlags'; -import { Alerts } from './Alerts/Alerts'; +import { Alerts } from './Alerts'; +import { MaintenancePolicy } from './MaintenancePolicy'; import type { CreateLinodeRequest } from '@linode/api-v4'; -export const AdditionalOptions = () => { +interface AdditionalOptionProps { + isAlertsBetaMode: boolean; + onAlertsModeChange: (isBeta: boolean) => void; +} + +export const AdditionalOptions = ({ + onAlertsModeChange, + isAlertsBetaMode, +}: AdditionalOptionProps) => { const { aclpBetaServices } = useFlags(); const { data: regions } = useRegionsQuery(); const { isVMHostMaintenanceEnabled } = useVMHostMaintenanceEnabled(); @@ -46,7 +54,12 @@ export const AdditionalOptions = () => { Additional Options }> - {showAlerts && } + {showAlerts && ( + + )} {isVMHostMaintenanceEnabled && } diff --git a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts.tsx b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts.tsx new file mode 100644 index 00000000000..42ead914d5f --- /dev/null +++ b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts.tsx @@ -0,0 +1,82 @@ +import { Accordion, BetaChip } from '@linode/ui'; +import * as React from 'react'; +import { useController, useFormContext } from 'react-hook-form'; + +import { Link } from 'src/components/Link'; +import { AlertReusableComponent } from 'src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent'; +import { AlertsPanel } from 'src/features/Linodes/LinodesDetail/LinodeAlerts/AlertsPanel'; +import { useFlags } from 'src/hooks/useFlags'; + +import { AclpPreferenceToggle } from '../../AclpPreferenceToggle'; + +import type { LinodeCreateFormValues } from '../utilities'; +import type { CloudPulseAlertsPayload } from '@linode/api-v4'; + +interface AlertsProps { + isAlertsBetaMode: boolean; + onAlertsModeChange: (isBeta: boolean) => void; +} + +export const Alerts = ({ + onAlertsModeChange, + isAlertsBetaMode, +}: AlertsProps) => { + const { aclpBetaServices } = useFlags(); + + const { control } = useFormContext(); + const { field } = useController({ + control, + name: 'alerts', + defaultValue: { system: [], user: [] }, + }); + + const handleToggleAlert = (updatedAlerts: CloudPulseAlertsPayload) => { + field.onChange(updatedAlerts); + }; + + const subHeading = isAlertsBetaMode ? ( + <> + Receive notifications through System Alerts when metric thresholds are + exceeded. After you've created your Linode, you can create and manage + associated alerts on the centralized Alerts page.{' '} + + Learn more + + . + + ) : ( + 'Configure the alert notifications to be sent when metric thresholds are exceeded.' + ); + + return ( + + ) : null + } + subHeading={subHeading} + summaryProps={{ sx: { p: 0 } }} + > + {aclpBetaServices?.linode?.alerts && ( + + )} + {aclpBetaServices?.linode?.alerts && isAlertsBetaMode ? ( + // Beta ACLP Alerts View + + ) : ( + // Legacy Alerts View (read-only) + + )} + + ); +}; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts/Alerts.tsx b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts/Alerts.tsx deleted file mode 100644 index c8d2baf4e8c..00000000000 --- a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts/Alerts.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { usePreferences } from '@linode/queries'; -import { Accordion, BetaChip } from '@linode/ui'; -import * as React from 'react'; -import { useController, useFormContext } from 'react-hook-form'; - -import { AlertReusableComponent } from 'src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent'; -import { AclpPreferenceToggle } from 'src/features/Linodes/AclpPreferenceToggle'; -import { LinodeSettingsAlertsPanel } from 'src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel'; -import { useFlags } from 'src/hooks/useFlags'; - -import type { LinodeCreateFormValues } from '../../utilities'; -import type { CloudPulseAlertsPayload } from '@linode/api-v4'; - -export const Alerts = () => { - const { aclpBetaServices } = useFlags(); - const { data: isAclpAlertsPreferenceBeta } = usePreferences( - (preferences) => preferences?.isAclpAlertsBeta - ); - - const { control } = useFormContext(); - const { field } = useController({ - control, - name: 'alerts', - defaultValue: { system: [], user: [] }, - }); - - const handleToggleAlert = (updatedAlerts: CloudPulseAlertsPayload) => { - field.onChange(updatedAlerts); - }; - - return ( - - ) : undefined - } - subHeading="Receive notifications through system alerts when metric thresholds are exceeded." - summaryProps={{ sx: { p: 0 } }} - > - {aclpBetaServices?.linode?.alerts && ( - - )} - {aclpBetaServices?.linode?.alerts && isAclpAlertsPreferenceBeta ? ( - - ) : ( - - )} - - ); -}; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx index 06ae1f213a6..b89c2d037ef 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx @@ -1,5 +1,5 @@ import { useRegionQuery, useTypeQuery } from '@linode/queries'; -import { Accordion, BetaChip, Notice } from '@linode/ui'; +import { Accordion, Notice } from '@linode/ui'; import React from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; @@ -12,13 +12,14 @@ import { MAINTENANCE_POLICY_TITLE, } from 'src/components/MaintenancePolicySelect/constants'; import { MaintenancePolicySelect } from 'src/components/MaintenancePolicySelect/MaintenancePolicySelect'; -import { useVMHostMaintenanceEnabled } from 'src/features/Account/utils'; +import { getFeatureChip } from 'src/features/Account/MaintenancePolicy'; +import { useFlags } from 'src/hooks/useFlags'; import type { LinodeCreateFormValues } from '../utilities'; export const MaintenancePolicy = () => { const { control } = useFormContext(); - const { isVMHostMaintenanceInBeta } = useVMHostMaintenanceEnabled(); + const flags = useFlags(); const [selectedRegion, selectedType] = useWatch({ control, @@ -37,7 +38,7 @@ export const MaintenancePolicy = () => { : undefined} + headingChip={getFeatureChip(flags.vmHostMaintenance || {})} subHeading={ <> {MAINTENANCE_POLICY_DESCRIPTION}{' '} @@ -69,7 +70,7 @@ export const MaintenancePolicy = () => { ? MAINTENANCE_POLICY_NOT_AVAILABLE_IN_REGION_TEXT : undefined, }} - value={field.value} + value={field.value ?? undefined} /> )} /> diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.test.tsx index a2cbc40c44d..19c4e810a2c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.test.tsx @@ -15,7 +15,29 @@ import { Backups } from './Backups'; import type { LinodeCreateFormValues } from '../utilities'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Linode Create Backups Addon', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a label and checkbox', () => { const { getByLabelText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.test.tsx index ad88f63e3cc..b700badd108 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.test.tsx @@ -15,6 +15,22 @@ const defaultProps: ApiAwarenessModalProps = { payLoad: { region: '', type: '' }, }; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + const renderComponent = (overrideProps?: Partial) => { const props = { ...defaultProps, @@ -27,6 +43,12 @@ const renderComponent = (overrideProps?: Partial) => { }; describe('ApiAwarenessModal', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('Should not render ApiAwarenessModal component', () => { renderComponent(); expect(screen.queryByText('Create Linode')).not.toBeInTheDocument(); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.tsx b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.tsx index ff51f00488b..88c2dcf1218 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.tsx @@ -1,7 +1,7 @@ import { ActionsPanel, Dialog, Typography } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import { useNavigate } from '@tanstack/react-router'; import React, { useEffect } from 'react'; -import { useHistory } from 'react-router-dom'; import { Link } from 'src/components/Link'; import { Tab } from 'src/components/Tabs/Tab'; @@ -50,7 +50,7 @@ export const tabs = [ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => { const { isOpen, onClose, payLoad } = props; - const history = useHistory(); + const navigate = useNavigate(); const { data: events } = useInProgressEvents(); const linodeCreationEvent = events?.find( @@ -69,11 +69,20 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => { }; useEffect(() => { - if (isLinodeCreated && isOpen) { + if (isLinodeCreated && isOpen && linodeCreationEvent.entity?.id) { onClose(); - history.replace(`/linodes/${linodeCreationEvent.entity?.id}`); + navigate({ + to: '/linodes/$linodeId', + params: { linodeId: linodeCreationEvent.entity?.id }, + }); } - }, [isLinodeCreated]); + }, [ + isLinodeCreated, + isOpen, + linodeCreationEvent?.entity?.id, + navigate, + onClose, + ]); return ( ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Linode Create Details', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders a header', () => { const { getByText } = renderWithThemeAndHookFormContext({ component:
, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx index ec2083113c6..ad471541ccb 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx @@ -9,7 +9,29 @@ import { PlacementGroupPanel } from './PlacementGroupPanel'; import type { CreateLinodeRequest } from '@linode/api-v4'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('PlacementGroupPanel', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('Should render a notice if no region is selected', () => { const { getByText } = renderWithThemeAndHookFormContext({ diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Firewall.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Firewall.test.tsx index 64026a6f02c..2854cdf9766 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Firewall.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Firewall.test.tsx @@ -10,7 +10,35 @@ import { Firewall } from './Firewall'; import type { CreateLinodeRequest } from '@linode/api-v4'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: vi.fn(() => ({ + permissions: { create_firewall: true }, + })), +})); + describe('Linode Create Firewall', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a header', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx index 58aced7e3c8..9ea728a96bb 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx @@ -123,7 +123,7 @@ export const InterfaceType = ({ index }: Props) => { )} renderVariant={() => ( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/LinodeInterface.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/LinodeInterface.test.tsx index fc212daeec1..b4ebe104224 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/LinodeInterface.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/LinodeInterface.test.tsx @@ -10,6 +10,12 @@ import { LinodeInterface } from './LinodeInterface'; import type { LinodeCreateFormValues } from '../utilities'; +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: vi.fn(() => ({ + permissions: { delete_firewall: true, update_firewall: true }, + })), +})); + describe('LinodeInterface (Linode Interfaces)', () => { it('renders radios for the interface types (Public, VPC, VLAN)', () => { const { getByText } = renderWithThemeAndHookFormContext({ diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx index 5d0e1ed5e03..20d4485f0a3 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx @@ -150,7 +150,7 @@ export const VPC = ({ index }: Props) => { VPC diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx index b447a97f5fa..4f36fb0d250 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPCRanges.tsx @@ -82,7 +82,7 @@ export const VPCRanges = ({ disabled, interfaceIndex }: Props) => { Add IPv4 Range } /> diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Region.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Region.test.tsx index e849004e861..9b6a7a0689c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Region.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Region.test.tsx @@ -18,7 +18,36 @@ import { Region } from './Region'; import type { LinodeCreateFormValues } from './utilities'; +const queryMocks = vi.hoisted(() => ({ + useLocation: vi.fn(), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useLocation: queryMocks.useLocation, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Region', () => { + beforeEach(() => { + queryMocks.useLocation.mockReturnValue({ + pathname: '/linodes/create', + }); + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({ + type: 'Clone Linode', + }); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a heading', () => { const { getAllByText } = renderWithThemeAndHookFormContext({ component: , @@ -100,6 +129,10 @@ describe('Region', () => { const linode = linodeFactory.build({ region: regionA.id, type: type.id }); + queryMocks.useParams.mockReturnValue({ + linodeId: linode.id, + }); + server.use( http.get('*/v4/linode/types/:id', () => { return HttpResponse.json(type); @@ -112,11 +145,6 @@ describe('Region', () => { const { findByText, getByPlaceholderText } = renderWithThemeAndHookFormContext({ component: , - options: { - MemoryRouter: { - initialEntries: ['/linodes/create?type=Clone+Linode'], - }, - }, useFormOptions: { defaultValues: { linode, @@ -150,11 +178,6 @@ describe('Region', () => { const { findByText, getByPlaceholderText, getByText } = renderWithThemeAndHookFormContext({ component: , - options: { - MemoryRouter: { - initialEntries: ['/linodes/create?type=Clone+Linode'], - }, - }, useFormOptions: { defaultValues: { linode, @@ -177,7 +200,8 @@ describe('Region', () => { ).toBeVisible(); }); - it('should disable distributed regions if the selected image does not have the `distributed-sites` capability', async () => { + //TODO: this is an expected failure until we fix the filtering + it.skip('should disable distributed regions if the selected image does not have the `distributed-sites` capability', async () => { const image = imageFactory.build({ capabilities: [] }); const distributedRegion = regionFactory.build({ @@ -203,9 +227,6 @@ describe('Region', () => { const { findByText, getByLabelText } = renderWithThemeAndHookFormContext({ component: , - options: { - MemoryRouter: { initialEntries: ['/linodes/create?type=Images'] }, - }, useFormOptions: { defaultValues: { image: image.id, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx index 129b24c8e87..46f47f6ef9e 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx @@ -10,7 +10,11 @@ import React from 'react'; import { accountFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; +import { + renderWithThemeAndHookFormContext, + renderWithThemeAndRouter, + wrapWithFormContext, +} from 'src/utilities/testHelpers'; import { Security } from './Security'; @@ -30,9 +34,10 @@ describe('Security', () => { }); it('should render a SSH Keys heading', async () => { - const { getAllByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , }); + const { getAllByText } = await renderWithThemeAndRouter(component); const heading = getAllByText('SSH Keys')[0]; @@ -41,9 +46,10 @@ describe('Security', () => { }); it('should render an "Add An SSH Key" button', async () => { - const { getByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , }); + const { getByText } = await renderWithThemeAndRouter(component); const addSSHKeyButton = getByText('Add an SSH Key'); @@ -118,9 +124,11 @@ describe('Security', () => { }) ); - const { findByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , - options: { flags: { linodeDiskEncryption: true } }, + }); + const { findByText } = await renderWithThemeAndRouter(component, { + flags: { linodeDiskEncryption: true }, }); const heading = await findByText('Disk Encryption'); @@ -146,12 +154,13 @@ describe('Security', () => { }) ); - const { findByLabelText } = - renderWithThemeAndHookFormContext({ - component: , - options: { flags: { linodeDiskEncryption: true } }, - useFormOptions: { defaultValues: { region: region.id } }, - }); + const component = wrapWithFormContext({ + component: , + useFormOptions: { defaultValues: { region: region.id } }, + }); + const { findByLabelText } = await renderWithThemeAndRouter(component, { + flags: { linodeDiskEncryption: true }, + }); await findByLabelText( 'Disk encryption is not available in the selected region. Select another region to use Disk Encryption.' @@ -175,12 +184,14 @@ describe('Security', () => { }) ); - const { findByLabelText, getByLabelText } = - renderWithThemeAndHookFormContext({ - component: , - options: { flags: { linodeDiskEncryption: true } }, - useFormOptions: { defaultValues: { region: region.id } }, - }); + const component = wrapWithFormContext({ + component: , + useFormOptions: { defaultValues: { region: region.id } }, + }); + const { findByLabelText, getByLabelText } = await renderWithThemeAndRouter( + component, + { flags: { linodeDiskEncryption: true } } + ); await findByLabelText( 'Distributed Compute Instances are encrypted. This setting can not be changed.' diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.test.tsx index d3985a5528b..f25f427f874 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.test.tsx @@ -221,7 +221,7 @@ describe('Linode Create Summary', () => { }, }); - expect(getByText('VLAN Attached')).toBeVisible(); + expect(getByText('VLAN')).toBeVisible(); }); it('should render "Encrypted" if disk encryption is enabled', async () => { @@ -292,7 +292,7 @@ describe('Linode Create Summary', () => { options: { flags: { linodeInterfaces: { enabled: false } } }, }); - expect(getByText('VPC Assigned')).toBeVisible(); + expect(getByText('VPC')).toBeVisible(); }); it('should render "VLAN Attached" if a VLAN is selected', () => { @@ -306,7 +306,7 @@ describe('Linode Create Summary', () => { options: { flags: { linodeInterfaces: { enabled: false } } }, }); - expect(getByText('VLAN Attached')).toBeVisible(); + expect(getByText('VLAN')).toBeVisible(); }); it('should render "Firewall Assigned" if a Firewall is selected', () => { @@ -349,7 +349,7 @@ describe('Linode Create Summary', () => { options: { flags: { linodeInterfaces: { enabled: true } } }, }); - const text = await findByText('VPC Assigned'); + const text = await findByText('VPC'); expect(text).toBeVisible(); }); @@ -367,7 +367,23 @@ describe('Linode Create Summary', () => { options: { flags: { linodeInterfaces: { enabled: true } } }, }); - const text = await findByText('VLAN Attached'); + const text = await findByText('VLAN'); + expect(text).toBeVisible(); + }); + + it('should render "Public Internet" if public interface selected', async () => { + const { findByText } = + renderWithThemeAndHookFormContext({ + component: , + useFormOptions: { + defaultValues: { + linodeInterfaces: [{ purpose: 'public' }], + }, + }, + options: { flags: { linodeInterfaces: { enabled: true } } }, + }); + + const text = await findByText('Public Internet'); expect(text).toBeVisible(); }); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx index 91703bbcb8f..2d67c53c399 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx @@ -1,9 +1,4 @@ -import { - useImageQuery, - usePreferences, - useRegionsQuery, - useTypeQuery, -} from '@linode/queries'; +import { useImageQuery, useRegionsQuery, useTypeQuery } from '@linode/queries'; import { Divider, Paper, Stack, Typography } from '@linode/ui'; import { formatStorageUnits, isAclpSupportedRegion } from '@linode/utilities'; import { useTheme } from '@mui/material'; @@ -21,7 +16,11 @@ import { getLinodePrice } from './utilities'; import type { LinodeCreateFormValues } from '../utilities'; -export const Summary = () => { +interface SummaryProps { + isAlertsBetaMode?: boolean; +} + +export const Summary = ({ isAlertsBetaMode }: SummaryProps) => { const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled(); @@ -70,9 +69,6 @@ export const Summary = () => { const { data: image } = useImageQuery(imageId ?? '', Boolean(imageId)); const { aclpBetaServices } = useFlags(); - const { data: isAclpAlertsPreferenceBeta } = usePreferences( - (preferences) => preferences?.isAclpAlertsBeta - ); const isAclpAlertsSupportedRegionLinode = isAclpSupportedRegion({ capability: 'Linodes', @@ -105,7 +101,7 @@ export const Summary = () => { const hasBetaAclpAlertsAssigned = aclpBetaServices?.linode?.alerts && isAclpAlertsSupportedRegionLinode && - isAclpAlertsPreferenceBeta; + isAlertsBetaMode; const totalBetaAclpAlertsAssignedCount = (alerts?.system?.length ?? 0) + (alerts?.user?.length ?? 0); @@ -155,7 +151,7 @@ export const Summary = () => { }, { item: { - title: 'VLAN Attached', + title: 'VLAN', }, show: hasVLAN, }, @@ -173,10 +169,18 @@ export const Summary = () => { }, { item: { - title: 'VPC Assigned', + title: 'VPC', }, show: hasVPC, }, + { + item: { + title: 'Public Internet', + }, + show: + isLinodeInterfacesEnabled && + linodeInterfaces?.some((i) => i.purpose === 'public'), + }, { item: { title: 'Firewall Assigned', diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.test.tsx index 1480544e93b..f73cf90a030 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.test.tsx @@ -4,7 +4,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { Backups } from './Backups'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Backups', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders a Linode Select section', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.test.tsx index 66963826d3b..743e99bf770 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.test.tsx @@ -4,7 +4,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { LinodeSelect } from './LinodeSelect'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('LinodeSelect', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a heading', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.test.tsx index f0b62192d4c..20bf368a8fa 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.test.tsx @@ -4,7 +4,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { Clone } from './Clone'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Clone', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a heading', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.test.tsx index c33c1bd0702..bc14225afa0 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.test.tsx @@ -4,7 +4,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { Images } from './Images'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Images', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders a header', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.tsx index 70765ef8c5d..b0565b1190b 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import Info from 'src/assets/icons/info.svg'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; -import { APP_ROOT } from 'src/constants'; import { getMarketplaceAppLabel } from './utilities'; @@ -15,7 +14,7 @@ interface Props { checked: boolean; /** * The path to the app icon - * @example "assets/postgresqlmarketplaceocc.svg" + * @example "/assets/postgresqlmarketplaceocc.svg" */ iconUrl: string; /** @@ -54,7 +53,7 @@ export const AppSelectionCard = (props: Props) => { const renderIcon = iconUrl === '' ? () => - : () => {`${label}; + : () => {`${label}; const renderVariant = () => ( ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('OperatingSystems', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders a header', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptImages.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptImages.test.tsx index 3b7741fd2f6..7fdf4d5b723 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptImages.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptImages.test.tsx @@ -8,7 +8,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { StackScriptImages } from './StackScriptImages'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Images', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a heading', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.test.tsx index 49f8b0a23cd..c6dbcdbd810 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.test.tsx @@ -4,17 +4,40 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { StackScriptSelection } from './StackScriptSelection'; +const queryMocks = vi.hoisted(() => ({ + useLocation: vi.fn(), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useLocation: queryMocks.useLocation, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('StackScriptSelection', () => { + beforeEach(() => { + queryMocks.useLocation.mockReturnValue({ + pathname: '/linodes/create', + }); + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({ + type: 'StackScripts', + subtype: 'Community', + }); + queryMocks.useParams.mockReturnValue({}); + }); + it('should select tab based on query params', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , - options: { - MemoryRouter: { - initialEntries: [ - '/linodes/create?type=StackScripts&subtype=Community', - ], - }, - }, }); const communityTabButton = getByText('Community StackScripts'); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx index a692054ddd0..e34a1cfd045 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx @@ -20,7 +20,10 @@ export const StackScriptSelection = () => { const onTabChange = (index: number) => { // Update the "subtype" query param. (This switches between "Community" and "Account" tabs). - updateParams({ stackScriptID: undefined, subtype: tabs[index] }); + updateParams({ + stackScriptID: undefined, + subtype: tabs[index], + }); // Reset the selected image, the selected StackScript, and the StackScript data when changing tabs. reset((prev) => ({ ...prev, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.test.tsx index ff1a7d1780e..960f39d9752 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.test.tsx @@ -7,7 +7,34 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { StackScriptSelectionList } from './StackScriptSelectionList'; +const queryMocks = vi.hoisted(() => ({ + useLocation: vi.fn(), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useLocation: queryMocks.useLocation, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('StackScriptSelectionList', () => { + beforeEach(() => { + queryMocks.useLocation.mockReturnValue({ + pathname: '/linodes/create', + }); + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders StackScripts returned by the API', async () => { const stackscripts = stackScriptFactory.buildList(5); @@ -29,6 +56,9 @@ describe('StackScriptSelectionList', () => { }); it('renders and selected a StackScript from query params if one is specified', async () => { + queryMocks.useSearch.mockReturnValue({ + stackScriptID: '921609', + }); const stackscript = stackScriptFactory.build(); server.use( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx index e6a15e4f5af..1cb4c92700c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx @@ -15,6 +15,7 @@ import { TooltipIcon, } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; +import { useLocation } from '@tanstack/react-router'; import React, { useState } from 'react'; import { useController, useFormContext } from 'react-hook-form'; import { Waypoint } from 'react-waypoint'; @@ -30,7 +31,7 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError'; import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; import { TableSortCell } from 'src/components/TableSortCell'; import { StackScriptSearchHelperText } from 'src/features/StackScripts/Partials/StackScriptSearchHelperText'; -import { useOrder } from 'src/hooks/useOrder'; +import { useOrderV2 } from 'src/hooks/useOrderV2'; import { getGeneratedLinodeLabel, @@ -53,12 +54,21 @@ interface Props { export const StackScriptSelectionList = ({ type }: Props) => { const [query, setQuery] = useState(); + const location = useLocation(); const queryClient = useQueryClient(); - const { handleOrderChange, order, orderBy } = useOrder({ - order: 'desc', - orderBy: 'deployments_total', + const { handleOrderChange, order, orderBy } = useOrderV2({ + initialRoute: { + defaultOrder: { + order: 'desc', + orderBy: 'deployments_total', + }, + from: location.pathname.includes('/linodes/create') + ? '/linodes/create' + : '/linodes/$linodeId', + }, + preferenceKey: 'linode-clone-stackscripts', }); const { @@ -82,7 +92,10 @@ export const StackScriptSelectionList = ({ type }: Props) => { const hasPreselectedStackScript = Boolean(params.stackScriptID); const { data: stackscript, isLoading: isSelectedStackScriptLoading } = - useStackScriptQuery(params.stackScriptID ?? -1, hasPreselectedStackScript); + useStackScriptQuery( + params.stackScriptID ? Number(params.stackScriptID) : -1, + hasPreselectedStackScript + ); const filter = type === 'Community' @@ -167,7 +180,7 @@ export const StackScriptSelectionList = ({ type }: Props) => { {isFetching && } {searchParseError && ( - + )} ({ + useLocation: vi.fn(), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useLocation: queryMocks.useLocation, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('StackScripts', () => { + beforeEach(() => { + queryMocks.useLocation.mockReturnValue({ + pathname: '/linode/create', + }); + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a StackScript section', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.test.tsx index ab1721108fd..998b134cf49 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.test.tsx @@ -6,7 +6,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { TwoStepRegion } from './TwoStepRegion'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('TwoStepRegion', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render a heading and docs link', () => { const { getAllByText, getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.test.tsx index 7962bd097a5..76d06f49eb9 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.test.tsx @@ -9,7 +9,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { UserData } from './UserData'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Linode Create UserData', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render if the selected image supports cloud-init and the region supports metadata', async () => { const image = imageFactory.build({ capabilities: ['cloud-init'] }); const region = regionFactory.build({ capabilities: ['Metadata'] }); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.test.tsx index b12a7f19351..5ba1816047b 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.test.tsx @@ -1,15 +1,38 @@ import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { UserDataHeading } from './UserDataHeading'; +const queryMocks = vi.hoisted(() => ({ + useSearch: vi.fn(), + useParams: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('UserDataHeading', () => { - it('should display a warning in the header for cloning', () => { - const { getByText } = renderWithTheme(, { - MemoryRouter: { - initialEntries: ['/linodes/create?type=Clone+Linode'], - }, + beforeEach(() => { + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({ + linodeId: '123', + }); + }); + + it('should display a warning in the header for cloning', async () => { + queryMocks.useSearch.mockReturnValue({ + type: 'Clone Linode', + }); + + const { getByText } = await renderWithThemeAndRouter(, { + initialRoute: '/linodes/create', }); expect( @@ -19,11 +42,13 @@ describe('UserDataHeading', () => { ).toBeVisible(); }); - it('should display a warning in the header for creating from a Linode backup', () => { - const { getByText } = renderWithTheme(, { - MemoryRouter: { - initialEntries: ['/linodes/create?type=Backups'], - }, + it('should display a warning in the header for creating from a Linode backup', async () => { + queryMocks.useSearch.mockReturnValue({ + type: 'Backups', + }); + + const { getByText } = await renderWithThemeAndRouter(, { + initialRoute: '/linodes/create', }); expect( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx index d50c849d8ef..6b099af27cd 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx @@ -28,7 +28,7 @@ export const UserDataHeading = () => { Add User Data diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.test.tsx index 10233f36e64..921db2048cf 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.test.tsx @@ -7,7 +7,29 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; import { VLAN } from './VLAN'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('VLAN', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('Should render a heading', () => { const { getAllByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx index 675139362b5..e50e93b8209 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx @@ -49,14 +49,14 @@ export const VLAN = () => { VLAN {isCreatingFromBackup && ( )} {!imageId && !isCreatingFromBackup && ( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.test.tsx index 751f2895782..cfec7c12517 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.test.tsx @@ -8,7 +8,29 @@ import { VPC } from './VPC'; import type { CreateLinodeRequest } from '@linode/api-v4'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('VPC', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('renders a heading', () => { const { getByText } = renderWithThemeAndHookFormContext({ component: , diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx index a49bd35f31b..2f9a094f50c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx @@ -216,7 +216,7 @@ export const VPC = () => { in the VPC diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.test.tsx index 7e53195eacc..a76a67edf75 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/index.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/index.test.tsx @@ -4,7 +4,29 @@ import { renderWithTheme } from 'src/utilities/testHelpers'; import { LinodeCreate } from '.'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Linode Create', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('Should not render VLANs when cloning', () => { const { queryByText } = renderWithTheme(, { MemoryRouter: { initialEntries: ['/linodes/create?type=Clone+Linode'] }, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx index fcd72b0f25a..bd13443af80 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx @@ -3,18 +3,16 @@ import { useCloneLinodeMutation, useCreateLinodeMutation, useMutateAccountAgreements, - usePreferences, useProfile, } from '@linode/queries'; import { CircleProgress, Notice, Stack } from '@linode/ui'; import { scrollErrorIntoView } from '@linode/utilities'; import { useQueryClient } from '@tanstack/react-query'; -import { createLazyRoute } from '@tanstack/react-router'; +import { useNavigate } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import React, { useEffect, useRef } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import type { SubmitHandler } from 'react-hook-form'; -import { useHistory } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; @@ -86,14 +84,13 @@ export const LinodeCreate = () => { const { isLinodeCloneFirewallEnabled } = useIsLinodeCloneFirewallEnabled(); const { isVMHostMaintenanceEnabled } = useVMHostMaintenanceEnabled(); - const { data: isAclpAlertsPreferenceBeta } = usePreferences( - (preferences) => preferences?.isAclpAlertsBeta - ); - const { aclpBetaServices } = useFlags(); + // In Create flow, alerts always default to 'legacy' mode + const [isAclpAlertsBetaCreateFlow, setIsAclpAlertsBetaCreateFlow] = + React.useState(false); + const queryClient = useQueryClient(); - const history = useHistory(); const { enqueueSnackbar } = useSnackbar(); const form = useForm({ @@ -108,6 +105,7 @@ export const LinodeCreate = () => { shouldFocusError: false, // We handle this ourselves with `scrollErrorIntoView` }); + const navigate = useNavigate(); const { mutateAsync: createLinode } = useCreateLinodeMutation(); const { mutateAsync: cloneLinode } = useCloneLinodeMutation(); const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements(); @@ -125,11 +123,13 @@ export const LinodeCreate = () => { if (index !== currentTabIndex) { const newTab = tabs[index]; + const newParams = { type: newTab }; + // Update tab "type" query param. (This changes the selected tab) - setParams({ type: newTab }); + setParams(newParams); // Get the default values for the new tab and reset the form - defaultValues({ ...params, type: newTab }, queryClient, { + defaultValues(newParams, queryClient, { isLinodeInterfacesEnabled, isVMHostMaintenanceEnabled, }).then(form.reset); @@ -140,7 +140,7 @@ export const LinodeCreate = () => { const payload = getLinodeCreatePayload(values, { isShowingNewNetworkingUI: isLinodeInterfacesEnabled, isAclpIntegration: aclpBetaServices?.linode?.alerts, - isAclpAlertsPreferenceBeta, + isAclpAlertsPreferenceBeta: isAclpAlertsBetaCreateFlow, }); try { @@ -152,7 +152,11 @@ export const LinodeCreate = () => { }) : await createLinode(payload); - history.push(`/linodes/${linode.id}`); + navigate({ + to: `/linodes/$linodeId`, + params: { linodeId: linode.id }, + search: undefined, + }); enqueueSnackbar(`Your Linode ${linode.label} is being created.`, { variant: 'success', @@ -282,19 +286,18 @@ export const LinodeCreate = () => { {isLinodeInterfacesEnabled && params.type !== 'Clone Linode' && ( )} - + - + {secureVMNoticesEnabled && } - + ); }; - -export const linodeCreateLazyRoute = createLazyRoute('/linodes/create')({ - component: LinodeCreate, -}); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/linodeCreateLazyRoute.ts b/packages/manager/src/features/Linodes/LinodeCreate/linodeCreateLazyRoute.ts new file mode 100644 index 00000000000..3e4af37d38b --- /dev/null +++ b/packages/manager/src/features/Linodes/LinodeCreate/linodeCreateLazyRoute.ts @@ -0,0 +1,7 @@ +import { createLazyRoute } from '@tanstack/react-router'; + +import { LinodeCreate } from './'; + +export const linodeCreateLazyRoute = createLazyRoute('/linodes/create')({ + component: LinodeCreate, +}); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/schemas.ts b/packages/manager/src/features/Linodes/LinodeCreate/schemas.ts index f99c3af34b0..2bc6cc15084 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/schemas.ts +++ b/packages/manager/src/features/Linodes/LinodeCreate/schemas.ts @@ -27,6 +27,9 @@ export const CreateLinodeSchema: ObjectSchema = type: string().defined().nullable(), }).notRequired(), linodeInterfaces: array(CreateLinodeInterfaceFormSchema).required(), + maintenance_policy: string() + .oneOf(['linode/migrate', 'linode/power_off_on'] as const) + .optional(), }) ); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.test.tsx index c69a9c094f9..cb3f3a8986c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.test.tsx @@ -13,15 +13,37 @@ import { getLinodeXFilter, LinodeSelectTable } from './LinodeSelectTable'; beforeAll(() => mockMatchMedia()); +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('Linode Select Table', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should filter out Linodes in distributed regions', () => { - const { filter } = getLinodeXFilter(undefined, ''); + const { filter } = getLinodeXFilter(''); expect(filter).toHaveProperty('site_type', 'core'); }); it('should search for label, id, ipv4, tags', () => { - const { filter } = getLinodeXFilter(undefined, '12345678'); + const { filter } = getLinodeXFilter('12345678'); expect(filter).toStrictEqual({ '+or': [ @@ -35,7 +57,7 @@ describe('Linode Select Table', () => { }); it('should return an error if the x-filter is invalid', () => { - const { filterError } = getLinodeXFilter(undefined, '123 456'); + const { filterError } = getLinodeXFilter('123 456'); expect(filterError).toHaveProperty( 'message', diff --git a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx index 2c91b9f79bc..53bdcccfd96 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx @@ -19,8 +19,8 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError'; import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; import { TableSortCell } from 'src/components/TableSortCell'; import { PowerActionsDialog } from 'src/features/Linodes/PowerActionsDialogOrDrawer'; -import { useOrder } from 'src/hooks/useOrder'; -import { usePagination } from 'src/hooks/usePagination'; +import { useOrderV2 } from 'src/hooks/useOrderV2'; +import { usePaginationV2 } from 'src/hooks/usePaginationV2'; import { sendLinodePowerOffEvent } from 'src/utilities/analytics/customEventAnalytics'; import { isPrivateIP } from 'src/utilities/ipUtils'; @@ -34,7 +34,7 @@ import { SelectLinodeCard } from './SelectLinodeCard'; import type { LinodeCreateFormValues } from '../utilities'; import type { Linode } from '@linode/api-v4'; import type { Theme } from '@mui/material'; -import type { UseOrder } from 'src/hooks/useOrder'; +import type { Order } from 'src/hooks/useOrderV2'; interface Props { /** @@ -70,21 +70,30 @@ export const LinodeSelectTable = (props: Props) => { const { params } = useLinodeCreateQueryParams(); - const [preselectedLinodeId, setPreselectedLinodeId] = useState( - params.linodeID + const [query, setQuery] = useState( + params.linodeID ? `id = ${params.linodeID}` : '' ); - const [query, setQuery] = useState(field.value?.label ?? ''); const [linodeToPowerOff, setLinodeToPowerOff] = useState(); - const pagination = usePagination(); - const order = useOrder(); + const pagination = usePaginationV2({ + currentRoute: '/linodes/create', + initialPage: 1, + preferenceKey: 'linode-clone-select-table', + }); - const { filter, filterError } = getLinodeXFilter( - preselectedLinodeId, - query, - order - ); + const { order, orderBy, handleOrderChange } = useOrderV2({ + initialRoute: { + defaultOrder: { + order: 'asc', + orderBy: 'label', + }, + from: '/linodes/create', + }, + preferenceKey: 'linode-clone-select-table', + }); + + const { filter, filterError } = getLinodeXFilter(query, order, orderBy); const { data, error, isFetching, isLoading } = useLinodesQuery( { @@ -140,14 +149,16 @@ export const LinodeSelectTable = (props: Props) => { hideLabel isSearching={isFetching} label="Search" - onSearch={(value) => { - if (preselectedLinodeId) { - setPreselectedLinodeId(undefined); + onSearch={(query) => { + // If a Linode is selected and the user changes the search query, clear their current selection. + // We do this because the new list of Linodes may not include the selected one. + if (field.value?.id) { + field.onChange(null); } - setQuery(value); + setQuery(query); }} placeholder="Search" - value={preselectedLinodeId ? (field.value?.label ?? '') : query} + value={query} /> {matchesMdUp ? ( @@ -155,9 +166,9 @@ export const LinodeSelectTable = (props: Props) => { Linode @@ -166,9 +177,9 @@ export const LinodeSelectTable = (props: Props) => { Image Plan Region @@ -239,16 +250,10 @@ export const LinodeSelectTable = (props: Props) => { }; export const getLinodeXFilter = ( - preselectedLinodeId: number | undefined, query: string, - order?: UseOrder + order?: Order, + orderBy?: string ) => { - if (preselectedLinodeId) { - return { - id: preselectedLinodeId, - }; - } - const { error: filterError, filter: apiFilter } = getAPIFilterFromQuery( query, { @@ -264,7 +269,7 @@ export const getLinodeXFilter = ( if (order) { return { - filter: { ...filter, '+order': order.order, '+order_by': order.orderBy }, + filter: { ...filter, '+order': order, '+order_by': orderBy }, filterError, }; } diff --git a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts index 48cf14a4344..1a882a7568c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts +++ b/packages/manager/src/features/Linodes/LinodeCreate/utilities.ts @@ -6,15 +6,11 @@ import { stackscriptQueries, } from '@linode/queries'; import { omitProps } from '@linode/ui'; -import { - getQueryParamsFromQueryString, - isNotNullOrUndefined, - utoa, -} from '@linode/utilities'; +import { isNotNullOrUndefined, utoa } from '@linode/utilities'; +import { useNavigate, useSearch } from '@tanstack/react-router'; import { enqueueSnackbar } from 'notistack'; import { useCallback } from 'react'; import type { FieldErrors } from 'react-hook-form'; -import { useHistory } from 'react-router-dom'; import { sendCreateLinodeEvent } from 'src/utilities/analytics/customEventAnalytics'; import { sendLinodeCreateFormErrorEvent } from 'src/utilities/analytics/formEventAnalytics'; @@ -42,35 +38,13 @@ import type { } from '@linode/api-v4'; import type { LinodeCreateType } from '@linode/utilities'; import type { QueryClient } from '@tanstack/react-query'; +import type { LinodeCreateSearchParams } from 'src/routes/linodes'; /** * This is the ID of the Image of the default OS. */ const DEFAULT_OS = 'linode/ubuntu24.04'; -/** - * This interface is used to type the query params on the Linode Create flow. - */ -interface LinodeCreateQueryParams { - appID: string | undefined; - backupID: string | undefined; - imageID: string | undefined; - linodeID: string | undefined; - stackScriptID: string | undefined; - subtype: StackScriptTabType | undefined; - type: LinodeCreateType | undefined; -} - -interface ParsedLinodeCreateQueryParams { - appID: number | undefined; - backupID: number | undefined; - imageID: string | undefined; - linodeID: number | undefined; - stackScriptID: number | undefined; - subtype: StackScriptTabType | undefined; - type: LinodeCreateType | undefined; -} - interface LinodeCreatePayloadOptions { isAclpAlertsPreferenceBeta?: boolean; isAclpIntegration?: boolean; @@ -83,52 +57,46 @@ interface LinodeCreatePayloadOptions { * We have this because react-router-dom's query strings are not typesafe. */ export const useLinodeCreateQueryParams = () => { - const history = useHistory(); - - const rawParams = getQueryParamsFromQueryString(history.location.search); + const search = useSearch({ strict: false }); + const navigate = useNavigate(); /** * Updates query params */ - const updateParams = (params: Partial) => { - const newParams = new URLSearchParams(rawParams); - - for (const key in params) { - if (!params[key as keyof LinodeCreateQueryParams]) { - newParams.delete(key); - } else { - newParams.set(key, params[key as keyof LinodeCreateQueryParams]!); - } - } - - history.push({ search: newParams.toString() }); + const updateParams = (params: Partial) => { + navigate({ + to: '/linodes/create', + search: (prev) => ({ + ...prev, + ...params, + }), + }); }; /** * Replaces query params with the provided values */ - const setParams = (params: Partial) => { - const newParams = new URLSearchParams(params); - - history.push({ search: newParams.toString() }); + const setParams = (params: Partial) => { + navigate({ + to: '/linodes/create', + search: params, + }); }; - const params = getParsedLinodeCreateQueryParams(rawParams); + const params = getParsedLinodeCreateQueryParams(search); return { params, setParams, updateParams }; }; -const getParsedLinodeCreateQueryParams = (rawParams: { - [key: string]: string; -}): ParsedLinodeCreateQueryParams => { +const getParsedLinodeCreateQueryParams = ( + rawParams: LinodeCreateSearchParams +): LinodeCreateSearchParams => { return { - appID: rawParams.appID ? Number(rawParams.appID) : undefined, - backupID: rawParams.backupID ? Number(rawParams.backupID) : undefined, - imageID: rawParams.imageID as string | undefined, - linodeID: rawParams.linodeID ? Number(rawParams.linodeID) : undefined, - stackScriptID: rawParams.stackScriptID - ? Number(rawParams.stackScriptID) - : undefined, + appID: rawParams.appID ?? undefined, + backupID: rawParams.backupID ?? undefined, + imageID: rawParams.imageID ?? undefined, + linodeID: rawParams.linodeID ?? undefined, + stackScriptID: rawParams.stackScriptID ?? undefined, subtype: rawParams.subtype as StackScriptTabType | undefined, type: rawParams.type as LinodeCreateType | undefined, }; @@ -184,16 +152,8 @@ export const getLinodeCreatePayload = ( 'hasSignedEUAgreement', 'firewallOverride', 'linodeInterfaces', - 'maintenance_policy', // Exclude maintenance_policy since it has a different type in formValues (includes null). ]); - // Convert null to undefined for maintenance_policy - if (formValues.maintenance_policy === null) { - values.maintenance_policy = undefined; - } else { - values.maintenance_policy = formValues.maintenance_policy; - } - if (!isAclpIntegration || !isAclpAlertsPreferenceBeta) { values.alerts = undefined; } @@ -308,13 +268,6 @@ const defaultInterfaces: InterfacePayload[] = [ * For example, we add `linode` so we can store the currently selected Linode * for the Backups and Clone tab. * - * We omit `maintenance_policy` from CreateLinodeRequest because: - * 1. The API expects it to be either 'linode/migrate', 'linode/power_off_on' or undefined - * 2. The form needs to handle null (no policy selected) and undefined (omit from API) - * 3. The actual API payload is handled in getLinodeCreatePayload where we: - * - Delete the field if region doesn't support it - * - Convert null to undefined if region supports it - * * For any extra values added to the form, we should make sure `getLinodeCreatePayload` * removes them from the payload before it is sent to the API. */ @@ -348,11 +301,9 @@ export interface LinodeCreateFormValues */ linodeInterfaces: LinodeCreateInterface[]; /** - * Override maintenance_policy to include null for form handling - * null = "user explicitly selected 'no policy'" - * undefined = "field not set, omit from API" + * Maintenance policy for the Linode. Can be undefined if the selected region doesn't support it. */ - maintenance_policy?: MaintenancePolicySlug | null; + maintenance_policy?: MaintenancePolicySlug; } export interface LinodeCreateFormContext { @@ -378,7 +329,7 @@ export interface LinodeCreateFormContext { * The default values are dependent on the query params present. */ export const defaultValues = async ( - params: ParsedLinodeCreateQueryParams, + params: LinodeCreateSearchParams, queryClient: QueryClient, flags: { isLinodeInterfacesEnabled: boolean; @@ -392,7 +343,7 @@ export const defaultValues = async ( if (stackscriptId) { try { stackscript = await queryClient.ensureQueryData( - stackscriptQueries.stackscript(stackscriptId) + stackscriptQueries.stackscript(Number(stackscriptId)) ); } catch (error) { enqueueSnackbar('Unable to initialize StackScript user defined field.', { @@ -406,7 +357,7 @@ export const defaultValues = async ( if (params.linodeID) { try { linode = await queryClient.ensureQueryData( - linodeQueries.linode(params.linodeID) + linodeQueries.linode(Number(params.linodeID)) ); } catch (error) { enqueueSnackbar('Unable to initialize pre-selected Linode.', { @@ -433,11 +384,8 @@ export const defaultValues = async ( ); } - // If the Maintenance Policy feature is enabled, set the default policy if the user has one set - if ( - flags.isVMHostMaintenanceEnabled && - accountSettings.maintenance_policy - ) { + // If the Maintenance Policy feature is enabled, use the user's account setting + if (flags.isVMHostMaintenanceEnabled) { defaultMaintenancePolicy = accountSettings.maintenance_policy; } } catch (error) { @@ -463,7 +411,7 @@ export const defaultValues = async ( (linode?.ipv4.some(isPrivateIP) ?? false); const values: LinodeCreateFormValues = { - backup_id: params.backupID, + backup_id: params.backupID ? Number(params.backupID) : undefined, backups_enabled: linode?.backups.enabled, firewall_id: firewallSettings && firewallSettings.default_firewall_ids.linode @@ -480,7 +428,7 @@ export const defaultValues = async ( stackscript_data: stackscript?.user_defined_fields ? getDefaultUDFData(stackscript.user_defined_fields) : undefined, - stackscript_id: stackscriptId, + stackscript_id: stackscriptId ? Number(stackscriptId) : undefined, type: linode?.type ? linode.type : '', }; @@ -497,7 +445,7 @@ export const defaultValues = async ( return values; }; -const getDefaultImageId = (params: ParsedLinodeCreateQueryParams) => { +const getDefaultImageId = (params: LinodeCreateSearchParams) => { // You can't have an Image selected when deploying from a backup. if (params.type === 'Backups') { return null; diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.test.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.test.tsx index 273bda62f78..660afda5f79 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.test.tsx @@ -17,7 +17,10 @@ import { } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; +import { + mockMatchMedia, + renderWithThemeAndRouter, +} from 'src/utilities/testHelpers'; import { encryptionStatusTestId } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable'; import { LinodeEntityDetail } from './LinodeEntityDetail'; @@ -26,6 +29,18 @@ import { getSubnetsString, getVPCIPv4 } from './LinodeEntityDetailBody'; import type { LinodeHandlers } from './LinodesLanding/LinodesLanding'; import type { AccountCapability } from '@linode/api-v4'; +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { + update_linode: false, + }, + })), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + beforeAll(() => mockMatchMedia()); describe('Linode Entity Detail', () => { @@ -86,7 +101,7 @@ describe('Linode Entity Detail', () => { }) ); - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( ); @@ -110,7 +125,7 @@ describe('Linode Entity Detail', () => { }) ); - const { getByTestId } = renderWithTheme( + const { getByTestId } = await renderWithThemeAndRouter( ); @@ -126,7 +141,7 @@ describe('Linode Entity Detail', () => { }); it('should not display the LKE section if the linode is not associated with an LKE cluster', async () => { - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( ); @@ -151,7 +166,7 @@ describe('Linode Entity Detail', () => { }) ); - const { getByTestId } = renderWithTheme( + const { getByTestId } = await renderWithThemeAndRouter( ); @@ -172,7 +187,7 @@ describe('Linode Entity Detail', () => { }) ); - const { getByTestId } = renderWithTheme( + const { getByTestId } = await renderWithThemeAndRouter( { }) ); - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( { }) ); - const { getByText } = renderWithTheme( + const { getByText } = await renderWithThemeAndRouter( { }) ); - const { getByText, queryByTestId } = renderWithTheme( + const { getByText, queryByTestId } = await renderWithThemeAndRouter( { ) ); - const { getByText } = renderWithTheme( + const { getByText } = await renderWithThemeAndRouter( { }); }); - it('should not display the encryption status of the linode if the account lacks the capability or the feature flag is off', () => { + it('should not display the encryption status of the linode if the account lacks the capability or the feature flag is off', async () => { // situation where isDiskEncryptionFeatureEnabled === false - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( ); const encryptionStatusFragment = queryByTestId(encryptionStatusTestId); @@ -335,20 +350,50 @@ describe('Linode Entity Detail', () => { expect(encryptionStatusFragment).not.toBeInTheDocument(); }); - it('should display the encryption status of the linode when Disk Encryption is enabled and the user has the account capability', () => { + it('should display the encryption status of the linode when Disk Encryption is enabled and the user has the account capability', async () => { mocks.useIsDiskEncryptionFeatureEnabled.mockImplementationOnce(() => { return { isDiskEncryptionFeatureEnabled: true, }; }); - const { queryByTestId } = renderWithTheme( + const { queryByTestId } = await renderWithThemeAndRouter( ); const encryptionStatusFragment = queryByTestId(encryptionStatusTestId); expect(encryptionStatusFragment).toBeInTheDocument(); }); + + it('should disable "Add A Tag" button if the user does not have update_linode permission', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + update_linode: false, + }, + }); + + const { getByText } = await renderWithThemeAndRouter( + + ); + const addTagBtn = getByText('Add a tag'); + expect(addTagBtn).toBeInTheDocument(); + expect(addTagBtn).toBeDisabled(); + }); + + it('should enable "Add A Tag" button if the user has update_linode permission', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + update_linode: true, + }, + }); + + const { getByText } = await renderWithThemeAndRouter( + + ); + const addTagBtn = getByText('Add a tag'); + expect(addTagBtn).toBeInTheDocument(); + expect(addTagBtn).toBeEnabled(); + }); }); describe('getSubnetsString function', () => { diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx index 02eb1dca12a..dafe762d2c4 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx @@ -12,10 +12,10 @@ import { EntityDetail } from 'src/components/EntityDetail/EntityDetail'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { notificationCenterContext as _notificationContext } from 'src/features/NotificationCenter/NotificationCenterContext'; -import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; -import { useVPCInterface } from 'src/hooks/useVPCInterface'; +import { useDetermineUnreachableIPs } from 'src/hooks/useDetermineUnreachableIPs'; import { useInProgressEvents } from 'src/queries/events/events'; +import { usePermissions } from '../IAM/hooks/usePermissions'; import { LinodeEntityDetailBody } from './LinodeEntityDetailBody'; import { LinodeEntityDetailFooter } from './LinodeEntityDetailFooter'; import { LinodeEntityDetailHeader } from './LinodeEntityDetailHeader'; @@ -65,21 +65,16 @@ export const LinodeEntityDetail = (props: Props) => { const { configs, - hasPublicLinodeInterface, + isUnreachablePublicIPv4, + isUnreachablePublicIPv6, interfaceWithVPC, - isVPCOnlyLinode, vpcLinodeIsAssignedTo, - } = useVPCInterface({ + } = useDetermineUnreachableIPs({ isLinodeInterface, linodeId: linode.id, }); - const isLinodesGrantReadOnly = useIsResourceRestricted({ - grantLevel: 'read_only', - grantType: 'linode', - id: linode.id, - }); - + const { permissions } = usePermissions('linode', ['update_linode']); const imageVendor = images?.find((i) => i.id === linode.image)?.vendor ?? null; @@ -114,7 +109,7 @@ export const LinodeEntityDetail = (props: Props) => { return ( <> - {isLinodesGrantReadOnly && ( + {!permissions.update_linode && ( { encryptionStatus={linode.disk_encryption} gbRAM={linode.specs.memory / 1024} gbStorage={linode.specs.disk / 1024} - hasPublicLinodeInterface={hasPublicLinodeInterface} interfaceGeneration={linode.interface_generation} interfaceWithVPC={interfaceWithVPC} ipv4={linode.ipv4} ipv6={trimmedIPv6} isLKELinode={Boolean(linode.lke_cluster_id)} - isVPCOnlyLinode={isVPCOnlyLinode} + isUnreachablePublicIPv4={isUnreachablePublicIPv4} + isUnreachablePublicIPv6={isUnreachablePublicIPv6} linodeCapabilities={linode.capabilities} linodeId={linode.id} linodeIsInDistributedRegion={linodeIsInDistributedRegion} @@ -149,7 +144,7 @@ export const LinodeEntityDetail = (props: Props) => { } footer={ { linodeId={linode.id} linodeLabel={linode.label} linodeMaintenancePolicySet={ - linode.maintenance?.maintenance_policy_set + linode.maintenance?.maintenance_policy_set ?? + linode.maintenance_policy // Attempt to use ongoing maintenance policy. Otherwise, fallback to policy set on Linode. } linodeRegionDisplay={linodeRegionDisplay} linodeStatus={linode.status} diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index a817addd3bd..c9838d213e2 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -64,13 +64,13 @@ export interface BodyProps { encryptionStatus: EncryptionStatus | undefined; gbRAM: number; gbStorage: number; - hasPublicLinodeInterface: boolean | undefined; interfaceGeneration: InterfaceGenerationType | undefined; interfaceWithVPC?: Interface | LinodeInterface; ipv4: Linode['ipv4']; ipv6: Linode['ipv6']; isLKELinode: boolean; // indicates whether linode belongs to an LKE cluster - isVPCOnlyLinode: boolean; + isUnreachablePublicIPv4: boolean; + isUnreachablePublicIPv6: boolean; linodeCapabilities: LinodeCapabilities[]; linodeId: number; linodeIsInDistributedRegion: boolean; @@ -88,13 +88,13 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { encryptionStatus, gbRAM, gbStorage, - hasPublicLinodeInterface, + isUnreachablePublicIPv4, interfaceGeneration, interfaceWithVPC, ipv4, ipv6, isLKELinode, - isVPCOnlyLinode, + isUnreachablePublicIPv6, linodeCapabilities, linodeId, linodeIsInDistributedRegion, @@ -279,19 +279,20 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { ) : undefined } gridSize={{ lg: 5, xs: 12 }} - hasPublicLinodeInterface={hasPublicLinodeInterface} + hasPublicInterface={isUnreachablePublicIPv6} isLinodeInterface={isLinodeInterface} - isVPCOnlyLinode={isVPCOnlyLinode} rows={[ { isMasked: maskSensitiveDataPreference, maskedTextLength: 'ipv4', text: firstAddress, + disabled: isUnreachablePublicIPv4, }, { isMasked: maskSensitiveDataPreference, maskedTextLength: 'ipv6', text: secondAddress, + disabled: isUnreachablePublicIPv6, }, ]} sx={{ padding: 0 }} @@ -299,9 +300,6 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { /> ); }); @@ -143,10 +141,3 @@ const StyledUl = styled('ul', { label: 'StyledUl' })(({ theme }) => ({ paddingLeft: 0, paddingTop: theme.spacing(), })); - -const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })({ - '&.MuiTableCell-root': { - paddingRight: 0, - }, - padding: '0 !important', -}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.test.tsx new file mode 100644 index 00000000000..b6370e2b069 --- /dev/null +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.test.tsx @@ -0,0 +1,119 @@ +import { fireEvent } from '@testing-library/react'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import * as React from 'react'; + +import { linodeConfigFactory } from 'src/factories'; +import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; + +import { ConfigActionMenu } from './LinodeConfigActionMenu'; + +const navigate = vi.fn(); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + }; +}); + +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { + reboot_linode: false, + update_linode_config_profile: false, + clone_linode: false, + delete_linode_config_profile: false, + }, + })), + useNavigate: vi.fn(() => navigate), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +const defaultProps = { + config: linodeConfigFactory.build(), + linodeId: 0, + label: 'test', + onDelete: vi.fn(), + onBoot: vi.fn(), + onEdit: vi.fn(), +}; + +describe('ConfigActionMenu', () => { + beforeEach(() => mockMatchMedia()); + + it('should render all actions', async () => { + const { getByText } = renderWithTheme( + + ); + + const actionBtn = screen.getByRole('button'); + expect(actionBtn).toBeInTheDocument(); + await userEvent.click(actionBtn); + + expect(getByText('Boot')).toBeVisible(); + expect(getByText('Edit')).toBeVisible(); + expect(getByText('Clone')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); + }); + + it('should disable all actions menu if the user does not have permissions', async () => { + renderWithTheme(); + + const actionBtn = screen.getByRole('button'); + expect(actionBtn).toBeInTheDocument(); + await userEvent.click(actionBtn); + + const bootBtn = screen.getByTestId('Boot'); + expect(bootBtn).toHaveAttribute('aria-disabled', 'true'); + + const editBtn = screen.getByTestId('Edit'); + expect(editBtn).toHaveAttribute('aria-disabled', 'true'); + + const cloneBtn = screen.getByTestId('Clone'); + expect(cloneBtn).toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).toHaveAttribute('aria-disabled', 'true'); + + const tooltip = screen.getByLabelText( + "You don't have permission to perform this action" + ); + expect(tooltip).toBeInTheDocument(); + fireEvent.click(tooltip); + expect(tooltip).toBeVisible(); + }); + + it('should enable all actions menu if the user has permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + reboot_linode: true, + update_linode_config_profile: true, + clone_linode: true, + delete_linode_config_profile: true, + }, + }); + + renderWithTheme(); + + const actionBtn = screen.getByRole('button'); + expect(actionBtn).toBeInTheDocument(); + await userEvent.click(actionBtn); + + const bootBtn = screen.getByTestId('Boot'); + expect(bootBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const editBtn = screen.getByTestId('Edit'); + expect(editBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const cloneBtn = screen.getByTestId('Clone'); + expect(cloneBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); +}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx index c86deadecaa..23e8b5d0e84 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx @@ -1,15 +1,10 @@ -import { Box } from '@linode/ui'; -import { splitAt } from '@linode/utilities'; -import { useTheme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; +import { useNavigate } from '@tanstack/react-router'; import * as React from 'react'; -import { useHistory } from 'react-router-dom'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import type { Config } from '@linode/api-v4/lib/linodes'; -import type { Theme } from '@mui/material/styles'; import type { Action } from 'src/components/ActionMenu/ActionMenu'; interface Props { @@ -19,68 +14,63 @@ interface Props { onBoot: () => void; onDelete: () => void; onEdit: () => void; - readOnly?: boolean; } export const ConfigActionMenu = (props: Props) => { - const { config, linodeId, onBoot, onDelete, onEdit, readOnly } = props; - const history = useHistory(); - const theme = useTheme(); - const matchesSmDown = useMediaQuery(theme.breakpoints.down('md')); + const { config, linodeId, onBoot, onDelete, onEdit } = props; + const navigate = useNavigate(); - const tooltip = readOnly + const { permissions } = usePermissions( + 'linode', + [ + 'reboot_linode', + 'update_linode_config_profile', + 'clone_linode', + 'delete_linode_config_profile', + ], + linodeId + ); + + const tooltip = !permissions.delete_linode_config_profile ? "You don't have permission to perform this action" : undefined; const actions: Action[] = [ { - disabled: readOnly, + disabled: !permissions.reboot_linode, onClick: onBoot, title: 'Boot', }, { - disabled: readOnly, + disabled: !permissions.update_linode_config_profile, onClick: onEdit, title: 'Edit', }, { - disabled: readOnly, + disabled: !permissions.clone_linode, onClick: () => { - history.push( - `/linodes/${linodeId}/clone/configs?selectedConfig=${config.id}` - ); + navigate({ + to: `/linodes/${linodeId}/clone/configs`, + search: (prev) => ({ + ...prev, + selectedConfig: config.id, + }), + }); }, title: 'Clone', }, { - disabled: readOnly, + disabled: !permissions.delete_linode_config_profile, onClick: onDelete, title: 'Delete', tooltip, }, ]; - const splitActionsArrayIndex = matchesSmDown ? 0 : 2; - const [inlineActions, menuActions] = splitAt(splitActionsArrayIndex, actions); - return ( - - {!matchesSmDown && - inlineActions.map((action) => { - return ( - - ); - })} - - + ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx index 0f6e142c306..a8c1c02d35e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx @@ -196,7 +196,6 @@ describe('LinodeConfigDialog', () => { it('should display the correct network interfaces', async () => { const props = { - isReadOnly: false, linodeId: 0, onClose: vi.fn(), }; @@ -221,7 +220,6 @@ describe('LinodeConfigDialog', () => { it('should hide the Network Interfaces section if Linode uses new interfaces', () => { const props = { - isReadOnly: false, linodeId: 1, onClose: vi.fn(), }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index 15ed6736418..0d298600cec 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -115,7 +115,6 @@ interface EditableFields { interface Props { config: Config | undefined; - isReadOnly: boolean; linodeId: number; onClose: () => void; open: boolean; @@ -253,7 +252,7 @@ const finnixDiskID = 25669; export const LinodeConfigDialog = (props: Props) => { const formContainerRef = React.useRef(null); - const { config, isReadOnly, linodeId, onClose, open } = props; + const { config, linodeId, onClose, open } = props; const { data: linode } = useLinodeQuery(linodeId, open); @@ -755,7 +754,6 @@ export const LinodeConfigDialog = (props: Props) => { )} { /> { VM Mode @@ -798,13 +794,11 @@ export const LinodeConfigDialog = (props: Props) => { > } - disabled={isReadOnly} label="Paravirtualization" value="paravirt" /> } - disabled={isReadOnly} label="Full virtualization" value="fullvirt" /> @@ -826,12 +820,11 @@ export const LinodeConfigDialog = (props: Props) => { errorText={formik.errors.kernel} kernels={kernels} onChange={handleChangeKernel} - readOnly={isReadOnly} selectedKernel={values.kernel} /> )} - + Run Level { > } - disabled={isReadOnly} label="Run Default Level" value="default" /> } - disabled={isReadOnly} label="Single user mode" value="single" /> } - disabled={isReadOnly} label="init=/bin/bash" value="binbash" /> @@ -872,9 +862,7 @@ export const LinodeConfigDialog = (props: Props) => { memory limit. */} - - Memory Limit - + Memory Limit { > } - disabled={isReadOnly} label="Do not set any limits on memory usage" value="no_limit" /> } - disabled={isReadOnly} label="Limit the amount of RAM this config uses" value="set_limit" /> @@ -898,7 +884,6 @@ export const LinodeConfigDialog = (props: Props) => { {values.setMemoryLimit === 'set_limit' && ( { values.devices?.[slot as keyof DevicesAsStrings] ?? '' @@ -955,7 +939,7 @@ export const LinodeConfigDialog = (props: Props) => { )} - - - {({ data: orderedData, handleOrderChange, order, orderBy }) => ( - - {({ - count, - data: paginatedData, - handlePageChange, - handlePageSizeChange, - page, - pageSize, - }) => { - return ( - - - - - - Configuration - - - Disks - - {isLegacyConfigInterface && ( - - Network Interfaces - - )} - - - - - + {({ + count, + data: paginatedData, + handlePageChange, + handlePageSizeChange, + page, + pageSize, + }) => { + return ( + +
+ + + + Configuration + + + Disks + + {isLegacyConfigInterface && ( + - {paginatedData.map((thisConfig) => { - return ( - onBoot(thisConfig.id)} - onDelete={() => onDelete(thisConfig.id)} - onEdit={() => onEdit(thisConfig.id)} - readOnly={isReadOnly} - /> - ); - })} - - -
- - - ); - }} - - )} - + Network Interfaces + + )} + + + + + + {paginatedData.map((thisConfig) => { + return ( + onBoot(thisConfig.id)} + onDelete={() => onDelete(thisConfig.id)} + onEdit={() => onEdit(thisConfig.id)} + /> + ); + })} + + + + + + ); + }} + setIsLinodeConfigDialogOpen(false)} open={isLinodeConfigDialogOpen} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.test.tsx index c218bc7d6be..03ebcc8cc1b 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.test.tsx @@ -24,7 +24,33 @@ const props = { }, } as UpgradeInterfacesDialogContentProps; +const queryMocks = vi.hoisted(() => ({ + useLocation: vi.fn(), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + useLocation: queryMocks.useLocation, + }; +}); + describe('SuccessDialogContent', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({ + linodeId: props.linodeId, + }); + }); + it('can render the success content for a dry run', () => { const { getByText } = renderWithTheme(); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx index 894d7945d72..622d2cc4ed1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx @@ -1,6 +1,6 @@ import { Box, Button, Notice, Stack, Typography } from '@linode/ui'; +import { useLocation, useNavigate } from '@tanstack/react-router'; import React from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; import { initialState } from '../UpgradeInterfacesDialog'; import { useUpgradeToLinodeInterfaces } from '../useUpgradeToLinodeInterfaces'; @@ -18,7 +18,7 @@ export const SuccessDialogContent = ( const { isDryRun, linodeInterfaces, selectedConfig } = state; const location = useLocation(); - const history = useHistory(); + const navigate = useNavigate(); const { isPending, upgradeToLinodeInterfaces } = useUpgradeToLinodeInterfaces( { @@ -102,7 +102,9 @@ export const SuccessDialogContent = ( // join everything back together .join('/') .concat('/networking'); - history.replace(newPath); + navigate({ + to: newPath, + }); }} > View Network Settings diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeMetrics.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeMetrics.tsx index d3dc2eca7f3..3549f7fcba7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeMetrics.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeMetrics.tsx @@ -1,5 +1,6 @@ import { usePreferences } from '@linode/queries'; import { Box } from '@linode/ui'; +import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { CloudPulseDashboardWithFilters } from 'src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters'; @@ -47,3 +48,9 @@ const LinodeMetrics = (props: Props) => { }; export default LinodeMetrics; + +export const linodeMetricsLazyRoute = createLazyRoute( + '/linodes/$linodeId/metrics' +)({ + component: LinodeMetrics, +}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.test.tsx index a37547e6f78..6719d68167f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.test.tsx @@ -1,18 +1,37 @@ import * as React from 'react'; -import { MemoryRouter, Route } from 'react-router-dom'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import LinodeSummary from './LinodeSummary'; +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('LinodeSummary', () => { - it('should have a select menu for the graphs', () => { - const { getByDisplayValue } = renderWithTheme( - - - - - + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({ + linodeId: '123', + }); + }); + + it('should have a select menu for the graphs', async () => { + const { getByDisplayValue } = await renderWithThemeAndRouter( + ); expect(getByDisplayValue('Last 24 Hours')).toBeInTheDocument(); }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.tsx index adf175f91a0..083cf5cc6d1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeMetrics/LinodeSummary/LinodeSummary.tsx @@ -9,9 +9,9 @@ import { Autocomplete, ErrorState, Paper, Stack, Typography } from '@linode/ui'; import { formatNumber, formatPercentage, getMetrics } from '@linode/utilities'; import Grid from '@mui/material/Grid'; import { useTheme } from '@mui/material/styles'; +import { useParams } from '@tanstack/react-router'; import { DateTime } from 'luxon'; import * as React from 'react'; -import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; @@ -38,7 +38,7 @@ interface Props { const LinodeSummary = (props: Props) => { const { linodeCreated } = props; - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); const theme = useTheme(); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.test.tsx index 7741c82f4d4..e116f6fb74e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.test.tsx @@ -1,15 +1,45 @@ -import { waitFor } from '@testing-library/react'; +import { + screen, + waitFor, + waitForElementToBeRemoved, +} from '@testing-library/react'; import * as React from 'react'; import { firewallFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; +import { + mockMatchMedia, + renderWithTheme, + renderWithThemeAndRouter, +} from 'src/utilities/testHelpers'; import { LinodeFirewalls } from './LinodeFirewalls'; -beforeAll(() => mockMatchMedia()); +const navigate = vi.fn(); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + }; +}); +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { + apply_linode_firewalls: false, + delete_firewall_device: false, + }, + })), + useNavigate: vi.fn(() => navigate), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); +beforeAll(() => mockMatchMedia()); describe('LinodeFirewalls', () => { it('should render', () => { const wrapper = renderWithTheme(); @@ -41,4 +71,88 @@ describe('LinodeFirewalls', () => { expect(wrapper.queryByTestId('data-qa-linode-firewall-row')); }); + + it("should enable 'Add Firewall' button if the user has apply_linode_firewalls permission", async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + ...queryMocks.userPermissions().permissions, + apply_linode_firewalls: true, + }, + }); + + const { getByText } = await renderWithThemeAndRouter( + + ); + const addFirewallBtn = getByText('Add Firewall'); + expect(addFirewallBtn).toBeInTheDocument(); + expect(addFirewallBtn).toBeEnabled(); + }); + + it("should disable 'Add Firewall' button if the user doesn't have apply_linode_firewalls permission", async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + ...queryMocks.userPermissions().permissions, + apply_linode_firewalls: false, + }, + }); + + const { getByText } = await renderWithThemeAndRouter( + + ); + const addFirewallBtn = getByText('Add Firewall'); + expect(addFirewallBtn).toBeInTheDocument(); + expect(addFirewallBtn).toBeDisabled(); + }); + + it("should enable 'Unassign' button if the user has delete_firewall_device permission", async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + ...queryMocks.userPermissions().permissions, + delete_firewall_device: true, + }, + }); + + server.use( + http.get('*/linode/instances/1/firewalls', () => { + return HttpResponse.json(makeResourcePage([firewallFactory.build()])); + }) + ); + + const { getByText } = await renderWithThemeAndRouter( + + ); + + const loadingTestId = 'table-row-loading'; + await waitForElementToBeRemoved(() => screen.queryByTestId(loadingTestId)); + + const unassignFirewallBtn = getByText('Unassign'); + expect(unassignFirewallBtn).toBeInTheDocument(); + expect(unassignFirewallBtn).toBeEnabled(); + }); + + it("should disable 'Unassign' button if the user doesn't have delete_firewall_device permission", async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + ...queryMocks.userPermissions().permissions, + delete_firewall_device: false, + }, + }); + + server.use( + http.get('*/linode/instances/1/firewalls', () => { + return HttpResponse.json(makeResourcePage([firewallFactory.build()])); + }) + ); + + const { getByText } = await renderWithThemeAndRouter( + + ); + + const loadingTestId = 'table-row-loading'; + await waitForElementToBeRemoved(screen.queryByTestId(loadingTestId)); + + const unassignFirewallBtn = getByText('Unassign'); + expect(unassignFirewallBtn).toBeInTheDocument(); + expect(unassignFirewallBtn).toBeDisabled(); + }); }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx index 6175971d01a..1c24a23f591 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx @@ -11,18 +11,28 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; import { TableRowError } from 'src/components/TableRowError/TableRowError'; import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; import { RemoveDeviceDialog } from 'src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { AddFirewallForm } from './AddFirewallForm'; import { LinodeFirewallsRow } from './LinodeFirewallsRow'; import type { Firewall, FirewallDevice } from '@linode/api-v4'; - +const NO_PERMISSIONS_TOOLTIP_TEXT = + "You don't have permissions to add Firewall."; +const MORE_THAN_ONE_FIREWALL_TOOLTIP_TEXT = + 'Linodes can only have one Firewall assigned.'; interface LinodeFirewallsProps { linodeID: number; } export const LinodeFirewalls = (props: LinodeFirewallsProps) => { const { linodeID } = props; + const { permissions } = usePermissions( + 'linode', + ['apply_linode_firewalls'], + linodeID, + true + ); const { data: attachedFirewallData, @@ -86,9 +96,16 @@ export const LinodeFirewalls = (props: LinodeFirewallsProps) => { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx index 1c8a85bafdd..e6343676c62 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx @@ -1,9 +1,8 @@ -import { useGrants, useProfile } from '@linode/queries'; import * as React from 'react'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { NO_PERMISSIONS_TOOLTIP_TEXT } from 'src/features/Firewalls/FirewallLanding/constants'; -import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import type { Action } from 'src/components/ActionMenu/ActionMenu'; @@ -17,16 +16,14 @@ export const LinodeFirewallsActionMenu = ( ) => { const { firewallID, onUnassign } = props; - const { data: profile } = useProfile(); - const { data: grants } = useGrants(); - - const userCanModifyFirewall = checkIfUserCanModifyFirewall( + const { permissions } = usePermissions( + 'firewall', + ['delete_firewall_device'], firewallID, - profile, - grants + true ); - const disabledProps = !userCanModifyFirewall + const disabledProps = !permissions.delete_firewall_device ? { disabled: true, tooltip: NO_PERMISSIONS_TOOLTIP_TEXT, @@ -48,6 +45,7 @@ export const LinodeFirewallsActionMenu = ( disabled={action.disabled} key={action.title} onClick={action.onClick} + tooltip={action.tooltip} /> ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx index 578bc973df7..f74497d087b 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx @@ -32,7 +32,7 @@ describe('LinodeIPAddressRow', () => { wrapWithTableBody( { wrapWithTableBody( { wrapWithTableBody( { wrapWithTableBody( { handleOpenEditRDNS, handleOpenEditRDNSForRange, handleOpenIPV6Details, - hasPublicLinodeInterface, + isUnreachablePublicIPv6, isLinodeInterface, - isVPCOnlyLinode, + isUnreachablePublicIPv4, linodeId, openRemoveIPDialog, openRemoveIPRangeDialog, @@ -62,24 +62,29 @@ export const LinodeIPAddressRow = (props: LinodeIPAddressRowProps) => { (preferences) => preferences?.maskSensitiveData ); + const disabled = Boolean( + (isUnreachablePublicIPv4 && type === 'Public – IPv4') || + (isUnreachablePublicIPv6 && type === 'Public – IPv6 – SLAAC') + ); + const isOnlyPublicIP = ips?.ipv4.public.length === 1 && type === 'Public – IPv4'; return ( - {!isVPCOnlyLinode && } + {!disabled && } {type} @@ -101,24 +106,24 @@ export const LinodeIPAddressRow = (props: LinodeIPAddressRowProps) => { {_ip ? ( ) : _range ? ( handleOpenEditRDNSForRange(_range)} onRemove={openRemoveIPRangeDialog} readOnly={readOnly} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.tsx similarity index 100% rename from packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.ts rename to packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.tsx diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx index 9529e5b72cf..751ee695b54 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx @@ -16,7 +16,6 @@ import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import OrderBy from 'src/components/OrderBy'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; @@ -24,8 +23,9 @@ import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; +import { useDetermineUnreachableIPs } from 'src/hooks/useDetermineUnreachableIPs'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; -import { useVPCInterface } from 'src/hooks/useVPCInterface'; +import { useOrderV2 } from 'src/hooks/useOrderV2'; import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes'; import { AddIPDrawer } from './AddIPDrawer'; @@ -79,10 +79,11 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => { const isLinodeInterface = linode?.interface_generation === 'linode'; - const { hasPublicLinodeInterface, isVPCOnlyLinode } = useVPCInterface({ - isLinodeInterface, - linodeId: linodeID, - }); + const { isUnreachablePublicIPv4, isUnreachablePublicIPv6 } = + useDetermineUnreachableIPs({ + isLinodeInterface, + linodeId: linodeID, + }); const [selectedIP, setSelectedIP] = React.useState(); const [selectedRange, setSelectedRange] = React.useState(); @@ -134,6 +135,20 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => { openRemoveIPRangeDialog, }; + const ipDisplay = ipResponseToDisplayRows(ips); + + const { sortedData, order, orderBy, handleOrderChange } = useOrderV2({ + data: ipDisplay, + initialRoute: { + defaultOrder: { + order: 'asc', + orderBy: 'type', + }, + from: '/linodes/$linodeId/networking', + }, + preferenceKey: 'linode-ip-addresses', + }); + if (isLoading) { return ; } @@ -149,8 +164,6 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => { const showAddIPButton = !isLinodeInterfacesEnabled || linode?.interface_generation !== 'linode'; - const ipDisplay = ipResponseToDisplayRows(ips); - return ( { )} {/* @todo: It'd be nice if we could always sort by public -> private. */} - - {({ data: orderedData, handleOrderChange, order, orderBy }) => { - return ( - - - - Address - - Type - - Default Gateway - Subnet Mask - Reverse DNS - - - - - {orderedData.map((ipDisplay) => ( - - ))} - -
- ); - }} - + + + + Address + + Type + + Default Gateway + Subnet Mask + Reverse DNS + + + + + {(sortedData ?? []).map((ipDisplay) => ( + + ))} + +
setIsIPDrawerOpen(false)} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx index bd3611bb44b..7de8d77aed6 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/AddInterfaceForm.tsx @@ -95,7 +95,9 @@ export const AddInterfaceForm = (props: Props) => { )} {selectedInterfacePurpose === 'public' && } - {selectedInterfacePurpose === 'vlan' && } + {selectedInterfacePurpose === 'vlan' && ( + + )} {selectedInterfacePurpose === 'vpc' && ( )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VLAN/VLANInterface.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VLAN/VLANInterface.tsx index 195b2f36e2f..aa2184a827b 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VLAN/VLANInterface.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VLAN/VLANInterface.tsx @@ -6,7 +6,11 @@ import { VLANSelect } from 'src/components/VLANSelect'; import type { CreateInterfaceFormValues } from '../utilities'; -export const VLANInterface = () => { +interface Props { + regionId: string; +} + +export const VLANInterface = ({ regionId }: Props) => { const { control } = useFormContext(); return ( @@ -17,6 +21,7 @@ export const VLANInterface = () => { render={({ field, fieldState }) => ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VPC/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VPC/VPCRanges.tsx index 0d58e08223a..f40a05cb65f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VPC/VPCRanges.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VPC/VPCRanges.tsx @@ -61,7 +61,7 @@ export const VPCRanges = () => { Add IPv4 Range } /> diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/PublicInterface/IPv4AddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/PublicInterface/IPv4AddressRow.tsx index aa4c19af614..cd0bcd1c726 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/PublicInterface/IPv4AddressRow.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/PublicInterface/IPv4AddressRow.tsx @@ -51,7 +51,7 @@ export const IPv4AddressRow = (props: Props) => { {primary && } {error && ( { )} {error && ( { - const location = useLocation(); - const history = useHistory(); + const navigate = useNavigate(); + const { interfaceId } = useParams({ + strict: false, + }); const [isAddDrawerOpen, setIsAddDrawerOpen] = useState(false); const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false); @@ -37,7 +39,19 @@ export const LinodeInterfaces = ({ linodeId, regionId }: Props) => { const onShowDetails = (interfaceId: number) => { setSelectedInterfaceId(interfaceId); - history.replace(`${location.pathname}/interfaces/${interfaceId}`); + navigate({ + to: '/linodes/$linodeId/networking/interfaces/$interfaceId', + params: { linodeId, interfaceId }, + search: { + delete: undefined, + migrate: undefined, + rebuild: undefined, + rescue: undefined, + resize: undefined, + selectedImageId: undefined, + upgrade: undefined, + }, + }); }; return ( @@ -81,8 +95,14 @@ export const LinodeInterfaces = ({ linodeId, regionId }: Props) => { history.replace(`/linodes/${linodeId}/networking`)} - open={location.pathname.includes('networking/interfaces')} + onClose={() => + navigate({ + to: '/linodes/$linodeId/networking/interfaces', + params: { linodeId }, + search: (prev) => prev, + }) + } + open={Boolean(interfaceId)} /> setIsEditDrawerOpen(false)} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx index b3cd3179807..3b4986318ff 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx @@ -1,7 +1,7 @@ import { useLinodeQuery } from '@linode/queries'; import { CircleProgress, ErrorState, Stack } from '@linode/ui'; +import { useParams } from '@tanstack/react-router'; import React from 'react'; -import { useParams } from 'react-router-dom'; import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes'; @@ -12,7 +12,7 @@ import { LinodeNetworkingSummaryPanel } from './NetworkingSummaryPanel/Networkin export const LinodeNetworking = () => { const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled(); - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); const { data: linode, error, isPending } = useLinodeQuery(id); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx index 1b67fb08b87..c57edd84724 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx @@ -26,6 +26,7 @@ describe('LinodeNetworkingActionMenu', () => { }; const props = { + disabledFromInterfaces: false, isOnlyPublicIP: true, isVPCOnlyLinode: false, onEdit: vi.fn(), diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx index 10db6f18607..92f15b735ef 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx @@ -5,7 +5,11 @@ import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { PUBLIC_IP_ADDRESSES_CONFIG_INTERFACE_TOOLTIP_TEXT } from 'src/features/Linodes/constants'; +import { + PUBLIC_IP_ADDRESSES_CONFIG_INTERFACE_TOOLTIP_TEXT, + PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_DEFAULT_ROUTE_TOOLTIP_TEXT, + PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_NOT_ASSIGNED_TOOLTIP_TEXT, +} from 'src/features/Linodes/constants'; import type { IPTypes } from './types'; import type { IPAddress, IPRange } from '@linode/api-v4/lib/networking'; @@ -13,12 +17,12 @@ import type { Theme } from '@mui/material/styles'; import type { Action } from 'src/components/ActionMenu/ActionMenu'; interface Props { - hasPublicLinodeInterface?: boolean; + disabledFromInterfaces: boolean; + hasPublicInterface?: boolean; ipAddress: IPAddress | IPRange; ipType: IPTypes; isLinodeInterface: boolean; isOnlyPublicIP: boolean; - isVPCOnlyLinode: boolean; onEdit?: (ip: IPAddress | IPRange) => void; onRemove?: (ip: IPAddress | IPRange) => void; readOnly: boolean; @@ -28,12 +32,12 @@ export const LinodeNetworkingActionMenu = (props: Props) => { const theme = useTheme(); const matchesMdDown = useMediaQuery(theme.breakpoints.down('lg')); const { - hasPublicLinodeInterface, + hasPublicInterface, ipAddress, ipType, isOnlyPublicIP, isLinodeInterface, - isVPCOnlyLinode, + disabledFromInterfaces, onEdit, onRemove, readOnly, @@ -61,9 +65,10 @@ export const LinodeNetworkingActionMenu = (props: Props) => { ? 'Linodes must have at least one public IP' : undefined; - const linodeInterfacePublicIPCopy = hasPublicLinodeInterface - ? 'This Public IP Address is provisionally reserved but not the default route. To update this, please review your Interface Settings.' - : 'This Public IP Address is provisionally reserved but not assigned to a network interface.'; + const linodeInterfacePublicIPCopy = + isLinodeInterface && hasPublicInterface + ? PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_DEFAULT_ROUTE_TOOLTIP_TEXT + : PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_NOT_ASSIGNED_TOOLTIP_TEXT; const isPublicIPNotAssignedCopy = isLinodeInterface ? linodeInterfacePublicIPCopy @@ -84,7 +89,7 @@ export const LinodeNetworkingActionMenu = (props: Props) => { deletableIPTypes.includes(ipType) && !isLinodeInterface ? { - disabled: readOnly || isOnlyPublicIP || isVPCOnlyLinode, + disabled: readOnly || isOnlyPublicIP || disabledFromInterfaces, id: 'delete', onClick: () => { onRemove(ipAddress); @@ -92,7 +97,7 @@ export const LinodeNetworkingActionMenu = (props: Props) => { title: 'Delete', tooltip: readOnly ? readOnlyTooltip - : isVPCOnlyLinode + : disabledFromInterfaces ? isPublicIPNotAssignedCopy : isOnlyPublicIP ? isOnlyPublicIPTooltip @@ -101,7 +106,7 @@ export const LinodeNetworkingActionMenu = (props: Props) => { : null, onEdit && ipAddress && showEdit ? { - disabled: readOnly || isVPCOnlyLinode, + disabled: readOnly || disabledFromInterfaces, id: 'edit-rdns', onClick: () => { onEdit(ipAddress); @@ -109,7 +114,7 @@ export const LinodeNetworkingActionMenu = (props: Props) => { title: 'Edit RDNS', tooltip: readOnly ? readOnlyTooltip - : isVPCOnlyLinode + : disabledFromInterfaces ? isPublicIPNotAssignedCopy : undefined, } diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.test.tsx index efc509c0d88..7ae274d5524 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.test.tsx @@ -2,15 +2,15 @@ import { linodeFactory } from '@linode/utilities'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { LinodeRebuildForm } from './LinodeRebuildForm'; describe('LinodeRebuildForm', () => { - it('renders a notice reccomending users add user data when the Linode already uses user data', () => { + it('renders a notice reccomending users add user data when the Linode already uses user data', async () => { const linode = linodeFactory.build({ has_user_data: true }); - const { getByText } = renderWithTheme( + const { getByText } = await renderWithThemeAndRouter( ); @@ -24,9 +24,10 @@ describe('LinodeRebuildForm', () => { it('disables the "reuse existing user data" checkbox if the Linode does not have existing user data', async () => { const linode = linodeFactory.build({ has_user_data: false }); - const { getByText, getByLabelText, queryByText } = renderWithTheme( - - ); + const { getByText, getByLabelText, queryByText } = + await renderWithThemeAndRouter( + + ); // Open the "Add User Data" accordion await userEvent.click(getByText('Add User Data')); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.tsx index 66692685cf5..c738eaae733 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildForm.tsx @@ -3,10 +3,10 @@ import { usePreferences, useRebuildLinodeMutation } from '@linode/queries'; import { Divider, Notice, Stack, Typography } from '@linode/ui'; import { scrollErrorIntoView, utoa } from '@linode/utilities'; import { useQueryClient } from '@tanstack/react-query'; +import { useSearch } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import React, { useEffect, useRef, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; -import { useLocation } from 'react-router-dom'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; import { useEventsPollingActions } from 'src/queries/events/events'; @@ -22,7 +22,7 @@ import { RebuildFromSelect } from './RebuildFrom'; import { SSHKeys } from './SSHKeys'; import { UserData } from './UserData'; import { UserDefinedFields } from './UserDefinedFields'; -import { REBUILD_LINODE_IMAGE_PARAM_NAME, resolver } from './utils'; +import { resolver } from './utils'; import type { Context, @@ -39,8 +39,7 @@ interface Props { export const LinodeRebuildForm = (props: Props) => { const { linode, onSuccess } = props; const { enqueueSnackbar } = useSnackbar(); - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); + const search = useSearch({ strict: false }); const [type, setType] = useState('Image'); @@ -67,7 +66,7 @@ export const LinodeRebuildForm = (props: Props) => { }, defaultValues: { disk_encryption: linode.disk_encryption, - image: queryParams.get(REBUILD_LINODE_IMAGE_PARAM_NAME) ?? undefined, + image: search.selectedImageId ?? undefined, metadata: { user_data: null, }, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 20509740b44..e317f26eaae 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -256,7 +256,7 @@ export const LinodeResize = (props: Props) => { Auto Resize Disk {disksError ? ( { /> ) : isSmaller ? ( { /> ) : !_shouldEnableAutoResizeDiskOption ? ( { During a warm resize, your Linode will remain @@ -97,7 +97,7 @@ export const UnifiedMigrationPanel = (props: Props) => { value={migrationTypeOptions.cold} /> { - it('should render an Image Select', () => { - renderWithThemeAndHookFormContext({ + it('should render an Image Select', async () => { + const component = wrapWithFormContext({ component: , }); + const { getByRole } = await renderWithThemeAndRouter(component); - expect(screen.getByRole('combobox')); - expect(screen.getByRole('combobox')).toBeEnabled(); + expect(getByRole('combobox')).toBeVisible(); + expect(getByRole('combobox')).toBeEnabled(); }); it('should render a password error if defined', async () => { const errorMessage = 'Unable to set password.'; - const { findByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , }); + const { findByText } = await renderWithThemeAndRouter(component); const passwordError = await findByText(errorMessage, undefined, { timeout: 2500, @@ -42,12 +46,14 @@ describe('ImageAndPassword', () => { expect(passwordError).toBeVisible(); }); it('should render an SSH Keys section', async () => { - const { getByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , }); + const { getByText } = await renderWithThemeAndRouter(component); expect(getByText('SSH Keys', { selector: 'h2' })).toBeVisible(); }); + it('should render ssh keys for each user on the account', async () => { const users = accountUserFactory.buildList(3, { ssh_keys: ['my-ssh-key'] }); @@ -57,9 +63,10 @@ describe('ImageAndPassword', () => { }) ); - const { findByText } = renderWithThemeAndHookFormContext({ + const component = wrapWithFormContext({ component: , }); + const { findByText } = await renderWithThemeAndRouter(component); for (const user of users) { const username = await findByText(user.username); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx index 6922a1ee14a..df20f1f0b54 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx @@ -24,7 +24,6 @@ describe('InterfaceSelect', () => { handleChange: vi.fn(), ipamAddress: null, label: null, - readOnly: false, region: 'us-east', regionHasVLANs: true, slotNumber: 0, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx index 6407598fa3d..8e0f74fab89 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx @@ -33,7 +33,6 @@ interface InterfaceSelectProps extends VPCState { ipamAddress?: null | string; label?: null | string; purpose: ExtendedPurpose; - readOnly: boolean; region?: string; regionHasVLANs?: boolean; regionHasVPCs?: boolean; @@ -77,7 +76,6 @@ export const InterfaceSelect = (props: InterfaceSelectProps) => { label, nattedIPv4Address, purpose, - readOnly, region, regionHasVLANs, regionHasVPCs, @@ -249,7 +247,6 @@ export const InterfaceSelect = (props: InterfaceSelectProps) => { const jsxSelectVLAN = ( { const jsxIPAMForVLAN = ( { ) } placeholder="Select an Interface" - textFieldProps={{ - disabled: readOnly, - }} value={purposeOptions.find( (thisOption) => thisOption.value === purpose )} diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.test.tsx new file mode 100644 index 00000000000..6de37e71071 --- /dev/null +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.test.tsx @@ -0,0 +1,120 @@ +import 'src/mocks/testServer'; + +import React from 'react'; + +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; + +import LinodeSettings from './LinodeSettings'; + +const queryMocks = vi.hoisted(() => ({ + useFlags: vi.fn().mockReturnValue({}), + useParams: vi.fn().mockReturnValue({}), + userPermissions: vi.fn(() => ({ + permissions: { + update_linode: false, + delete_linode: false, + }, + })), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +vi.mock('src/hooks/useFlags', () => { + const actual = vi.importActual('src/hooks/useFlags'); + return { + ...actual, + useFlags: queryMocks.useFlags, + }; +}); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useParams: queryMocks.useParams, + }; +}); + +describe('LinodeSettings', () => { + beforeEach(() => { + queryMocks.useParams.mockReturnValue({ + linodeId: '1', + }); + }); + + it('should disable "Save" button for Linode Label if the user does not have update_linode permission', async () => { + const { queryByText, queryByTestId } = await renderWithThemeAndRouter( + + ); + + expect(queryByText('Linode Label')).toBeVisible(); + + const saveLabelBtn = queryByTestId('label-save'); + expect(saveLabelBtn).toBeInTheDocument(); + + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + }); + it('should disable "Save" button for Host Maintenance Policy if the user does not have update_linode permission', async () => { + queryMocks.useFlags.mockReturnValue({ + vmHostMaintenance: { enabled: true }, + }); + + const { queryByText, queryByTestId } = await renderWithThemeAndRouter( + + ); + + expect(queryByText('Maintenance Policy')).toBeVisible(); + + const saveLabelBtn = queryByTestId('label-save'); + expect(saveLabelBtn).toBeInTheDocument(); + + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + }); + it('should disable "Save" button for Shutdown Watchdog if the user does not have update_linode permission', async () => { + const { queryByText, getByTestId } = await renderWithThemeAndRouter( + + ); + + expect(queryByText('Shutdown Watchdog')).toBeVisible(); + + const saveLabelBtn = getByTestId('watchdog-toggle'); + expect(saveLabelBtn).toBeInTheDocument(); + + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + }); + it('should disable "Save" button for Delete Linode if the user does not have delete_linode permission', async () => { + const { queryByText } = await renderWithThemeAndRouter(); + + expect(queryByText('Delete Linode')).toBeVisible(); + + const deleteBtn = queryByText('Delete'); + expect(deleteBtn).toBeInTheDocument(); + + expect(deleteBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should enable all buttons if the user has update_linode and delete_linode permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + update_linode: true, + delete_linode: true, + }, + }); + const { queryByText, getByLabelText, getByTestId } = + await renderWithThemeAndRouter(); + + const saveLabelBtn = getByLabelText('Label'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const saveToggle = getByTestId('watchdog-toggle'); + expect(saveToggle).toBeInTheDocument(); + expect(saveToggle).not.toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = queryByText('Delete'); + expect(deleteBtn).toBeInTheDocument(); + expect(deleteBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); +}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.tsx index 5ff99bff693..ef25ae07927 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.tsx @@ -1,8 +1,8 @@ -import { useGrants } from '@linode/queries'; +import { useParams } from '@tanstack/react-router'; import * as React from 'react'; -import { useParams } from 'react-router-dom'; import { useVMHostMaintenanceEnabled } from 'src/features/Account/utils'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { LinodeSettingsDeletePanel } from './LinodeSettingsDeletePanel'; import { LinodeSettingsLabelPanel } from './LinodeSettingsLabelPanel'; @@ -11,30 +11,38 @@ import { LinodeSettingsPasswordPanel } from './LinodeSettingsPasswordPanel'; import { LinodeWatchdogPanel } from './LinodeWatchdogPanel'; const LinodeSettings = () => { - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); - const { data: grants } = useGrants(); - const { isVMHostMaintenanceEnabled } = useVMHostMaintenanceEnabled(); - const isReadOnly = - grants !== undefined && - grants?.linode.find((grant) => grant.id === id)?.permissions === - 'read_only'; + const { permissions } = usePermissions( + 'linode', + ['update_linode', 'delete_linode'], + id + ); return ( <> - - + + {isVMHostMaintenanceEnabled && ( )} - - + + ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx index e21c660dcfd..07f2b817797 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx @@ -1,7 +1,7 @@ import { useDeleteLinodeMutation, useLinodeQuery } from '@linode/queries'; import { Accordion, Button, Notice, Typography } from '@linode/ui'; +import { useNavigate } from '@tanstack/react-router'; import * as React from 'react'; -import { useHistory } from 'react-router-dom'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { useEventsPollingActions } from 'src/queries/events/events'; @@ -22,14 +22,16 @@ export const LinodeSettingsDeletePanel = (props: Props) => { const { checkForNewEvents } = useEventsPollingActions(); - const history = useHistory(); + const navigate = useNavigate(); const [open, setOpen] = React.useState(false); const onDelete = async () => { await deleteLinode(); checkForNewEvents(); - history.push('/linodes'); + navigate({ + to: '/linodes', + }); }; return ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsMaintenancePolicyPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsMaintenancePolicyPanel.tsx index 36464dcc3c6..8905beee7ce 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsMaintenancePolicyPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsMaintenancePolicyPanel.tsx @@ -1,12 +1,5 @@ import { useLinodeQuery, useLinodeUpdateMutation } from '@linode/queries'; -import { - Accordion, - BetaChip, - Box, - Button, - Stack, - Typography, -} from '@linode/ui'; +import { Accordion, Box, Button, Notice, Stack, Typography } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -16,19 +9,20 @@ import { MAINTENANCE_POLICY_DESCRIPTION, MAINTENANCE_POLICY_LEARN_MORE_URL, MAINTENANCE_POLICY_TITLE, + UPCOMING_MAINTENANCE_NOTICE, } from 'src/components/MaintenancePolicySelect/constants'; import { MaintenancePolicySelect } from 'src/components/MaintenancePolicySelect/MaintenancePolicySelect'; +import { getFeatureChip } from 'src/features/Account/MaintenancePolicy'; import { useFlags } from 'src/hooks/useFlags'; +import { useUpcomingMaintenanceNotice } from 'src/hooks/useUpcomingMaintenanceNotice'; -import type { AccountSettings } from '@linode/api-v4'; +import type { MaintenancePolicyValues } from 'src/hooks/useUpcomingMaintenanceNotice.ts'; interface Props { isReadOnly?: boolean; linodeId: number; } -type MaintenancePolicyValues = Pick; - export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => { const { isReadOnly, linodeId } = props; const { data: linode } = useLinodeQuery(linodeId); @@ -51,6 +45,12 @@ export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => { values, }); + const { showUpcomingMaintenanceNotice } = useUpcomingMaintenanceNotice({ + control, + entityId: linodeId, + entityType: 'linode', + }); + const onSubmit = async (values: MaintenancePolicyValues) => { try { await updateLinode(values); @@ -68,7 +68,7 @@ export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => { heading={ <> {MAINTENANCE_POLICY_TITLE}{' '} - {flags.vmHostMaintenance?.beta && } + {getFeatureChip(flags.vmHostMaintenance || {})} } > @@ -78,6 +78,12 @@ export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => { {MAINTENANCE_POLICY_DESCRIPTION}{' '} Learn more. + {showUpcomingMaintenanceNotice && ( + + This Linode has upcoming scheduled maintenance.{' '} + {UPCOMING_MAINTENANCE_NOTICE} + + )} ({ + userPermissions: vi.fn(() => ({ + permissions: { + password_reset_linode: false, + reset_linode_disk_root_password: false, + }, + })), + useTypeQuery: vi.fn().mockReturnValue({ + data: null, + }), + useLinodeQuery: vi.fn().mockReturnValue({}), +})); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useTypeQuery: queryMocks.useTypeQuery, + useLinodeQuery: queryMocks.useLinodeQuery, + }; +}); + +describe('LinodeSettingsPasswordPanel', () => { + it('should render component', async () => { + const { getByText } = renderWithTheme( + + ); + + expect(getByText('Reset Root Password')).toBeVisible(); + }); + + it('should disable "Save" button for Reset Root Password if the user does not have password_reset_linode permission for a bare metal instance', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: metal, + }); + + const { getByTestId } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should disable "Save" button for Reset Root Password if the user has password_reset_linode permission for a bare metal instance, but linode is running', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: metal, + }); + + queryMocks.useLinodeQuery.mockReturnValue({ + data: mockPoweredOnLinode, + }); + + queryMocks.userPermissions.mockReturnValue({ + permissions: { + password_reset_linode: true, + reset_linode_disk_root_password: false, + }, + }); + + const { getByTestId } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should disable "Save" button for Reset Root Password if the user does not have reset_linode_disk_root_password permission for a normal instance', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: standard, + }); + + const { getByTestId, getByPlaceholderText } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + + const selectDisk = getByPlaceholderText('Select a Disk'); + expect(selectDisk).toBeInTheDocument(); + expect(selectDisk).toBeDisabled(); + }); + + it('should disable "Save" button for Reset Root Password if the user has reset_linode_disk_root_password permission for a normal instance, but linode is running', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: standard, + }); + + queryMocks.useLinodeQuery.mockReturnValue({ + data: mockPoweredOnLinode, + }); + + queryMocks.userPermissions.mockReturnValue({ + permissions: { + password_reset_linode: false, + reset_linode_disk_root_password: true, + }, + }); + + const { getByTestId, getByPlaceholderText } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).toHaveAttribute('aria-disabled', 'true'); + + const selectDisk = getByPlaceholderText('Select a Disk'); + expect(selectDisk).toBeInTheDocument(); + expect(selectDisk).toBeEnabled(); + }); + + it('should enable "Save" button for Reset Root Password if the user has password_reset_linode permission for a bare metal instance, and linode is offline', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: metal, + }); + + queryMocks.useLinodeQuery.mockReturnValue({ + data: mockPoweredOffLinode, + }); + + queryMocks.userPermissions.mockReturnValue({ + permissions: { + password_reset_linode: true, + reset_linode_disk_root_password: false, + }, + }); + + const { getByTestId } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); + + it('should enable "Save" button for Reset Root Password if the user has reset_linode_disk_root_password permission for a normal instance, and linode is offline', async () => { + queryMocks.useTypeQuery.mockReturnValue({ + data: standard, + }); + + queryMocks.useLinodeQuery.mockReturnValue({ + data: mockPoweredOffLinode, + }); + + queryMocks.userPermissions.mockReturnValue({ + permissions: { + password_reset_linode: false, + reset_linode_disk_root_password: true, + }, + }); + + const { getByTestId, getByPlaceholderText } = renderWithTheme( + + ); + + const saveLabelBtn = getByTestId('password - save'); + expect(saveLabelBtn).toBeInTheDocument(); + expect(saveLabelBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const selectDisk = getByPlaceholderText('Select a Disk'); + expect(selectDisk).toBeInTheDocument(); + expect(selectDisk).toBeEnabled(); + }); +}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx index 015f49d694b..caae83d2f28 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx @@ -11,6 +11,7 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { getErrorMap } from 'src/utilities/errorUtils'; const PasswordInput = React.lazy(() => @@ -20,14 +21,19 @@ const PasswordInput = React.lazy(() => ); interface Props { - isReadOnly?: boolean; linodeId: number; } export const LinodeSettingsPasswordPanel = (props: Props) => { - const { isReadOnly, linodeId } = props; + const { linodeId } = props; const { data: linode } = useLinodeQuery(linodeId); + const { permissions } = usePermissions( + 'linode', + ['password_reset_linode', 'reset_linode_disk_root_password'], + linodeId + ); + const { data: disks, error: disksError, @@ -59,6 +65,10 @@ export const LinodeSettingsPasswordPanel = (props: Props) => { const isBareMetalInstance = type?.class === 'metal'; + const isReadOnly = isBareMetalInstance + ? !permissions.password_reset_linode + : !permissions.reset_linode_disk_root_password; + const isLoading = isBareMetalInstance ? isLinodePasswordLoading : isDiskPasswordLoading; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx index 1f250299659..bc1b3054bd3 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx @@ -61,6 +61,7 @@ export const LinodeWatchdogPanel = (props: Props) => { updateLinode({ watchdog_enabled: checked }) } diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx index 90a8aeb06ca..9939cc51fa1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx @@ -208,7 +208,7 @@ export const VPCPanel = (props: VPCPanelProps) => { VPC diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.test.tsx index e591146c959..8471c7a38ca 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.test.tsx @@ -1,25 +1,15 @@ -import { fireEvent } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { linodeDiskFactory } from 'src/factories'; -import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; +import { + mockMatchMedia, + renderWithThemeAndRouter, +} from 'src/utilities/testHelpers'; import { LinodeDiskActionMenu } from './LinodeDiskActionMenu'; -const mockHistory = { - push: vi.fn(), -}; - -// Mock useHistory -vi.mock('react-router-dom', async () => { - const actual = await vi.importActual('react-router-dom'); - return { - ...actual, - useHistory: vi.fn(() => mockHistory), - }; -}); - const defaultProps = { disk: linodeDiskFactory.build(), linodeId: 0, @@ -29,11 +19,38 @@ const defaultProps = { onResize: vi.fn(), }; -describe('LinodeActionMenu', () => { +const navigate = vi.fn(); +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(() => navigate), + useParams: vi.fn(() => ({})), + userPermissions: vi.fn(() => ({ + permissions: { + update_linode_disk: false, + resize_linode_disk: false, + delete_linode_disk: false, + clone_linode: false, + }, + })), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useParams: queryMocks.useParams, + }; +}); + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +describe('LinodeDiskActionMenu', () => { beforeEach(() => mockMatchMedia()); it('should contain all basic actions when the Linode is running', async () => { - const { getByLabelText, getByText } = renderWithTheme( + const { getByLabelText, getByText } = await renderWithThemeAndRouter( ); @@ -56,20 +73,8 @@ describe('LinodeActionMenu', () => { } }); - it('should show inline actions for md screens', async () => { - mockMatchMedia(false); - - const { getByText } = renderWithTheme( - - ); - - ['Rename', 'Resize'].forEach((action) => - expect(getByText(action)).toBeVisible() - ); - }); - it('should hide inline actions for sm screens', async () => { - const { queryByText } = renderWithTheme( + const { queryByText } = await renderWithThemeAndRouter( ); @@ -79,7 +84,7 @@ describe('LinodeActionMenu', () => { }); it('should allow performing actions', async () => { - const { getByLabelText, getByText } = renderWithTheme( + const { getByLabelText, getByText } = await renderWithThemeAndRouter( ); @@ -89,18 +94,19 @@ describe('LinodeActionMenu', () => { await userEvent.click(actionMenuButton); - await userEvent.click(getByText('Rename')); - expect(defaultProps.onRename).toHaveBeenCalled(); - - await userEvent.click(getByText('Resize')); - expect(defaultProps.onResize).toHaveBeenCalled(); - - await userEvent.click(getByText('Delete')); - expect(defaultProps.onDelete).toHaveBeenCalled(); + expect(getByText('Rename')).toBeVisible(); + expect(getByText('Resize')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); + expect(getByText('Create Disk Image')).toBeVisible(); + expect(getByText('Clone')).toBeVisible(); }); it('Create Disk Image should redirect to image create tab', async () => { - const { getByLabelText, getByText } = renderWithTheme( + queryMocks.useParams.mockReturnValue({ + linodeId: defaultProps.linodeId, + }); + + const { getByLabelText, getByText } = await renderWithThemeAndRouter( ); @@ -112,13 +118,28 @@ describe('LinodeActionMenu', () => { await userEvent.click(getByText('Create Disk Image')); - expect(mockHistory.push).toHaveBeenCalledWith( - `/images/create/disk?selectedLinode=${defaultProps.linodeId}&selectedDisk=${defaultProps.disk.id}` - ); + expect(navigate).toHaveBeenCalledWith({ + to: '/images/create/disk', + search: { + selectedLinode: String(defaultProps.linodeId), + selectedDisk: String(defaultProps.disk.id), + }, + }); }); it('Clone should redirect to clone page', async () => { - const { getByLabelText, getByText } = renderWithTheme( + queryMocks.userPermissions.mockReturnValue({ + permissions: { + ...queryMocks.userPermissions().permissions, + clone_linode: true, + }, + }); + + queryMocks.useParams.mockReturnValue({ + linodeId: defaultProps.linodeId, + }); + + const { getByLabelText, getByText } = await renderWithThemeAndRouter( ); @@ -130,15 +151,19 @@ describe('LinodeActionMenu', () => { await userEvent.click(getByText('Clone')); - expect(mockHistory.push).toHaveBeenCalledWith( - `/linodes/${defaultProps.linodeId}/clone/disks?selectedDisk=${defaultProps.disk.id}` - ); + expect(navigate).toHaveBeenCalledWith({ + to: `/linodes/${defaultProps.linodeId}/clone/disks`, + search: { + selectedDisk: String(defaultProps.disk.id), + }, + }); }); it('should disable Resize and Delete when the Linode is running', async () => { - const { getAllByLabelText, getByLabelText } = renderWithTheme( - - ); + const { getAllByLabelText, getByLabelText } = + await renderWithThemeAndRouter( + + ); const actionMenuButton = getByLabelText( `Action menu for Disk ${defaultProps.disk.label}` @@ -156,7 +181,7 @@ describe('LinodeActionMenu', () => { it('should disable Create Disk Image when the disk is a swap image', async () => { const disk = linodeDiskFactory.build({ filesystem: 'swap' }); - const { getByLabelText } = renderWithTheme( + const { getByLabelText } = await renderWithThemeAndRouter( ); @@ -173,4 +198,70 @@ describe('LinodeActionMenu', () => { fireEvent.click(tooltip); expect(tooltip).toBeVisible(); }); + + it('should disable all actions menu if the user does not have permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + update_linode_disk: false, + resize_linode_disk: false, + delete_linode_disk: false, + clone_linode: false, + }, + }); + + const { getByLabelText } = await renderWithThemeAndRouter( + + ); + + const actionMenuButton = getByLabelText( + `Action menu for Disk ${defaultProps.disk.label}` + ); + + await userEvent.click(actionMenuButton); + + const renameBtn = screen.getByTestId('Rename'); + expect(renameBtn).toHaveAttribute('aria-disabled', 'true'); + + const resizeBtn = screen.getByTestId('Resize'); + expect(resizeBtn).toHaveAttribute('aria-disabled', 'true'); + + const cloneBtn = screen.getByTestId('Clone'); + expect(cloneBtn).toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should enable all actions menu if the user has permissions', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + update_linode_disk: true, + resize_linode_disk: true, + delete_linode_disk: true, + clone_linode: true, + }, + }); + + const { getByLabelText } = await renderWithThemeAndRouter( + + ); + + const actionMenuButton = getByLabelText( + `Action menu for Disk ${defaultProps.disk.label}` + ); + + await userEvent.click(actionMenuButton); + + const renameBtn = screen.getByTestId('Rename'); + expect(renameBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const resizeBtn = screen.getByTestId('Resize'); + expect(resizeBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const cloneBtn = screen.getByTestId('Clone'); + expect(cloneBtn).not.toHaveAttribute('aria-disabled', 'true'); + + const deleteBtn = screen.getByTestId('Delete'); + expect(deleteBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx index 52bd76fe369..f4afddc1c84 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx @@ -1,15 +1,10 @@ -import { splitAt } from '@linode/utilities'; -import { useTheme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; +import { useNavigate } from '@tanstack/react-router'; import * as React from 'react'; -import { useHistory } from 'react-router-dom'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { sendEvent } from 'src/utilities/analytics/utils'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import type { Disk, Linode } from '@linode/api-v4'; -import type { Theme } from '@mui/material/styles'; import type { Action } from 'src/components/ActionMenu/ActionMenu'; interface Props { @@ -23,9 +18,7 @@ interface Props { } export const LinodeDiskActionMenu = (props: Props) => { - const theme = useTheme(); - const matchesSmDown = useMediaQuery(theme.breakpoints.down('md')); - const history = useHistory(); + const navigate = useNavigate(); const { disk, @@ -37,6 +30,17 @@ export const LinodeDiskActionMenu = (props: Props) => { readOnly, } = props; + const { permissions } = usePermissions( + 'linode', + [ + 'update_linode_disk', + 'resize_linode_disk', + 'delete_linode_disk', + 'clone_linode', + ], + linodeId + ); + const poweredOnTooltip = linodeStatus !== 'offline' ? 'Your Linode must be fully powered down in order to perform this action' @@ -49,12 +53,12 @@ export const LinodeDiskActionMenu = (props: Props) => { const actions: Action[] = [ { - disabled: readOnly, + disabled: !permissions.update_linode_disk, onClick: onRename, title: 'Rename', }, { - disabled: linodeStatus !== 'offline' || readOnly, + disabled: !permissions.resize_linode_disk || linodeStatus !== 'offline', onClick: onResize, title: 'Resize', tooltip: poweredOnTooltip, @@ -62,58 +66,40 @@ export const LinodeDiskActionMenu = (props: Props) => { { disabled: readOnly || !!swapTooltip, onClick: () => - history.push( - `/images/create/disk?selectedLinode=${linodeId}&selectedDisk=${disk.id}` - ), + navigate({ + to: `/images/create/disk`, + search: { + selectedLinode: String(linodeId), + selectedDisk: String(disk.id), + }, + }), title: 'Create Disk Image', tooltip: swapTooltip, }, { - disabled: readOnly, + disabled: !permissions.clone_linode, onClick: () => { - history.push( - `/linodes/${linodeId}/clone/disks?selectedDisk=${disk.id}` - ); + navigate({ + to: `/linodes/${linodeId}/clone/disks`, + search: { + selectedDisk: String(disk.id), + }, + }); }, title: 'Clone', }, { - disabled: linodeStatus !== 'offline' || readOnly, + disabled: !permissions.delete_linode_disk || linodeStatus !== 'offline', onClick: onDelete, title: 'Delete', tooltip: poweredOnTooltip, }, ]; - const splitActionsArrayIndex = matchesSmDown ? 0 : 2; - const [inlineActions, menuActions] = splitAt(splitActionsArrayIndex, actions); - return ( - <> - {!matchesSmDown && - inlineActions.map((action) => ( - - sendEvent({ - action: `Open:tooltip`, - category: `Disk ${action.title} Flow`, - label: `${action.title} help icon tooltip`, - }) - : undefined - } - /> - ))} - - + ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.test.tsx index 6464c4a1800..939a7fb46b7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.test.tsx @@ -1,27 +1,81 @@ -import { linodeFactory } from '@linode/utilities'; +import { screen } from '@testing-library/react'; import React from 'react'; import { linodeDiskFactory } from 'src/factories'; -import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { LinodeDisks } from './LinodeDisks'; +const mockDisks = [{ id: 1, label: 'Disk 1', size: 5000 }]; + +const mockLinode = { + id: 123, + specs: { disk: 10000 }, +}; + +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: queryMocks.userPermissions, +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useAllLinodeDisksQuery: queryMocks.useAllLinodeDisksQuery, + useLinodeQuery: queryMocks.useLinodeQuery, + }; +}); + +const queryMocks = vi.hoisted(() => ({ + userPermissions: vi.fn(() => ({ + permissions: { + create_linode_disk: false, + }, + })), + useAllLinodeDisksQuery: vi.fn(() => ({ + data: mockDisks, + isLoading: false, + error: null, + })), + useLinodeQuery: vi.fn(() => ({ + data: mockLinode, + isLoading: false, + error: null, + })), + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + describe('LinodeDisks', () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + it('should render', async () => { const disks = linodeDiskFactory.buildList(5); - server.use( - http.get('*/linode/instances/:id', () => { - return HttpResponse.json(linodeFactory.build()); - }), - http.get('*/linode/instances/:id/disks', () => { - return HttpResponse.json(makeResourcePage(disks)); - }) - ); + queryMocks.useAllLinodeDisksQuery.mockReturnValue({ + data: disks, + isLoading: false, + error: null, + }); - const { findByText, getByText } = renderWithTheme(); + const { findByText, getByText } = await renderWithThemeAndRouter( + + ); // Verify heading renders expect(getByText('Disks')).toBeVisible(); @@ -31,4 +85,62 @@ describe('LinodeDisks', () => { await findByText(disk.label); } }); + + it('should disable "add a disk" button if the user does not have a create_linode_disk permissions and has free disk space', async () => { + renderWithThemeAndRouter(); + + const addDiskBtn = screen.getByText('Add a Disk'); + expect(addDiskBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should enable "add a disk" button if the user has a create_linode_disk permissions and has free disk space', async () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + create_linode_disk: true, + }, + }); + + renderWithThemeAndRouter(); + + const addDiskBtn = screen.getByText('Add a Disk'); + expect(addDiskBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); + + it('should disable the "Add a Disk" button when there is no free disk space', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + create_linode_disk: true, + }, + }); + + queryMocks.useAllLinodeDisksQuery.mockReturnValue({ + data: [{ id: 1, label: 'Disk 1', size: 15000 }], + isLoading: false, + error: null, + }); + + renderWithThemeAndRouter(); + + const addDiskBtn = screen.getByText('Add a Disk'); + expect(addDiskBtn).toHaveAttribute('aria-disabled', 'true'); + }); + + it('should enable the "Add a Disk" button when there is free disk space', () => { + queryMocks.userPermissions.mockReturnValue({ + permissions: { + create_linode_disk: true, + }, + }); + + queryMocks.useAllLinodeDisksQuery.mockReturnValue({ + data: [{ id: 1, label: 'Disk 1', size: 5000 }], + isLoading: false, + error: null, + }); + + renderWithThemeAndRouter(); + + const addDiskBtn = screen.getByText('Add a Disk'); + expect(addDiskBtn).not.toHaveAttribute('aria-disabled', 'true'); + }); }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx index 24d6766a698..22f5aadd70f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx @@ -6,11 +6,10 @@ import { import { Box, Button, Paper, Stack, Typography } from '@linode/ui'; import { Hidden } from '@linode/ui'; import Grid from '@mui/material/Grid'; +import { useParams } from '@tanstack/react-router'; import * as React from 'react'; -import { useParams } from 'react-router-dom'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; -import OrderBy from 'src/components/OrderBy'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; @@ -22,6 +21,8 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; import { TableRowError } from 'src/components/TableRowError/TableRowError'; import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; import { TableSortCell } from 'src/components/TableSortCell'; +import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; +import { useOrderV2 } from 'src/hooks/useOrderV2'; import { sendEvent } from 'src/utilities/analytics/utils'; import { addUsedDiskSpace } from '../utilities'; @@ -35,13 +36,15 @@ import type { Disk } from '@linode/api-v4/lib/linodes'; export const LinodeDisks = () => { const disksHeaderRef = React.useRef(null); - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); const { data: disks, error, isLoading } = useAllLinodeDisksQuery(id); const { data: linode } = useLinodeQuery(id); const { data: grants } = useGrants(); + const { permissions } = usePermissions('linode', ['create_linode_disk'], id); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false); const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState(false); const [isRenameDrawerOpen, setIsRenameDrawerOpen] = React.useState(false); @@ -105,6 +108,19 @@ export const LinodeDisks = () => { )); }; + const { order, orderBy, handleOrderChange, sortedData } = useOrderV2({ + data: disks ?? [], + initialRoute: { + defaultOrder: { + order: 'asc', + orderBy: 'created', + }, + from: '/linodes/$linodeId/storage', + }, + preferenceKey: 'linode-disks', + prefix: 'linode-disks', + }); + return ( { /> - - {({ data: orderedData, handleOrderChange, order, orderBy }) => ( - - {({ - count, - data: paginatedData, - handlePageChange, - handlePageSizeChange, - page, - pageSize, - }) => { - return ( - - - - - - - Label - - - Type - - - Size - - - - Created - - - - - - {renderTableContent(paginatedData)} -
- - - - ); - }} - - )} - + + + {({ + count, + data: sortedData, + handlePageChange, + handlePageSizeChange, + page, + pageSize, + }) => { + return ( + + + + + + + Label + + + Type + + + Size + + + + Created + + + + + + {renderTableContent(sortedData)} +
+ + + + ); + }} + + { +const queryMocks = vi.hoisted(() => ({ + useNavigate: vi.fn(), + useParams: vi.fn(), + useSearch: vi.fn(), +})); + +vi.mock('@tanstack/react-router', async () => { + const actual = await vi.importActual('@tanstack/react-router'); + return { + ...actual, + useNavigate: queryMocks.useNavigate, + useSearch: queryMocks.useSearch, + useParams: queryMocks.useParams, + }; +}); + +describe('LinodeVolumes', async () => { + beforeEach(() => { + queryMocks.useNavigate.mockReturnValue(vi.fn()); + queryMocks.useSearch.mockReturnValue({}); + queryMocks.useParams.mockReturnValue({}); + }); + const volumes = volumeFactory.buildList(3); it('should render', async () => { @@ -25,7 +47,7 @@ describe('LinodeVolumes', () => { }) ); - const { findByText } = renderWithTheme(); + const { findByText } = await renderWithThemeAndRouter(); expect(await findByText('Volumes')).toBeVisible(); }); @@ -51,7 +73,7 @@ describe('LinodeVolumes', () => { }) ); - const { findByText } = renderWithTheme(, { + const { findByText } = await renderWithThemeAndRouter(, { flags: { blockStorageEncryption: true }, }); @@ -78,7 +100,7 @@ describe('LinodeVolumes', () => { }) ); - const { queryByText } = renderWithTheme(, { + const { queryByText } = await renderWithThemeAndRouter(, { flags: { blockStorageEncryption: false }, }); @@ -105,7 +127,7 @@ describe('LinodeVolumes', () => { }) ); - const { queryByText } = renderWithTheme(, { + const { queryByText } = await renderWithThemeAndRouter(, { flags: { blockStorageEncryption: true }, }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx index ebda33905bf..70225571e4f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx @@ -5,8 +5,8 @@ import { } from '@linode/queries'; import { Box, Button, Paper, Typography } from '@linode/ui'; import { Hidden } from '@linode/ui'; +import { useParams } from '@tanstack/react-router'; import * as React from 'react'; -import { useParams } from 'react-router-dom'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; @@ -29,15 +29,15 @@ import { VolumeDetailsDrawer } from 'src/features/Volumes/Drawers/VolumeDetailsD import { LinodeVolumeAddDrawer } from 'src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAddDrawer'; import { VolumeTableRow } from 'src/features/Volumes/VolumeTableRow'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; -import { useOrder } from 'src/hooks/useOrder'; -import { usePagination } from 'src/hooks/usePagination'; +import { useOrderV2 } from 'src/hooks/useOrderV2'; +import { usePaginationV2 } from 'src/hooks/usePaginationV2'; import type { Volume } from '@linode/api-v4'; export const preferenceKey = 'linode-volumes'; export const LinodeVolumes = () => { - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); const { data: linode } = useLinodeQuery(id); @@ -48,20 +48,28 @@ export const LinodeVolumes = () => { id, }); - const { handleOrderChange, order, orderBy } = useOrder( - { - order: 'desc', - orderBy: 'label', + const { handleOrderChange, order, orderBy } = useOrderV2({ + initialRoute: { + defaultOrder: { + order: 'desc', + orderBy: 'label', + }, + from: '/linodes/$linodeId/storage', }, - `${preferenceKey}-order` - ); + preferenceKey: `${preferenceKey}-order`, + prefix: preferenceKey, + }); const filter = { ['+order']: order, ['+order_by']: orderBy, }; - const pagination = usePagination(1, preferenceKey); + const pagination = usePaginationV2({ + currentRoute: '/linodes/$linodeId/storage', + initialPage: 1, + preferenceKey, + }); const regions = useRegionsQuery().data ?? []; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx index 65648c59142..2101f1f2bed 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx @@ -1,24 +1,12 @@ import { useLinodeQuery } from '@linode/queries'; import { CircleProgress, ErrorState } from '@linode/ui'; -import { getQueryParamsFromQueryString } from '@linode/utilities'; -import { createLazyRoute } from '@tanstack/react-router'; +import { useLocation, useNavigate, useParams } from '@tanstack/react-router'; import * as React from 'react'; -import { - Redirect, - Route, - Switch, - useHistory, - useLocation, - useParams, - useRouteMatch, -} from 'react-router-dom'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { UpgradeInterfacesDialog } from './LinodeConfigs/UpgradeInterfaces/UpgradeInterfacesDialog'; -import type { LinodeConfigAndDiskQueryParams } from 'src/features/Linodes/types'; - const LinodesDetailHeader = React.lazy(() => import( 'src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader' @@ -36,28 +24,22 @@ const CloneLanding = React.lazy(() => ); export const LinodeDetail = () => { - const { path, url } = useRouteMatch(); - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); + const navigate = useNavigate(); const location = useLocation(); - const history = useHistory(); - - const queryParams = - getQueryParamsFromQueryString( - location.search - ); - const pathname = location.pathname; + const isCloneRoute = location.pathname.includes('/clone'); const closeUpgradeInterfacesDialog = () => { - const newPath = pathname.includes('upgrade-interfaces') - ? pathname.split('/').slice(0, -1).join('/') - : pathname; - history.replace(newPath); + const newPath = + location.pathname === + `/linodes/${linodeId}/configurations/upgrade-interfaces` + ? location.pathname.split('/').slice(0, -1).join('/') + : location.pathname; + navigate({ to: newPath }); }; - const id = Number(linodeId); - - const { data: linode, error, isLoading } = useLinodeQuery(id); + const { data: linode, error, isLoading } = useLinodeQuery(linodeId); if (error) { return ; @@ -69,45 +51,28 @@ export const LinodeDetail = () => { return ( }> - - {/* + {/* Currently, the "Clone Configs and Disks" feature exists OUTSIDE of LinodeDetail. Or... at least it appears that way to the user. We would like it to live WITHIN LinodeDetail, though, because we'd like to use the same context, so we don't have to reload all the configs, disks, etc. once we get to the CloneLanding page. - */} - - {['resize', 'rescue', 'migrate', 'upgrade', 'rebuild'].map((path) => ( - - ))} - ( - - - - - - )} - /> - + */} + {isCloneRoute ? ( + + ) : ( + <> + + + + )} + ); }; - -export const linodeDetailLazyRoute = createLazyRoute('/linodes/$linodeId')({ - component: LinodeDetail, -}); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx index b9b38bf8613..b8ad3bb9eef 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx @@ -1,13 +1,9 @@ import { useLinodeQuery, useLinodeUpdateMutation } from '@linode/queries'; import { useAllAccountMaintenanceQuery } from '@linode/queries'; import { CircleProgress, ErrorState } from '@linode/ui'; -import { - getQueryParamsFromQueryString, - scrollErrorIntoView, - useEditableLabelState, -} from '@linode/utilities'; +import { scrollErrorIntoView, useEditableLabelState } from '@linode/utilities'; +import { useNavigate, useParams, useSearch } from '@tanstack/react-router'; import * as React from 'react'; -import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import { LandingHeader } from 'src/components/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; @@ -35,18 +31,7 @@ import Notifications from './Notifications'; import { UpgradeVolumesDialog } from './UpgradeVolumesDialog'; import type { APIError } from '@linode/api-v4/lib/types'; -import type { BaseQueryParams } from '@linode/utilities'; import type { Action } from 'src/features/Linodes/PowerActionsDialogOrDrawer'; -import type { BooleanString } from 'src/features/Linodes/types'; - -interface QueryParams extends BaseQueryParams { - delete: BooleanString; - migrate: BooleanString; - rebuild: BooleanString; - rescue: BooleanString; - resize: BooleanString; - upgrade: BooleanString; -} export const LinodeDetailHeader = () => { // Several routes that used to have dedicated pages (e.g. /resize, /rescue) @@ -54,16 +39,11 @@ export const LinodeDetailHeader = () => { // modal-related query params (and the older /:subpath routes before the redirect // logic changes the URL) to determine if a modal should be open when this component // is first rendered. - const location = useLocation(); - const queryParams = getQueryParamsFromQueryString( - location.search - ); - - const match = useRouteMatch<{ linodeId: string; subpath: string }>({ - path: '/linodes/:linodeId/:subpath?', - }); + const search = useSearch({ from: '/linodes/$linodeId' }); + const navigate = useNavigate(); - const matchedLinodeId = Number(match?.params?.linodeId ?? 0); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); + const matchedLinodeId = Number(linodeId ?? 0); const { data: linode, error, isLoading } = useLinodeQuery(matchedLinodeId); @@ -77,38 +57,30 @@ export const LinodeDetailHeader = () => { const [powerAction, setPowerAction] = React.useState('Reboot'); const [powerDialogOpen, setPowerDialogOpen] = React.useState(false); - const [deleteDialogOpen, setDeleteDialogOpen] = React.useState( - queryParams.delete === 'true' - ); + const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(search.delete); const [rebuildDialogOpen, setRebuildDialogOpen] = React.useState( - queryParams.rebuild === 'true' - ); - const [rescueDialogOpen, setRescueDialogOpen] = React.useState( - queryParams.rescue === 'true' - ); - const [resizeDialogOpen, setResizeDialogOpen] = React.useState( - queryParams.resize === 'true' + search.rebuild ); + const [rescueDialogOpen, setRescueDialogOpen] = React.useState(search.rescue); + const [resizeDialogOpen, setResizeDialogOpen] = React.useState(search.resize); const [migrateDialogOpen, setMigrateDialogOpen] = React.useState( - queryParams.migrate === 'true' + search.migrate ); const [enableBackupsDialogOpen, setEnableBackupsDialogOpen] = React.useState(false); - const isUpgradeVolumesDialogOpen = queryParams.upgrade === 'true'; - - const history = useHistory(); + const isUpgradeVolumesDialogOpen = search.upgrade; const closeDialogs = () => { // If the user is on a Linode detail tab with the modal open and they then close it, // change the URL to reflect just the tab they are on. if ( - queryParams.resize || - queryParams.rescue || - queryParams.rebuild || - queryParams.migrate || - queryParams.upgrade + search.resize || + search.rescue || + search.rebuild || + search.migrate || + search.upgrade ) { - history.replace({ search: undefined }); + navigate({ search: undefined }); } setPowerDialogOpen(false); @@ -244,36 +216,36 @@ export const LinodeDetailHeader = () => { linodeId={matchedLinodeId} linodeLabel={linode.label} onClose={closeDialogs} - onSuccess={() => history.replace('/linodes')} - open={deleteDialogOpen} + onSuccess={() => navigate({ to: '/linodes' })} + open={Boolean(deleteDialogOpen)} /> { - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const { data: linode } = useLinodeQuery(Number(linodeId)); const { data: notifications, refetch } = useNotificationsQuery(); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx index 93ee74d878d..e7550e3f896 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx @@ -4,26 +4,23 @@ import { useRegionsQuery, useTypeQuery, } from '@linode/queries'; +import { useIsLinodeAclpSubscribed } from '@linode/shared'; import { BetaChip, CircleProgress, ErrorState } from '@linode/ui'; import { isAclpSupportedRegion } from '@linode/utilities'; import Grid from '@mui/material/Grid'; +import { useParams } from '@tanstack/react-router'; import * as React from 'react'; -import { - matchPath, - useHistory, - useParams, - useRouteMatch, -} from 'react-router-dom'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; 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 { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList'; import { SMTPRestrictionText } from 'src/features/Linodes/SMTPRestrictionText'; import { useFlags } from 'src/hooks/useFlags'; +import { useTabs } from 'src/hooks/useTabs'; const LinodeMetrics = React.lazy(() => import('./LinodeMetrics/LinodeMetrics')); const LinodeNetworking = React.lazy(() => @@ -45,16 +42,10 @@ const LinodeSettings = React.lazy( ); const LinodesDetailNavigation = () => { - const { linodeId } = useParams<{ linodeId: string }>(); + const { linodeId } = useParams({ from: '/linodes/$linodeId' }); const id = Number(linodeId); const { data: linode, error } = useLinodeQuery(id); - const { url } = useRouteMatch(); - const history = useHistory(); const { aclpBetaServices } = useFlags(); - const { data: aclpPreferences } = usePreferences((preferences) => ({ - isAclpMetricsPreferenceBeta: preferences?.isAclpMetricsBeta, - isAclpAlertsPreferenceBeta: preferences?.isAclpAlertsBeta, - })); const { data: type } = useTypeQuery( linode?.type ?? '', @@ -79,76 +70,64 @@ const LinodesDetailNavigation = () => { regions, type: 'alerts', }); + const { data: isAclpMetricsPreferenceBeta } = usePreferences( + (preferences) => preferences?.isAclpMetricsBeta + ); - const tabs = [ + // In Edit flow, default alert mode is based on Linode's ACLP subscription status + const isLinodeAclpSubscribed = useIsLinodeAclpSubscribed(linode?.id, 'beta'); + const [isAclpAlertsBetaEditFlow, setIsAclpAlertsBetaEditFlow] = + React.useState(isLinodeAclpSubscribed); + + const { tabs, handleTabChange, tabIndex, getTabIndex } = useTabs([ { chip: aclpBetaServices?.linode?.metrics && isAclpMetricsSupportedRegionLinode && - aclpPreferences?.isAclpMetricsPreferenceBeta ? ( + isAclpMetricsPreferenceBeta ? ( ) : null, - routeName: `${url}/metrics`, + to: '/linodes/$linodeId/metrics', title: 'Metrics', }, { - routeName: `${url}/networking`, + to: '/linodes/$linodeId/networking', title: 'Network', }, { - hidden: isBareMetalInstance, - routeName: `${url}/storage`, + hide: isBareMetalInstance, + to: '/linodes/$linodeId/storage', title: 'Storage', }, { - hidden: isBareMetalInstance, - routeName: `${url}/configurations`, + hide: isBareMetalInstance, + to: '/linodes/$linodeId/configurations', title: 'Configurations', }, { - hidden: isBareMetalInstance, - routeName: `${url}/backup`, + hide: isBareMetalInstance, + to: '/linodes/$linodeId/backup', title: 'Backups', }, { - routeName: `${url}/activity`, + to: '/linodes/$linodeId/activity', title: 'Activity Feed', }, { chip: aclpBetaServices?.linode?.alerts && isAclpAlertsSupportedRegionLinode && - aclpPreferences?.isAclpAlertsPreferenceBeta ? ( + isAclpAlertsBetaEditFlow ? ( ) : null, - routeName: `${url}/alerts`, + to: '/linodes/$linodeId/alerts', title: 'Alerts', }, { - routeName: `${url}/settings`, + to: '/linodes/$linodeId/settings', title: 'Settings', }, - ].filter((thisTab) => !thisTab.hidden); - - const matches = (p: string) => { - return ( - Boolean(matchPath(p, { path: location.pathname })) || - location.pathname.includes(p) - ); - }; - - const getIndex = () => { - return Math.max( - tabs.findIndex((tab) => matches(tab.routeName)), - 0 - ); - }; - - const navToURL = (index: number) => { - history.push(tabs[index].routeName); - }; - - let idx = 0; + ]); if (error) { return ; @@ -161,9 +140,7 @@ const LinodesDetailNavigation = () => { return ( <> { }
- - + + }> - + { linodeId={id} /> - + {isBareMetalInstance ? null : ( <> - + - + - + )} - + - + - + diff --git a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBenner.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.test.tsx similarity index 91% rename from packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBenner.test.tsx rename to packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.test.tsx index dd3411a217c..42833415ad4 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBenner.test.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { notificationFactory, volumeFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { VolumesUpgradeBanner } from './VolumesUpgradeBanner'; @@ -24,7 +24,7 @@ describe('VolumesUpgradeBanner', () => { }) ); - const { findByText } = renderWithTheme( + const { findByText } = await renderWithThemeAndRouter( ); @@ -56,7 +56,7 @@ describe('VolumesUpgradeBanner', () => { }) ); - const { findByText } = renderWithTheme( + const { findByText } = await renderWithThemeAndRouter( ); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx index 7dbeb1a74dc..7fae0ec6dce 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx @@ -1,7 +1,7 @@ import { useLinodeVolumesQuery, useNotificationsQuery } from '@linode/queries'; import { Button, Notice, Stack, Typography } from '@linode/ui'; +import { useNavigate } from '@tanstack/react-router'; import React from 'react'; -import { useHistory } from 'react-router-dom'; import { Link } from 'src/components/Link'; import { getUpgradeableVolumeIds } from 'src/features/Volumes/utils'; @@ -11,7 +11,7 @@ interface Props { } export const VolumesUpgradeBanner = ({ linodeId }: Props) => { - const history = useHistory(); + const navigate = useNavigate(); const { data: volumesData } = useLinodeVolumesQuery(linodeId); const { data: notifications } = useNotificationsQuery(); @@ -29,29 +29,33 @@ export const VolumesUpgradeBanner = ({ linodeId }: Props) => { return ( - - - {numUpgradeableVolumes === 1 - ? 'A Volume attached to this Linode is ' - : 'Volumes attached to this Linode are '} - eligible for a free upgrade to high performance NVMe Block - Storage.{' '} - - Learn More - - . - - + + + {numUpgradeableVolumes === 1 + ? 'A Volume attached to this Linode is ' + : 'Volumes attached to this Linode are '} + eligible for a free upgrade to high performance NVMe Block + Storage.{' '} + + Learn More + + . + + - {!!disabledText && } + {!!disabledText && }
); diff --git a/packages/manager/src/features/Linodes/PublicIPAddressesTooltip.tsx b/packages/manager/src/features/Linodes/PublicIPAddressTooltip.tsx similarity index 74% rename from packages/manager/src/features/Linodes/PublicIPAddressesTooltip.tsx rename to packages/manager/src/features/Linodes/PublicIPAddressTooltip.tsx index c6efece34f3..0bc34507787 100644 --- a/packages/manager/src/features/Linodes/PublicIPAddressesTooltip.tsx +++ b/packages/manager/src/features/Linodes/PublicIPAddressTooltip.tsx @@ -14,19 +14,20 @@ const sxTooltipIcon = { paddingLeft: '4px', }; -export const PublicIPAddressesTooltip = ({ - hasPublicLinodeInterface, +export const PublicIPAddressTooltip = ({ + hasPublicInterface, isLinodeInterface, }: { - hasPublicLinodeInterface: boolean | undefined; + hasPublicInterface: boolean | undefined; isLinodeInterface: boolean; }) => { - const linodeInterfaceCopy = hasPublicLinodeInterface - ? PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_DEFAULT_ROUTE_TOOLTIP_TEXT - : PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_NOT_ASSIGNED_TOOLTIP_TEXT; + const linodeInterfaceCopy = + isLinodeInterface && hasPublicInterface + ? PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_DEFAULT_ROUTE_TOOLTIP_TEXT + : PUBLIC_IP_ADDRESSES_LINODE_INTERFACE_NOT_ASSIGNED_TOOLTIP_TEXT; return ( import('./LinodesLanding/LinodesLanding') ); -const LinodesDetail = React.lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then((module) => ({ - default: module.LinodeDetail, - })) -); -const LinodesCreate = React.lazy(() => - import('./LinodeCreate').then((module) => ({ - default: module.LinodeCreate, - })) -); - -export const LinodesRoutes = () => { - return ( - }> - - - - - - - - ); -}; // Light wrapper around LinodesLanding that injects "extended" Linodes (with // plan type and maintenance information). This extra data used to come from @@ -52,6 +31,10 @@ export const LinodesRoutes = () => { // I needed a Function Component. It seemed safer to do it this way instead of // refactoring LinodesLanding. export const LinodesLandingWrapper = React.memo(() => { + const navigate = useNavigate(); + const search = useSearch({ + strict: false, + }); const { data: accountMaintenanceData } = useAllAccountMaintenanceQuery( {}, PENDING_AND_IN_PROGRESS_MAINTENANCE_FILTER @@ -63,6 +46,7 @@ export const LinodesLandingWrapper = React.memo(() => { flags.gecko2?.la ); + const { permissions } = usePermissions('account', ['create_linode']); const [regionFilter, setRegionFilter] = React.useState( storage.regionFilter.get() ?? regionFilterOptions[0].value ); @@ -90,6 +74,38 @@ export const LinodesLandingWrapper = React.memo(() => { filteredLinodes ?? [] ); + const _linodesInTransition = linodesInTransition(events ?? []); + + const orderBy = useOrderV2({ + data: (filteredLinodesData ?? []).map((linode) => { + // Determine the priority of this Linode's status. + // We have to check for "Maintenance" and "Busy" since these are + // not actual Linode statuses (we derive them client-side). + let _status: ExtendedStatus = linode.status; + if (linode.maintenance) { + _status = 'maintenance'; + } else if (_linodesInTransition.has(linode.id)) { + _status = 'busy'; + } + + return { + ...linode, + _statusPriority: statusToPriority(_status), + displayStatus: linode.maintenance ? 'maintenance' : linode.status, + }; + }), + initialRoute: { + defaultOrder: { + order: 'asc', + orderBy: someLinodesHaveScheduledMaintenance + ? '_statusPriority' + : 'label', + }, + from: '/linodes', + }, + preferenceKey: 'linodes_view_style', + }); + const handleRegionFilter = (regionFilter: RegionFilter) => { setRegionFilter(regionFilter); storage.regionFilter.set(regionFilter); @@ -103,7 +119,11 @@ export const LinodesLandingWrapper = React.memo(() => { linodesInTransition={linodesInTransition(events ?? [])} linodesRequestError={error ?? undefined} linodesRequestLoading={allLinodesLoading} + navigate={navigate} + orderBy={orderBy} + permissions={permissions} regionFilter={regionFilter} + search={search} someLinodesHaveScheduledMaintenance={Boolean( someLinodesHaveScheduledMaintenance )} @@ -120,7 +140,3 @@ const generateLinodesXFilter = (regionFilter: RegionFilter | undefined) => { } return {}; }; - -export const linodesLandingLazyRoute = createLazyRoute('/linodes')({ - component: LinodesLandingWrapper, -}); diff --git a/packages/manager/src/features/Linodes/linodesLandingLazyRoute.ts b/packages/manager/src/features/Linodes/linodesLandingLazyRoute.ts new file mode 100644 index 00000000000..f25c9e1f41c --- /dev/null +++ b/packages/manager/src/features/Linodes/linodesLandingLazyRoute.ts @@ -0,0 +1,7 @@ +import { createLazyRoute } from '@tanstack/react-router'; + +import { LinodesLandingWrapper } from './'; + +export const linodesLandingLazyRoute = createLazyRoute('/linodes')({ + component: LinodesLandingWrapper, +}); diff --git a/packages/manager/src/features/Linodes/types.ts b/packages/manager/src/features/Linodes/types.ts index a55e038b791..ce7295268c1 100644 --- a/packages/manager/src/features/Linodes/types.ts +++ b/packages/manager/src/features/Linodes/types.ts @@ -18,5 +18,3 @@ export interface LinodeConfigAndDiskQueryParams extends BaseQueryParams { selectedDisk: string; selectedLinode: string; } - -export type BooleanString = 'false' | 'true'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx index 23d2622fd90..420f591658f 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx @@ -27,6 +27,12 @@ vi.mock('src/hooks/useFlags', () => { }; }); +vi.mock('src/features/IAM/hooks/usePermissions', () => ({ + usePermissions: vi.fn(() => ({ + permissions: { create_firewall: true }, + })), +})); + // Note: see nodeblaancers-create-in-complex-form.spec.ts for an e2e test of this flow describe('NodeBalancerCreate', () => { queryMocks.useFlags.mockReturnValue({ diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index e29149793c8..688d6af3f2c 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -584,7 +584,7 @@ const NodeBalancerCreate = () => { } if (nodeBalancerFields.vpcs?.length) { - summaryItems.push({ title: 'VPC Assigned' }); + summaryItems.push({ title: 'VPC' }); } if (nodeBalancerFields.firewall_id) { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.test.tsx index 16187a749a8..130fc9710b4 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.test.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.test.tsx @@ -4,7 +4,10 @@ import * as React from 'react'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; +import { + mockMatchMedia, + renderWithThemeAndRouter, +} from 'src/utilities/testHelpers'; import { NodeBalancersLanding } from './NodeBalancersLanding'; @@ -39,7 +42,7 @@ describe('NodeBalancersLanding', () => { }) ); - const { getByTestId, getByText } = renderWithTheme( + const { getByTestId, getByText } = await renderWithThemeAndRouter( ); @@ -64,7 +67,7 @@ describe('NodeBalancersLanding', () => { }) ); - const { getByTestId, getByText } = renderWithTheme( + const { getByTestId, getByText } = await renderWithThemeAndRouter( ); diff --git a/packages/manager/src/features/NodeBalancers/VPCPanel.tsx b/packages/manager/src/features/NodeBalancers/VPCPanel.tsx index 02e2662fc30..6111ce20ab6 100644 --- a/packages/manager/src/features/NodeBalancers/VPCPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/VPCPanel.tsx @@ -143,9 +143,12 @@ export const VPCPanel = (props: Props) => { placeholder="Subnet" textFieldProps={{ helperText: ( - - The VPC subnet for this NodeBalancer. - + + + Select a subnet in which to allocate the VPC CIDR for + the NodeBalancer. + + ), helperTextPosition: 'top', }} @@ -191,7 +194,7 @@ export const VPCPanel = (props: Props) => { Auto-assign IPs for this NodeBalancer { it('returns true if the feature is enabled', async () => { @@ -29,3 +32,29 @@ describe('useIsNodebalancerVPCEnabled', () => { }); }); }); + +describe('useIsNodebalancerIpv6Enabled', () => { + it('returns true if the feature is enabled', async () => { + const options = { flags: { nodebalancerIpv6: true } }; + + const { result } = renderHook(() => useIsNodebalancerIpv6Enabled(), { + wrapper: (ui) => wrapWithTheme(ui, options), + }); + + await waitFor(() => { + expect(result.current.isNodebalancerIpv6Enabled).toBe(true); + }); + }); + + it('returns false if the feature is NOT enabled', async () => { + const options = { flags: { nodebalancerIpv6: false } }; + + const { result } = renderHook(() => useIsNodebalancerIpv6Enabled(), { + wrapper: (ui) => wrapWithTheme(ui, options), + }); + + await waitFor(() => { + expect(result.current.isNodebalancerIpv6Enabled).toBe(false); + }); + }); +}); diff --git a/packages/manager/src/features/NodeBalancers/utils.ts b/packages/manager/src/features/NodeBalancers/utils.ts index 656a1150163..474478d4f10 100644 --- a/packages/manager/src/features/NodeBalancers/utils.ts +++ b/packages/manager/src/features/NodeBalancers/utils.ts @@ -234,3 +234,19 @@ export const useIsNodebalancerVPCEnabled = () => { return { isNodebalancerVPCEnabled: flags.nodebalancerVpc ?? false }; }; + +/** + * Returns whether or not features related to the NodeBalancer Dual Stack project + * should be enabled. + * + * Currently, this just uses the `nodebalancerIPv6` feature flag as a source of truth, + * but will eventually also look at account capabilities. + */ + +export const useIsNodebalancerIpv6Enabled = () => { + const flags = useFlags(); + + // @TODO NB-IPv6: check for customer tag/account capability when it exists + + return { isNodebalancerIpv6Enabled: flags.nodebalancerIpv6 ?? false }; +}; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx index 121a8549c38..8d16f3d4fa7 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx @@ -1,7 +1,6 @@ -import { screen } from '@testing-library/react'; import * as React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { renderWithThemeAndRouter } from 'src/utilities/testHelpers'; import { AccessKeyLanding } from './AccessKeyLanding'; @@ -14,8 +13,10 @@ const props = { }; describe('AccessKeyLanding', () => { - it('should render a table of access keys', () => { - renderWithTheme(); - expect(screen.getByTestId('data-qa-access-key-table')).toBeInTheDocument(); + it('should render a table of access keys', async () => { + const { getByTestId } = await renderWithThemeAndRouter( + + ); + expect(getByTestId('data-qa-access-key-table')).toBeInTheDocument(); }); }); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx index d41a5921107..aca4ba7d007 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx @@ -19,7 +19,7 @@ const LabelWithTooltip = ({ }: LabelWithTooltipProps) => ( {labelText} - {tooltipText && } + {tooltipText && } ); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx index 84230426508..1c335a5c583 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { buckets } from 'src/__data__/buckets'; +import { objectStorageBucketFactory } from 'src/factories'; import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers'; import { BucketTableRow } from './BucketTableRow'; @@ -8,7 +8,15 @@ import { BucketTableRow } from './BucketTableRow'; import type { BucketTableRowProps } from './BucketTableRow'; const mockOnRemove = vi.fn(); -const bucket = buckets[0]; +const bucket = objectStorageBucketFactory.build({ + cluster: 'us-east-1', + created: '2017-12-11T16:35:31', + hostname: 'test-bucket-001.alpha.linodeobjects.com', + label: 'test-bucket-001', + objects: 2, + region: 'us-east', + size: 5418860544, +}); describe('BucketTableRow', () => { const props: BucketTableRowProps = { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx index 6408c7bbeed..c9974a485fc 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx @@ -179,7 +179,7 @@ export const PlacementGroupsAssignLinodesDrawer = ( /> diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx index 16b1f00d0bf..5354308c00f 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx @@ -47,7 +47,7 @@ describe('PlacementGroups Summary', () => { expect(getByText('Placement Group Configuration')).toBeInTheDocument(); expect(getByText('Linodes')).toBeInTheDocument(); - expect(getByTestId('HelpOutlineIcon')).toBeInTheDocument(); + expect(getByTestId('tooltip-info-icon')).toBeInTheDocument(); expect(getByText('Placement Group Type')).toBeInTheDocument(); expect(getByText('Region')).toBeInTheDocument(); }); diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/ResetPassword.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/ResetPassword.tsx index bc6f64c4e86..6e240323ca3 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/ResetPassword.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/ResetPassword.tsx @@ -3,7 +3,7 @@ import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Link } from 'src/components/Link'; -import { LOGIN_ROOT } from 'src/constants'; +import { getLoginURL } from 'src/OAuth/constants'; interface Props { username?: string; @@ -20,7 +20,7 @@ export const ResetPassword = (props: Props) => { If you’ve forgotten your password or would like to change it, we’ll send you an e-mail with instructions. - + Reset Password diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.test.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.test.tsx index bb827321048..42507d9beef 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.test.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.test.tsx @@ -2,7 +2,7 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import { LOGIN_ROOT } from 'src/constants'; +import { getLoginURL } from 'src/OAuth/constants'; import { renderWithTheme } from 'src/utilities/testHelpers'; import { TPADialog } from './TPADialog'; @@ -84,7 +84,7 @@ describe('TPADialog', () => { expect(props.onClose).toBeCalled(); }); it('Should redirect to disable TPA', async () => { - const expectedUrl = `${LOGIN_ROOT}/tpa/disable`; + const expectedUrl = `${getLoginURL()}/tpa/disable`; const mockWindow = vi.spyOn(window, 'open').mockReturnValue(null); renderWithTheme(); @@ -109,7 +109,7 @@ describe('TPADialog', () => { }, newProvider: 'google', }; - const expectedUrl = `${LOGIN_ROOT}/tpa/enable/google`; + const expectedUrl = `${getLoginURL()}/tpa/enable/google`; const mockWindow = vi.spyOn(window, 'open').mockReturnValue(null); renderWithTheme(); @@ -134,7 +134,7 @@ describe('TPADialog', () => { }, newProvider: 'github', }; - const expectedUrl = `${LOGIN_ROOT}/tpa/enable/github`; + const expectedUrl = `${getLoginURL()}/tpa/enable/github`; const mockWindow = vi.spyOn(window, 'open').mockReturnValue(null); renderWithTheme(); diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.tsx index 2346f39f752..f7ac37140ea 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPADialog.tsx @@ -3,11 +3,12 @@ import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { LOGIN_ROOT } from 'src/constants'; import { useFlags } from 'src/hooks/useFlags'; +import { getLoginURL } from 'src/OAuth/constants'; import type { TPAProvider } from '@linode/api-v4/lib/profile'; import type { Provider } from 'src/featureFlags'; + export interface TPADialogProps { currentProvider: Provider; newProvider: TPAProvider; @@ -46,9 +47,13 @@ const handleLoginChange = (provider: TPAProvider) => { // If the selected provider is 'password', that means the user has decided // to disable TPA and revert to using Linode credentials return provider === 'password' - ? window.open(`${LOGIN_ROOT}/tpa/disable`, '_blank', 'noopener noreferrer') + ? window.open( + `${getLoginURL()}/tpa/disable`, + '_blank', + 'noopener noreferrer' + ) : window.open( - `${LOGIN_ROOT}/tpa/enable/` + `${provider}`, + `${getLoginURL()}/tpa/enable/` + `${provider}`, '_blank', 'noopener noreferrer' ); diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx index 8f289bbd95d..b8ee9bd5226 100644 --- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx +++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { timezones } from 'src/assets/timezones/timezones'; -import { getIsLoggedInAsCustomer } from 'src/OAuth/utils'; +import { getIsLoggedInAsCustomer } from 'src/OAuth/oauth'; import type { Profile } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.test.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.test.tsx index d06641c1ca7..7c1af2ec650 100644 --- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.test.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.test.tsx @@ -4,7 +4,10 @@ import * as React from 'react'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; -import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; +import { + mockMatchMedia, + renderWithThemeAndRouter, +} from 'src/utilities/testHelpers'; import { SSHKeys } from './SSHKeys'; @@ -21,7 +24,9 @@ describe('SSHKeys', () => { }) ); - const { getByTestId, getByText } = renderWithTheme(); + const { getByTestId, getByText } = await renderWithThemeAndRouter( + + ); // Check for table headers getByText('Label'); diff --git a/packages/manager/src/features/Search/useAPISearch.ts b/packages/manager/src/features/Search/useAPISearch.ts index 2bf33523c6e..b6ee0af983e 100644 --- a/packages/manager/src/features/Search/useAPISearch.ts +++ b/packages/manager/src/features/Search/useAPISearch.ts @@ -1,4 +1,5 @@ import { + useDatabasesInfiniteQuery, useDomainsInfiniteQuery, useFirewallsInfiniteQuery, useImagesInfiniteQuery, @@ -10,7 +11,6 @@ import { import { getAPIFilterFromQuery } from '@linode/search'; import { useDebouncedValue } from '@linode/utilities'; -import { useDatabasesInfiniteQuery } from 'src/queries/databases/databases'; import { useKubernetesClustersInfiniteQuery } from 'src/queries/kubernetes'; import { databaseToSearchableItem, diff --git a/packages/manager/src/features/Search/useClientSideSearch.ts b/packages/manager/src/features/Search/useClientSideSearch.ts index 6f22e047bb5..d0e8b099bbf 100644 --- a/packages/manager/src/features/Search/useClientSideSearch.ts +++ b/packages/manager/src/features/Search/useClientSideSearch.ts @@ -1,5 +1,6 @@ import { useAllAccountStackScriptsQuery, + useAllDatabasesQuery, useAllDomainsQuery, useAllFirewallsQuery, useAllImagesQuery, @@ -9,7 +10,6 @@ import { } from '@linode/queries'; import { useKubernetesBetaEndpoint } from 'src/features/Kubernetes/kubeUtils'; -import { useAllDatabasesQuery } from 'src/queries/databases/databases'; import { useAllKubernetesClustersQuery } from 'src/queries/kubernetes'; import { useObjectStorageBuckets } from 'src/queries/object-storage/queries'; import { diff --git a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx index ca6922d127e..91ccc81ce20 100644 --- a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx @@ -139,7 +139,7 @@ export const StackScriptLandingTable = (props: Props) => { endAdornment: ( diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx index df2b4785367..511e4d6b154 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx @@ -1,4 +1,5 @@ import { + useAllDatabasesQuery, useAllDomainsQuery, useAllFirewallsQuery, useAllLinodesQuery, @@ -11,7 +12,6 @@ import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { useKubernetesBetaEndpoint } from 'src/features/Kubernetes/kubeUtils'; -import { useAllDatabasesQuery } from 'src/queries/databases/databases'; import { useAllKubernetesClustersQuery } from 'src/queries/kubernetes'; import { useObjectStorageBuckets } from 'src/queries/object-storage/queries'; diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx index f0ea2ae267b..b74b53eae08 100644 --- a/packages/manager/src/features/TopMenu/TopMenu.tsx +++ b/packages/manager/src/features/TopMenu/TopMenu.tsx @@ -7,7 +7,7 @@ import { AppBar } from 'src/components/AppBar'; import { Link } from 'src/components/Link'; import { StyledAkamaiLogo } from 'src/components/PrimaryNav/PrimaryNav.styles'; import { Toolbar } from 'src/components/Toolbar'; -import { getIsLoggedInAsCustomer } from 'src/OAuth/utils'; +import { getIsLoggedInAsCustomer } from 'src/OAuth/oauth'; import { Community } from './Community'; import { CreateMenu } from './CreateMenu/CreateMenu'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx index f24a05f98ce..4a92bbffa41 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx @@ -18,9 +18,9 @@ describe('Subnet form content', () => { }, }); - getByText('Subnets'); - getByText('Subnet Label'); - getByText('Subnet IP Address Range'); - getByText('Add another Subnet'); + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('Subnet Label')).toBeVisible(); + expect(getByText('Subnet IP Address Range')).toBeVisible(); + expect(getByText('Add another Subnet')).toBeVisible(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx index 9de5fd147fa..cc2196b1574 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx @@ -22,8 +22,8 @@ describe('VPC Top Section form content', () => { }, }); - getByText('Region'); - getByText('VPC Label'); - getByText('Description'); + expect(getByText('Region')).toBeVisible(); + expect(getByText('VPC Label')).toBeVisible(); + expect(getByText('Description')).toBeVisible(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx index b83f40e177d..ec17de4c074 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx @@ -15,17 +15,17 @@ vi.mock('@linode/utilities'); describe('VPC create page', () => { it('should render the vpc and subnet sections', () => { - const { getAllByText } = renderWithTheme(); + const { getByText } = renderWithTheme(); - getAllByText('Region'); - getAllByText('VPC Label'); - getAllByText('Region'); - getAllByText('Description'); - getAllByText('Subnets'); - getAllByText('Subnet Label'); - getAllByText('Subnet IP Address Range'); - getAllByText('Add another Subnet'); - getAllByText('Create VPC'); + expect(getByText('Region')).toBeVisible(); + expect(getByText('VPC Label')).toBeVisible(); + expect(getByText('Region')).toBeVisible(); + expect(getByText('Description')).toBeVisible(); + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('Subnet Label')).toBeVisible(); + expect(getByText('Subnet IP Address Range')).toBeVisible(); + expect(getByText('Add another Subnet')).toBeVisible(); + expect(getByText('Create VPC')).toBeVisible(); }); it('should add and delete subnets correctly', async () => { diff --git a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx index b18c26b67e3..fff4e5bc42c 100644 --- a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx +++ b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx @@ -27,20 +27,21 @@ const formOptions = { describe('VPC Create Drawer', () => { it('should render the vpc and subnet sections', () => { - const { getAllByText } = renderWithThemeAndHookFormContext({ + const { getByText, getByRole } = renderWithThemeAndHookFormContext({ component: , useFormOptions: formOptions, }); - getAllByText('VPC Label'); - getAllByText('Region'); - getAllByText('Description'); - getAllByText('Subnets'); - getAllByText('Subnet Label'); - getAllByText('Subnet IP Address Range'); - getAllByText('Add another Subnet'); - getAllByText('Cancel'); - getAllByText('Create VPC'); + expect(getByText('Region')).toBeVisible(); + expect(getByText('VPC Label')).toBeVisible(); + expect(getByText('Region')).toBeVisible(); + expect(getByText('Description')).toBeVisible(); + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('Subnet Label')).toBeVisible(); + expect(getByText('Subnet IP Address Range')).toBeVisible(); + expect(getByText('Add another Subnet')).toBeVisible(); + expect(getByRole('button', { name: 'Create VPC' })).toBeVisible(); + expect(getByText('Cancel')).toBeVisible(); }); it('should not be able to remove the first subnet', () => { diff --git a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx index 58390a51c5f..be586675f5d 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx @@ -43,7 +43,7 @@ export const AssignIPRanges = (props: Props) => { {includeDescriptionInTooltip ? ( { - it('should render the subnet action menu', () => { - const screen = renderWithTheme(); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); - screen.getByText('Assign Linodes'); - screen.getByText('Unassign Linodes'); - screen.getByText('Edit'); - screen.getByText('Delete'); + it('should render the subnet action menu', async () => { + const view = renderWithTheme(); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); + view.getByText('Assign Linodes'); + view.getByText('Unassign Linodes'); + view.getByText('Edit'); + view.getByText('Delete'); }); - it('should not allow the delete button to be clicked', () => { - const screen = renderWithTheme(); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + it('should not allow the delete button to be clicked', async () => { + const view = renderWithTheme(); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const deleteButton = screen.getByText('Delete'); - fireEvent.click(deleteButton); + const deleteButton = view.getByRole('menuitem', { name: 'Delete' }); + await userEvent.click(deleteButton, { + pointerEventsCheck: PointerEventsCheckLevel.Never, + }); expect(props.handleDelete).not.toHaveBeenCalled(); - const tooltipText = screen.getByLabelText( + const tooltipText = view.getByLabelText( 'Linodes assigned to a subnet must be unassigned before the subnet can be deleted.' ); expect(tooltipText).toBeInTheDocument(); }); - it('should not allow the delete button to be clicked when isNodebalancerVPCEnabled is true', () => { - const screen = renderWithTheme(, { + it('should not allow the delete button to be clicked when isNodebalancerVPCEnabled is true', async () => { + const view = renderWithTheme(, { flags: { nodebalancerVpc: true }, }); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const deleteButton = screen.getByText('Delete'); - fireEvent.click(deleteButton); + const deleteButton = view.getByText('Delete'); + await userEvent.click(deleteButton, { + pointerEventsCheck: PointerEventsCheckLevel.Never, + }); expect(props.handleDelete).not.toHaveBeenCalled(); - const tooltipText = screen.getByLabelText( + const tooltipText = view.getByLabelText( 'Resources assigned to a subnet must be unassigned before the subnet can be deleted.' ); expect(tooltipText).toBeInTheDocument(); }); - it('should allow the delete button to be clicked', () => { - const screen = renderWithTheme( + it('should allow the delete button to be clicked', async () => { + const view = renderWithTheme( ); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const deleteButton = screen.getByText('Delete'); - fireEvent.click(deleteButton); + const deleteButton = view.getByText('Delete'); + await userEvent.click(deleteButton); expect(props.handleDelete).toHaveBeenCalled(); - const tooltipText = screen.queryByLabelText( + const tooltipText = view.queryByLabelText( 'Linodes assigned to a subnet must be unassigned before the subnet can be deleted.' ); expect(tooltipText).not.toBeInTheDocument(); }); - it('should allow the edit button to be clicked', () => { - const screen = renderWithTheme( + it('should allow the edit button to be clicked', async () => { + const view = renderWithTheme( ); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const editButton = screen.getByText('Edit'); - fireEvent.click(editButton); + const editButton = view.getByText('Edit'); + await userEvent.click(editButton); expect(props.handleEdit).toHaveBeenCalled(); }); - it('should allow the Assign Linodes button to be clicked', () => { - const screen = renderWithTheme(); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + it('should allow the Assign Linodes button to be clicked', async () => { + const view = renderWithTheme(); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const assignButton = screen.getByText('Assign Linodes'); - fireEvent.click(assignButton); + const assignButton = view.getByText('Assign Linodes'); + await userEvent.click(assignButton); expect(props.handleAssignLinodes).toHaveBeenCalled(); }); - it('should disable action buttons if isVPCLKEEnterpriseCluster is true', () => { + it('should disable action buttons if isVPCLKEEnterpriseCluster is true', async () => { const updatedProps = { ...props, isVPCLKEEnterpriseCluster: true }; - const screen = renderWithTheme(); - const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`); - fireEvent.click(actionMenu); + const view = renderWithTheme(); + const actionMenu = view.getByLabelText(`Action menu for Subnet subnet-1`); + await userEvent.click(actionMenu); - const actionButtons = screen.getAllByRole('menuitem'); + const actionButtons = view.getAllByRole('menuitem'); actionButtons.forEach((button) => expect(button).toHaveAttribute('aria-disabled', 'true') ); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx index 404f4048984..549911f7cba 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx @@ -1,7 +1,8 @@ import { linodeFactory } from '@linode/utilities'; -import { fireEvent, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; +import { firewallSettingsFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; import { http, HttpResponse, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; @@ -12,6 +13,18 @@ import type { Subnet } from '@linode/api-v4'; beforeAll(() => mockMatchMedia()); +const queryMocks = vi.hoisted(() => ({ + useFirewallSettingsQuery: vi.fn().mockReturnValue({}), +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useFirewallSettingsQuery: queryMocks.useFirewallSettingsQuery, + }; +}); + const props = { isFetching: false, onClose: vi.fn(), @@ -20,6 +33,10 @@ const props = { id: 1, ipv4: '10.0.0.0/24', label: 'subnet-1', + linodes: [], + nodebalancers: [], + created: '', + updated: '', } as Subnet, vpcId: 1, vpcRegion: 'us-east', @@ -38,7 +55,7 @@ describe('Subnet Assign Linodes Drawer', () => { ); it('should render a subnet assign linodes drawer', () => { - const { getByTestId, getByText, queryAllByText } = renderWithTheme( + const { getByTestId, getByText } = renderWithTheme( ); @@ -52,7 +69,7 @@ describe('Subnet Assign Linodes Drawer', () => { `Select the Linodes you would like to assign to this subnet. Only Linodes in this VPC's region are displayed.` ); expect(helperText).toBeVisible(); - const linodeSelect = queryAllByText('Linode')[0]; + const linodeSelect = getByTestId('add-linode-autocomplete'); expect(linodeSelect).toBeVisible(); const assignButton = getByText('Assign Linode'); @@ -65,33 +82,18 @@ describe('Subnet Assign Linodes Drawer', () => { expect(doneButton).toBeVisible(); }); - it.skip('should show the IPv4 textbox when the checkmark is clicked', async () => { - const { findByText, getByLabelText } = renderWithTheme( - - ); - - const selectField = getByLabelText('Linode'); - fireEvent.change(selectField, { target: { value: 'this-linode' } }); - - const checkbox = await findByText( - 'Auto-assign a VPC IPv4 address for this Linode' - ); - - await waitFor(() => expect(checkbox).toBeVisible()); - fireEvent.click(checkbox); - - const ipv4Textbox = await findByText('VPC IPv4'); - await waitFor(() => expect(ipv4Textbox).toBeVisible()); - }); + it('should close the drawer', async () => { + queryMocks.useFirewallSettingsQuery.mockReturnValue({ + data: firewallSettingsFactory.build(), + }); - it('should close the drawer', () => { const { getByText } = renderWithTheme( ); const doneButton = getByText('Done'); expect(doneButton).toBeVisible(); - fireEvent.click(doneButton); + await userEvent.click(doneButton); expect(props.onClose).toHaveBeenCalled(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx index 00bdb185b77..4edd73568fc 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx @@ -532,7 +532,7 @@ export const SubnetAssignLinodesDrawer = ( } sx={{ marginRight: 0 }} /> - + {!autoAssignIPv4 && ( { it('should render title, label, ipv4 input, ipv4 availability, and action buttons', () => { - const { getAllByText, getByTestId, getByText } = renderWithTheme( + const { getByRole, getByTestId, getByText } = renderWithTheme( ); - const createSubnetTexts = getAllByText('Create Subnet'); - expect(createSubnetTexts).toHaveLength(2); - - expect(createSubnetTexts[0]).toBeVisible(); // the Drawer title - expect(createSubnetTexts[1]).toBeVisible(); // the button + const createHeading = getByRole('heading', { name: 'Create Subnet' }); + expect(createHeading).toBeVisible(); + const createButton = getByRole('button', { name: 'Create Subnet' }); + expect(createButton).toBeVisible(); + expect(createButton).toBeDisabled(); const label = getByText('Subnet Label'); expect(label).toBeVisible(); @@ -39,14 +39,14 @@ describe('Create Subnet Drawer', () => { expect(cancelBtn).toBeVisible(); }); - it('should close the drawer if the close cancel button is clicked', () => { + it('should close the drawer if the close cancel button is clicked', async () => { const { getByText } = renderWithTheme(); const cancelBtn = getByText(/Cancel/); expect(cancelBtn).not.toHaveAttribute('aria-disabled', 'true'); expect(cancelBtn).toBeVisible(); - fireEvent.click(cancelBtn); + await userEvent.click(cancelBtn); expect(props.onClose).toHaveBeenCalled(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetDeleteDialog.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetDeleteDialog.test.tsx index 1aac638125b..afa538b35ce 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetDeleteDialog.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetDeleteDialog.test.tsx @@ -41,9 +41,9 @@ describe('Delete Subnet dialog', () => { const { getByText } = renderWithTheme(); - getByText('Delete Subnet some subnet'); - getByText('Subnet Label'); - getByText('Cancel'); - getByText('Delete'); + expect(getByText('Delete Subnet some subnet')).toBeVisible(); + expect(getByText('Subnet Label')).toBeVisible(); + expect(getByText('Cancel')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.test.tsx index af6f681e3dc..4c27edae4ea 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.test.tsx @@ -13,23 +13,21 @@ describe('SubnetEditDrawer', () => { }; it('Should render a title, label input, ip address input, and action buttons', () => { - const { getAllByTestId, getByTestId, getByText } = renderWithTheme( + const { getByTestId, getByRole, getByText } = renderWithTheme( ); const drawerTitle = getByText('Edit Subnet'); expect(drawerTitle).toBeVisible(); - const inputs = getAllByTestId('textfield-input'); - const label = getByText('Label'); - const labelInput = inputs[0]; + const labelInput = getByRole('textbox', { name: 'Label' }); expect(label).toBeVisible(); expect(labelInput).toBeEnabled(); const ip = getByText('Subnet IP Address Range'); - const ipInput = inputs[1]; + const ipInput = getByRole('textbox', { name: 'Subnet IP Address Range' }); expect(ip).toBeVisible(); - expect(ipInput).not.toBeEnabled(); + expect(ipInput).toBeDisabled(); const saveButton = getByTestId('save-button'); expect(saveButton).toBeVisible(); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.test.tsx new file mode 100644 index 00000000000..74aad6890d2 --- /dev/null +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.test.tsx @@ -0,0 +1,109 @@ +import { linodeFactory } from '@linode/utilities'; +import userEvent from '@testing-library/user-event'; +import * as React from 'react'; + +import { subnetFactory } from 'src/factories'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { SubnetLinodeActionMenu } from './SubnetLinodeActionMenu'; + +const props = { + handlePowerActionsLinode: vi.fn(), + handleUnassignLinode: vi.fn(), + isVPCLKEEnterpriseCluster: false, + linode: linodeFactory.build({ label: 'linode-1' }), + subnet: subnetFactory.build({ label: 'subnet-1' }), + isOffline: false, + isRebootNeeded: false, + showPowerButton: true, +}; + +describe('SubnetActionMenu', () => { + it('should render the subnet action menu', async () => { + const { getByLabelText, getByText } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + getByText('Power Off'); + getByText('Unassign Linode'); + }); + + it('should allow the reboot button to be clicked', async () => { + const { getByLabelText, getByText, queryByLabelText } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + + const rebootButton = getByText('Reboot'); + await userEvent.click(rebootButton); + expect(props.handlePowerActionsLinode).toHaveBeenCalled(); + const tooltipText = queryByLabelText( + 'Linodes assigned to a subnet must be unassigned before the subnet can be deleted.' + ); + expect(tooltipText).not.toBeInTheDocument(); + }); + + it('should allow the Power Off button to be clicked', async () => { + const { getByLabelText, getByText } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + + const powerOffButton = getByText('Power Off'); + await userEvent.click(powerOffButton); + expect(props.handlePowerActionsLinode).toHaveBeenCalled(); + }); + + it('should allow the Power On button to be clicked', async () => { + const { getByLabelText, getByText } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + + const powerOnButton = getByText('Power On'); + await userEvent.click(powerOnButton); + expect(props.handlePowerActionsLinode).toHaveBeenCalled(); + }); + + it('should allow the Unassign Linode button to be clicked', async () => { + const { getByLabelText, getByText } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + + const unassignButton = getByText('Unassign Linode'); + await userEvent.click(unassignButton); + expect(props.handleUnassignLinode).toHaveBeenCalled(); + }); + + it('should disable action buttons if isVPCLKEEnterpriseCluster is true', async () => { + const updatedProps = { ...props, isVPCLKEEnterpriseCluster: true }; + const { getByLabelText, getAllByRole } = renderWithTheme( + + ); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet subnet-1` + ); + await userEvent.click(actionMenu); + + const actionButtons = getAllByRole('menuitem'); + actionButtons.forEach((button) => + expect(button).toHaveAttribute('aria-disabled', 'true') + ); + }); +}); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.tsx new file mode 100644 index 00000000000..3dee84208c6 --- /dev/null +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeActionMenu.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; + +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; + +import type { Linode, Subnet } from '@linode/api-v4'; +import type { Action as ActionMenuAction } from 'src/components/ActionMenu/ActionMenu'; +import type { Action as PowerAction } from 'src/features/Linodes/PowerActionsDialogOrDrawer'; + +interface SubnetLinodeActionHandlers { + handlePowerActionsLinode: ( + linode: Linode, + action: PowerAction, + subnet: Subnet + ) => void; + handleUnassignLinode: (linode: Linode, subnet?: Subnet) => void; +} + +interface Props extends SubnetLinodeActionHandlers { + isOffline: boolean; + isRebootNeeded: boolean; + isVPCLKEEnterpriseCluster: boolean; + linode: Linode; + showPowerButton: boolean; + subnet: Subnet; +} + +export const SubnetLinodeActionMenu = (props: Props) => { + const { + handlePowerActionsLinode, + handleUnassignLinode, + isVPCLKEEnterpriseCluster, + isOffline, + isRebootNeeded, + subnet, + linode, + showPowerButton, + } = props; + + const actions: ActionMenuAction[] = []; + if (isRebootNeeded) { + actions.push({ + disabled: isVPCLKEEnterpriseCluster, + onClick: () => { + handlePowerActionsLinode(linode, 'Reboot', subnet); + }, + title: 'Reboot', + }); + } + + if (showPowerButton) { + actions.push({ + disabled: isVPCLKEEnterpriseCluster, + onClick: () => { + handlePowerActionsLinode( + linode, + isOffline ? 'Power On' : 'Power Off', + subnet + ); + }, + title: isOffline ? 'Power On' : 'Power Off', + }); + } + + actions.push({ + disabled: isVPCLKEEnterpriseCluster, + onClick: () => { + handleUnassignLinode(linode, subnet); + }, + title: 'Unassign Linode', + }); + + return ( + + ); +}; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx index c0db21c561b..62c49050d89 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx @@ -4,7 +4,7 @@ import { linodeFactory, linodeInterfaceFactoryVPC, } from '@linode/utilities'; -import { waitFor, waitForElementToBeRemoved } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as React from 'react'; @@ -14,8 +14,6 @@ import { subnetFactory, } from 'src/factories'; import { linodeConfigFactory } from 'src/factories/linodeConfigs'; -import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithTheme, @@ -27,8 +25,32 @@ import { SubnetLinodeRow } from './SubnetLinodeRow'; beforeAll(() => mockMatchMedia()); +const queryMocks = vi.hoisted(() => ({ + useLinodeQuery: vi.fn().mockReturnValue({}), + useLinodeFirewallsQuery: vi.fn().mockReturnValue({}), + useLinodeConfigQuery: vi.fn().mockReturnValue({}), + useLinodeInterfaceQuery: vi.fn().mockReturnValue({}), + useLinodeInterfaceFirewallsQuery: vi.fn().mockReturnValue({}), +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useLinodeQuery: queryMocks.useLinodeQuery, + useLinodeFirewallsQuery: queryMocks.useLinodeFirewallsQuery, + useLinodeConfigQuery: queryMocks.useLinodeConfigQuery, + useLinodeInterfaceQuery: queryMocks.useLinodeInterfaceQuery, + useLinodeInterfaceFirewallsQuery: + queryMocks.useLinodeInterfaceFirewallsQuery, + }; +}); + const loadingTestId = 'circle-progress'; const mockFirewall0 = 'mock-firewall-0'; +const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); +const handlePowerActionsLinode = vi.fn(); +const handleUnassignLinode = vi.fn(); const publicInterface = linodeConfigInterfaceFactory.build({ active: true, @@ -51,38 +73,53 @@ const configurationProfile = linodeConfigFactory.build({ }); describe('SubnetLinodeRow', () => { - const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); - - server.use( - http.get('*/linodes/instances/:linodeId', () => { - return HttpResponse.json(linodeFactory1); - }), - http.get('*/linode/instances/:id/firewalls', () => { - return HttpResponse.json( - makeResourcePage(firewallFactory.buildList(1, { label: mockFirewall0 })) - ); - }) - ); + beforeEach(() => { + vi.clearAllMocks(); + queryMocks.useLinodeQuery.mockReturnValue({ + data: linodeFactory1, + }); + queryMocks.useLinodeFirewallsQuery.mockReturnValue({ + data: { + data: firewallFactory.buildList(1, { label: mockFirewall0 }), + }, + }); + }); - const linodeFactory2 = linodeFactory.build({ id: 2, label: 'linode-2' }); + it('renders the loading state', async () => { + queryMocks.useLinodeQuery.mockReturnValue({ + isLoading: true, + }); + + const { findByTestId } = renderWithTheme( + wrapWithTableBody( + + ) + ); - const handleUnassignLinode = vi.fn(); + // Loading state should render + const loading = await findByTestId(loadingTestId); + expect(loading).toBeInTheDocument(); + }); it('should display linode label, reboot status, VPC IPv4 address, associated firewalls, IPv4 chip, and Reboot and Unassign buttons', async () => { const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); + const subnetFactory1 = subnetFactory.build({ id: 1, label: 'subnet-1' }); const config = linodeConfigFactory.build({ interfaces: [linodeConfigInterfaceFactoryWithVPC.build({ id: 1 })], }); - server.use( - http.get('*/instances/*/configs/:configId', async () => { - return HttpResponse.json(config); - }) - ); - - const handlePowerActionsLinode = vi.fn(); - const handleUnassignLinode = vi.fn(); + queryMocks.useLinodeConfigQuery.mockReturnValue({ + data: config, + }); - const { getAllByRole, getAllByText, getByTestId, findByText } = + const { getByLabelText, getByRole, getByText, findByText } = renderWithTheme( wrapWithTableBody( { handleUnassignLinode={handleUnassignLinode} isVPCLKEEnterpriseCluster={false} linodeId={linodeFactory1.id} - subnet={subnetFactory.build()} + subnet={subnetFactory1} subnetId={1} subnetInterfaces={[{ active: true, config_id: config.id, id: 1 }]} /> ) ); - // Loading states should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); - - await waitForElementToBeRemoved(getByTestId(loadingTestId)); - - const linodeLabelLink = getAllByRole('link')[0]; + const linodeLabelLink = getByRole('link', { name: 'linode-1' }); expect(linodeLabelLink).toHaveAttribute( 'href', `/linodes/${linodeFactory1.id}` ); - getAllByText('10.0.0.0'); + expect(getByText('10.0.0.0')).toBeVisible(); - const plusChipButton = getAllByRole('button')[1]; + const plusChipButton = getByRole('button', { name: '+1' }); expect(plusChipButton).toHaveTextContent('+1'); - const rebootLinodeButton = getAllByRole('button')[2]; - expect(rebootLinodeButton).toHaveTextContent('Reboot'); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet ${subnetFactory1.label}` + ); + await userEvent.click(actionMenu); + + const rebootLinodeButton = getByText('Reboot'); await userEvent.click(rebootLinodeButton); expect(handlePowerActionsLinode).toHaveBeenCalled(); - const unassignLinodeButton = getAllByRole('button')[3]; - expect(unassignLinodeButton).toHaveTextContent('Unassign Linode'); + const unassignLinodeButton = getByText('Unassign Linode'); await userEvent.click(unassignLinodeButton); expect(handleUnassignLinode).toHaveBeenCalled(); const firewall = await findByText(mockFirewall0); @@ -127,58 +162,45 @@ describe('SubnetLinodeRow', () => { }); it('should display the ip, range, and firewall for a Linode using Linode Interfaces', async () => { - const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); - server.use( - http.get('*/instances/*/interfaces/:interfaceId', async () => { - const vpcLinodeInterface = linodeInterfaceFactoryVPC.build(); - return HttpResponse.json(vpcLinodeInterface); - }), - http.get('*/instances/*/interfaces/:interfaceId/firewalls', async () => { - return HttpResponse.json( - makeResourcePage( - firewallFactory.buildList(1, { label: mockFirewall0 }) - ) - ); - }) - ); - - const handlePowerActionsLinode = vi.fn(); - const handleUnassignLinode = vi.fn(); - - const { getAllByRole, getAllByText, getByTestId, findByText } = - renderWithTheme( - wrapWithTableBody( - - ) - ); - - // Loading state should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); + const vpcLinodeInterface = linodeInterfaceFactoryVPC.build(); + queryMocks.useLinodeInterfaceQuery.mockReturnValue({ + data: vpcLinodeInterface, + }); + queryMocks.useLinodeInterfaceFirewallsQuery.mockReturnValue({ + data: { + data: firewallFactory.buildList(1, { label: mockFirewall0 }), + }, + }); - await waitForElementToBeRemoved(getByTestId(loadingTestId)); + const { getByRole, getByText, findByText } = renderWithTheme( + wrapWithTableBody( + + ) + ); - const linodeLabelLink = getAllByRole('link')[0]; + const linodeLabelLink = getByRole('link', { name: 'linode-1' }); expect(linodeLabelLink).toHaveAttribute( 'href', `/linodes/${linodeFactory1.id}/networking/interfaces/1` ); - getAllByText('10.0.0.0'); - getAllByText('10.0.0.1'); + expect(getByText('10.0.0.0')).toBeVisible(); + expect(getByText('10.0.0.1')).toBeVisible(); const firewall = await findByText(mockFirewall0); expect(firewall).toBeVisible(); }); it('should not display reboot linode button if the linode has all active interfaces', async () => { const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); + const subnetFactory1 = subnetFactory.build({ id: 1, label: 'subnet-1' }); const vpcInterface = linodeConfigInterfaceFactoryWithVPC.build({ active: true, ip_ranges: [], @@ -187,33 +209,18 @@ describe('SubnetLinodeRow', () => { const config = linodeConfigFactory.build({ interfaces: [vpcInterface], }); - server.use( - http.get('*/linodes/instances/:linodeId', () => { - return HttpResponse.json(linodeFactory1); - }), - http.get('*/linode/instances/:id/firewalls', () => { - return HttpResponse.json( - makeResourcePage( - firewallFactory.buildList(1, { label: mockFirewall0 }) - ) - ); - }), - http.get('*/instances/*/configs/:configId', async () => { - return HttpResponse.json(config); - }) - ); - - const handleUnassignLinode = vi.fn(); - const handlePowerActionsLinode = vi.fn(); + queryMocks.useLinodeConfigQuery.mockReturnValue({ + data: config, + }); - const { getAllByRole, getByTestId } = renderWithTheme( + const { getByRole, getByLabelText, getByText } = renderWithTheme( wrapWithTableBody( { ) ); - // Loading state should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); - - await waitForElementToBeRemoved(getByTestId(loadingTestId)); - - const linodeLabelLink = getAllByRole('link')[0]; + const linodeLabelLink = getByRole('link', { name: 'linode-1' }); expect(linodeLabelLink).toHaveAttribute( 'href', `/linodes/${linodeFactory1.id}` ); - const buttons = getAllByRole('button'); - expect(buttons.length).toEqual(2); - const powerOffButton = buttons[0]; - expect(powerOffButton).toHaveTextContent('Power Off'); + const actionMenu = getByLabelText( + `Action menu for Linodes in Subnet ${subnetFactory1.label}` + ); + await userEvent.click(actionMenu); + + const powerOffButton = getByText('Power Off'); await userEvent.click(powerOffButton); expect(handlePowerActionsLinode).toHaveBeenCalled(); - const unassignLinodeButton = buttons[1]; - expect(unassignLinodeButton).toHaveTextContent('Unassign Linode'); + const unassignLinodeButton = getByText('Unassign Linode'); await userEvent.click(unassignLinodeButton); expect(handleUnassignLinode).toHaveBeenCalled(); }); @@ -265,11 +268,9 @@ describe('SubnetLinodeRow', () => { ], }); - server.use( - http.get('*/instances/*/configs/*', async () => { - return HttpResponse.json(configurationProfile); - }) - ); + queryMocks.useLinodeConfigQuery.mockReturnValue({ + data: configurationProfile, + }); const { getByTestId } = renderWithTheme( wrapWithTableBody( @@ -277,7 +278,7 @@ describe('SubnetLinodeRow', () => { handlePowerActionsLinode={vi.fn()} handleUnassignLinode={handleUnassignLinode} isVPCLKEEnterpriseCluster={false} - linodeId={linodeFactory2.id} + linodeId={linodeFactory1.id} subnet={subnet} subnetId={subnet.id} subnetInterfaces={[{ active: true, config_id: 1, id: 1 }]} @@ -285,10 +286,6 @@ describe('SubnetLinodeRow', () => { ) ); - // Loading state should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); - await waitForElementToBeRemoved(getByTestId(loadingTestId)); - const warningIcon = getByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG); await waitFor(() => { @@ -296,24 +293,12 @@ describe('SubnetLinodeRow', () => { }); }); - it('should hide in-line action buttons for LKE-E Linodes', async () => { - const linodeFactory1 = linodeFactory.build({ id: 1, label: 'linode-1' }); - - server.use( - http.get('*/linodes/instances/:linodeId', () => { - return HttpResponse.json(linodeFactory1); - }) - ); - server.use( - http.get('*/instances/*/configs/*', async () => { - return HttpResponse.json(configurationProfile); - }) - ); - - const handleUnassignLinode = vi.fn(); - const handlePowerActionsLinode = vi.fn(); + it('should hide action-menu buttons for LKE-E Linodes', async () => { + queryMocks.useLinodeConfigQuery.mockReturnValue({ + data: configurationProfile, + }); - const { getByTestId, queryByRole } = renderWithTheme( + const { queryByText } = renderWithTheme( wrapWithTableBody( { ) ); - // Loading state should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); - await waitForElementToBeRemoved(getByTestId(loadingTestId)); - - const powerOffButton = queryByRole('button', { - name: 'Power Off', - }); + const powerOffButton = queryByText('Power Off'); expect(powerOffButton).not.toBeInTheDocument(); - const unassignLinodeButton = queryByRole('button', { - name: 'Unassign Linode', - }); + const unassignLinodeButton = queryByText('Unassign Linode'); expect(unassignLinodeButton).not.toBeInTheDocument(); }); @@ -348,13 +325,13 @@ describe('SubnetLinodeRow', () => { linodes: [subnetAssignedLinodeDataFactory.build()], }); - const { getByTestId, queryByTestId } = renderWithTheme( + const { queryByTestId } = renderWithTheme( wrapWithTableBody( { ) ); - // Loading state should render - expect(getByTestId(loadingTestId)).toBeInTheDocument(); - await waitForElementToBeRemoved(getByTestId(loadingTestId)); - const warningIcon = queryByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG); await waitFor(() => { diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx index 52b4dfc1d13..4d000a5e633 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx @@ -6,7 +6,6 @@ import ErrorOutline from '@mui/icons-material/ErrorOutline'; import * as React from 'react'; import type { JSX } from 'react'; -import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Link } from 'src/components/Link'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; @@ -25,6 +24,7 @@ import { getLinodeInterfaceRanges, hasUnrecommendedConfigurationLinodeInterface, } from '../utils'; +import { SubnetLinodeActionMenu } from './SubnetLinodeActionMenu'; import { StyledWarningIcon } from './SubnetLinodeRow.styles'; import { ConfigInterfaceFirewallCell, @@ -161,7 +161,6 @@ export const SubnetLinodeRow = (props: Props) => { > } - status="other" sxTooltipIcon={{ paddingLeft: 0 }} text={ @@ -199,7 +198,7 @@ export const SubnetLinodeRow = (props: Props) => { <> {'Reboot Needed'} @@ -238,35 +237,16 @@ export const SubnetLinodeRow = (props: Props) => { {!isVPCLKEEnterpriseCluster && ( - <> - {isRebootNeeded && ( - { - handlePowerActionsLinode(linode, 'Reboot', subnet); - }} - /> - )} - {showPowerButton && ( - { - handlePowerActionsLinode( - linode, - isOffline ? 'Power On' : 'Power Off', - subnet - ); - }} - /> - )} - handleUnassignLinode(linode, subnet)} - /> - + )} @@ -351,8 +331,8 @@ export const SubnetLinodeTableRowHead = ( VPC IPv4 Ranges - Firewalls + Firewalls - + ); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx index c296c4806a4..2f34d90ee4d 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx @@ -1,13 +1,12 @@ -import { waitFor, waitForElementToBeRemoved } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import * as React from 'react'; -import { afterAll, afterEach, beforeAll, describe, it } from 'vitest'; +import { beforeAll, describe, it } from 'vitest'; import { firewallFactory, subnetAssignedNodebalancerDataFactory, } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithTheme, @@ -18,9 +17,23 @@ import { SubnetNodeBalancerRow } from './SubnetNodebalancerRow'; const LOADING_TEST_ID = 'circle-progress'; +const queryMocks = vi.hoisted(() => ({ + useAllNodeBalancerConfigsQuery: vi.fn().mockReturnValue({}), + useNodeBalancerQuery: vi.fn().mockReturnValue({}), + useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({}), +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useAllNodeBalancerConfigsQuery: queryMocks.useAllNodeBalancerConfigsQuery, + useNodeBalancerQuery: queryMocks.useNodeBalancerQuery, + useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery, + }; +}); + beforeAll(() => mockMatchMedia()); -afterEach(() => server.resetHandlers()); -afterAll(() => server.close()); describe('SubnetNodeBalancerRow', () => { const nodebalancer = { @@ -43,6 +56,9 @@ describe('SubnetNodeBalancerRow', () => { }); it('renders loading state', async () => { + queryMocks.useNodeBalancerQuery.mockReturnValue({ + isLoading: true, + }); const { getByTestId } = renderWithTheme( wrapWithTableBody( { ); expect(getByTestId(LOADING_TEST_ID)).toBeInTheDocument(); - await waitForElementToBeRemoved(() => getByTestId(LOADING_TEST_ID)); + // now that we're mocking the query to return isLoading, the loading state will not be removed + // await waitForElementToBeRemoved(() => getByTestId(LOADING_TEST_ID)); }); it('renders nodebalancer row with data', async () => { - server.use( - http.get('*/nodebalancers/:id', () => { - return HttpResponse.json(nodebalancer); - }), - http.get('*/nodebalancers/:id/configs', () => { - return HttpResponse.json(configs); - }), - http.get('*/nodebalancers/:id/firewalls', () => { - return HttpResponse.json(firewalls); - }) - ); + queryMocks.useNodeBalancerQuery.mockReturnValue({ + data: nodebalancer, + }); + queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({ + data: configs, + }); + queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({ + data: firewalls, + }); const { getByText, getByRole } = renderWithTheme( wrapWithTableBody( diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx index 71d879baae1..5bf19ae51fe 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx @@ -9,7 +9,6 @@ import { Typography } from '@mui/material'; import * as React from 'react'; import { Link } from 'src/components/Link'; -import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; @@ -64,8 +63,7 @@ export const SubnetNodeBalancerRow = ({ return ( <> - - {up} up, {down} down + {up} up - {down} down ); }; @@ -167,8 +165,8 @@ export const SubnetNodeBalancerRow = ({ export const SubnetNodebalancerTableRowHead = ( NodeBalancer - Backend Status - VPC IPv4 Range + Backend Status + VPC IPv4 Range Firewalls ); diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.test.tsx index 7304229db25..a207815e213 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.test.tsx @@ -20,16 +20,16 @@ const props = { describe('Subnet Unassign Linodes Drawer', () => { it('should render a subnet Unassign linodes drawer', () => { - const screen = renderWithTheme(); + const view = renderWithTheme(); - const header = screen.getByText( + const header = view.getByText( 'Unassign Linodes from subnet: subnet-1 (10.0.0.0/24)' ); expect(header).toBeVisible(); - const notice = screen.getByTestId('subnet-linode-action-notice'); + const notice = view.getByTestId('subnet-linode-action-notice'); expect(notice).toBeVisible(); - const linodeSelect = screen.getByText('Linodes'); + const linodeSelect = view.getByText('Linodes'); expect(linodeSelect).toBeVisible(); }); }); diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.test.tsx index aefd1aa0e45..8eb949d039d 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.test.tsx @@ -1,8 +1,9 @@ -import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react'; +import { regionFactory } from '@linode/utilities'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; +import { subnetFactory } from 'src/factories'; import { vpcFactory } from 'src/factories/vpcs'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithThemeAndRouter, @@ -15,8 +16,21 @@ const queryMocks = vi.hoisted(() => ({ useNavigate: vi.fn(() => vi.fn()), useParams: vi.fn().mockReturnValue({}), useSearch: vi.fn().mockReturnValue({}), + useVPCQuery: vi.fn().mockReturnValue({}), + useFirewallSettingsQuery: vi.fn().mockReturnValue({}), + useRegionsQuery: vi.fn().mockReturnValue({}), })); +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useFirewallSettingsQuery: queryMocks.useFirewallSettingsQuery, + useRegionsQuery: queryMocks.useRegionsQuery, + useVPCQuery: queryMocks.useVPCQuery, + }; +}); + vi.mock('@tanstack/react-router', async () => { const actual = await vi.importActual('@tanstack/react-router'); return { @@ -30,8 +44,6 @@ vi.mock('@tanstack/react-router', async () => { beforeAll(() => mockMatchMedia()); -const loadingTestId = 'circle-progress'; - describe('VPC Detail Summary section', () => { beforeEach(() => { queryMocks.useLocation.mockReturnValue({ @@ -40,117 +52,103 @@ describe('VPC Detail Summary section', () => { queryMocks.useParams.mockReturnValue({ vpcId: 1, }); + queryMocks.useRegionsQuery.mockReturnValue({ + data: [ + regionFactory.build({ + id: 'us-east', + capabilities: ['VPCs'], + label: 'US, Newark, NJ', + }), + ], + }); }); it('should display number of subnets and linodes, region, id, creation and update dates', async () => { - const vpcFactory1 = vpcFactory.build({ id: 1, subnets: [] }); - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory1); - }) - ); - - const { getAllByText, queryByTestId } = await renderWithThemeAndRouter( - - ); + const vpcFactory1 = vpcFactory.build({ + id: 23, + subnets: [subnetFactory.build()], + created: '2023-07-12T16:08:53', + updated: '2023-07-12T16:08:54', + }); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory1, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByText } = await renderWithThemeAndRouter(); - getAllByText('Subnets'); - getAllByText('Linodes'); - getAllByText('0'); + // there is 1 subnet with 5 linodes + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('1')).toBeVisible(); + expect(getByText('Linodes')).toBeVisible(); + expect(getByText('5')).toBeVisible(); - getAllByText('Region'); - getAllByText('US, Newark, NJ'); + expect(getByText('Region')).toBeVisible(); + expect(getByText('US, Newark, NJ')).toBeVisible(); - getAllByText('VPC ID'); - getAllByText(vpcFactory1.id); + expect(getByText('VPC ID')).toBeVisible(); + expect(getByText(vpcFactory1.id)).toBeVisible(); - getAllByText('Created'); - getAllByText(vpcFactory1.created); + expect(getByText('Created')).toBeVisible(); + expect(getByText(vpcFactory1.created)).toBeVisible(); - getAllByText('Updated'); - getAllByText(vpcFactory1.updated); + expect(getByText('Updated')).toBeVisible(); + expect(getByText(vpcFactory1.updated)).toBeVisible(); }); it('should display number of subnets and resources, region, id, creation and update dates', async () => { - const vpcFactory1 = vpcFactory.build({ id: 1, subnets: [] }); - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory1); - }) - ); - - const { getAllByText, queryByTestId } = await renderWithThemeAndRouter( - , - { - flags: { nodebalancerVpc: true }, - } - ); + const vpcFactory1 = vpcFactory.build({ + id: 42, + subnets: [subnetFactory.build()], + created: '2023-07-12T16:08:53', + updated: '2023-07-12T16:08:54', + }); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory1, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByText } = await renderWithThemeAndRouter(, { + flags: { nodebalancerVpc: true }, + }); - getAllByText('Subnets'); - getAllByText('Resources'); - getAllByText('0'); + // there is 1 subnet with 8 resources (5 Linodes, 3 nbs) + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('1')).toBeVisible(); + expect(getByText('Resources')).toBeVisible(); + expect(getByText('8')).toBeVisible(); - getAllByText('Region'); - getAllByText('US, Newark, NJ'); + expect(getByText('Region')).toBeVisible(); + expect(getByText('US, Newark, NJ')).toBeVisible(); - getAllByText('VPC ID'); - getAllByText(vpcFactory1.id); + expect(getByText('VPC ID')).toBeVisible(); + expect(getByText(vpcFactory1.id)).toBeVisible(); - getAllByText('Created'); - getAllByText(vpcFactory1.created); + expect(getByText('Created')).toBeVisible(); + expect(getByText(vpcFactory1.created)).toBeVisible(); - getAllByText('Updated'); - getAllByText(vpcFactory1.updated); + expect(getByText('Updated')).toBeVisible(); + expect(getByText(vpcFactory1.updated)).toBeVisible(); }); it('should display description if one is provided', async () => { const vpcFactory1 = vpcFactory.build({ description: `VPC for webserver and database.`, }); - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory1); - }) - ); - - const { getByText, queryByTestId } = await renderWithThemeAndRouter( - - ); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory1, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByText } = await renderWithThemeAndRouter(); - getByText('Description'); - getByText(vpcFactory1.description); + expect(getByText('Description')).toBeVisible(); + expect(getByText(vpcFactory1.description)).toBeVisible(); }); it('should hide description if none is provided', async () => { - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory.build()); - }) - ); - - const { queryByTestId, queryByText } = await renderWithThemeAndRouter( - - ); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory.build(), + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { queryByText } = await renderWithThemeAndRouter(); expect(queryByText('Description')).not.toBeInTheDocument(); }); @@ -159,25 +157,24 @@ describe('VPC Detail Summary section', () => { const vpcFactory1 = vpcFactory.build({ description: `VPC for webserver and database. VPC for webserver and database. VPC for webserver and database. VPC for webserver and database. VPC for webserver. VPC for webserver.`, }); - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory1); - }) - ); - const { getAllByRole, queryByTestId } = await renderWithThemeAndRouter( - - ); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory1, + }); + queryMocks.useFirewallSettingsQuery.mockReturnValue({ + data: { + default_firewall_ids: { + vpc_interface: 1, + }, + }, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByTestId } = await renderWithThemeAndRouter(); - const readMoreButton = getAllByRole('button')[2]; + const readMoreButton = getByTestId('show-description-button'); expect(readMoreButton.innerHTML).toBe('Read More'); - fireEvent.click(readMoreButton); + await userEvent.click(readMoreButton); expect(readMoreButton.innerHTML).toBe('Read Less'); }); @@ -186,19 +183,13 @@ describe('VPC Detail Summary section', () => { description: `workload VPC for LKE Enterprise Cluster lke1234567.`, label: 'lke1234567', }); - server.use( - http.get('*/vpcs/:vpcId', () => { - return HttpResponse.json(vpcFactory1); - }) - ); - - const { getByRole, getByText, queryByTestId } = - await renderWithThemeAndRouter(); + queryMocks.useVPCQuery.mockReturnValue({ + data: vpcFactory1, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByRole, getByText } = await renderWithThemeAndRouter( + + ); expect( getByText( diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index 557cea1daea..0879718b5ce 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -208,6 +208,7 @@ const VPCDetail = () => { {description}{' '} {description.length > 150 && ( setShowFullDescription((show) => !show)} sx={{ fontSize: '0.875rem' }} > diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx index c6b1fae1fc4..e390e582bc9 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx @@ -1,4 +1,3 @@ -import { waitForElementToBeRemoved } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as React from 'react'; @@ -7,8 +6,6 @@ import { subnetAssignedLinodeDataFactory, subnetFactory, } from 'src/factories/subnets'; -import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithThemeAndRouter, @@ -16,12 +13,12 @@ import { import { VPCSubnetsTable } from './VPCSubnetsTable'; -const loadingTestId = 'circle-progress'; - beforeAll(() => mockMatchMedia()); const queryMocks = vi.hoisted(() => ({ useSearch: vi.fn().mockReturnValue({ query: undefined }), + useSubnetsQuery: vi.fn().mockReturnValue({}), + useFirewallSettingsQuery: vi.fn().mockReturnValue({}), })); vi.mock('@tanstack/react-router', async () => { @@ -32,187 +29,168 @@ vi.mock('@tanstack/react-router', async () => { }; }); +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useSubnetsQuery: queryMocks.useSubnetsQuery, + useFirewallSettingsQuery: queryMocks.useFirewallSettingsQuery, + }; +}); + describe('VPC Subnets table', () => { + beforeEach(() => { + queryMocks.useFirewallSettingsQuery.mockReturnValue({ + data: firewallSettingsFactory.build(), + }); + }); + it('should display filter input, subnet label, id, ip range, number of linodes, and action menu', async () => { const subnet = subnetFactory.build({ + id: 27, linodes: [ subnetAssignedLinodeDataFactory.build({ id: 1 }), subnetAssignedLinodeDataFactory.build({ id: 2 }), subnetAssignedLinodeDataFactory.build({ id: 3 }), ], }); - server.use( - http.get('*/vpcs/:vpcId/subnets', () => { - return HttpResponse.json(makeResourcePage([subnet])); - }), - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) - ); - - const { - getAllByRole, - getAllByText, - getByPlaceholderText, - getByText, - queryByTestId, - } = await renderWithThemeAndRouter( - - ); + queryMocks.useSubnetsQuery.mockReturnValue({ + data: { + data: [subnet], + }, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByLabelText, getByPlaceholderText, getByText } = + await renderWithThemeAndRouter( + + ); - getByPlaceholderText('Filter Subnets by label or id'); - getByText('Subnet'); - getByText(subnet.label); - getByText('Subnet ID'); - getAllByText(subnet.id); + expect(getByPlaceholderText('Filter Subnets by label or id')).toBeVisible(); + expect(getByText('Subnet')).toBeVisible(); + expect(getByText(subnet.label)).toBeVisible(); + expect(getByText('Subnet ID')).toBeVisible(); + expect(getByText(subnet.id)).toBeVisible(); - getByText('Subnet IP Range'); - getByText(subnet.ipv4!); + expect(getByText('Subnet IP Range')).toBeVisible(); + expect(getByText(subnet.ipv4!)).toBeVisible(); - getByText('Linodes'); - getByText(subnet.linodes.length); + expect(getByText('Linodes')).toBeVisible(); + expect(getByText(subnet.linodes.length)).toBeVisible(); - const actionMenuButton = getAllByRole('button')[4]; + const actionMenuButton = getByLabelText( + `Action menu for Subnet ${subnet.label}` + ); await userEvent.click(actionMenuButton); - getByText('Assign Linodes'); - getByText('Unassign Linodes'); - getByText('Edit'); - getByText('Delete'); + expect(getByText('Assign Linodes')).toBeVisible(); + expect(getByText('Unassign Linodes')).toBeVisible(); + expect(getByText('Edit')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); }); it('should display filter input, subnet label, id, ip range, number of resources, and action menu', async () => { const subnet = subnetFactory.build({ + id: 39, linodes: [ subnetAssignedLinodeDataFactory.build({ id: 1 }), subnetAssignedLinodeDataFactory.build({ id: 2 }), subnetAssignedLinodeDataFactory.build({ id: 3 }), ], }); - server.use( - http.get('*/vpcs/:vpcId/subnets', () => { - return HttpResponse.json(makeResourcePage([subnet])); - }), - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) - ); - - const { - getAllByRole, - getAllByText, - getByPlaceholderText, - getByText, - queryByTestId, - } = await renderWithThemeAndRouter( - , - { - flags: { nodebalancerVpc: true }, - } - ); + queryMocks.useSubnetsQuery.mockReturnValue({ + data: { + data: [subnet], + }, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByLabelText, getByPlaceholderText, getByText } = + await renderWithThemeAndRouter( + , + { + flags: { nodebalancerVpc: true }, + } + ); - getByPlaceholderText('Filter Subnets by label or id'); - getByText('Subnet'); - getByText(subnet.label); - getByText('Subnet ID'); - getAllByText(subnet.id); + expect(getByPlaceholderText('Filter Subnets by label or id')).toBeVisible(); + expect(getByText('Subnet')).toBeVisible(); + expect(getByText(subnet.label)).toBeVisible(); + expect(getByText('Subnet ID')).toBeVisible(); + expect(getByText(subnet.id)).toBeVisible(); - getByText('Subnet IP Range'); - getByText(subnet.ipv4!); + expect(getByText('Subnet IP Range')).toBeVisible(); + expect(getByText(subnet.ipv4!)).toBeVisible(); - getByText('Resources'); - getByText(subnet.linodes.length + subnet.nodebalancers.length); + expect(getByText('Resources')).toBeVisible(); + expect( + getByText(subnet.linodes.length + subnet.nodebalancers.length) + ).toBeVisible(); - const actionMenuButton = getAllByRole('button')[4]; + const actionMenuButton = getByLabelText( + `Action menu for Subnet ${subnet.label}` + ); await userEvent.click(actionMenuButton); - getByText('Assign Linodes'); - getByText('Unassign Linodes'); - getByText('Edit'); - getByText('Delete'); + expect(getByText('Assign Linodes')).toBeVisible(); + expect(getByText('Unassign Linodes')).toBeVisible(); + expect(getByText('Edit')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); }); it('should display no linodes text if there are no linodes associated with the subnet', async () => { const subnet = subnetFactory.build({ linodes: [] }); - server.use( - http.get('*/vpcs/:vpcId/subnets', () => { - return HttpResponse.json(makeResourcePage([subnet])); - }), - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) - ); - - const { getAllByRole, getByText, queryByTestId } = - await renderWithThemeAndRouter( - - ); + queryMocks.useSubnetsQuery.mockReturnValue({ + data: { + data: [subnet], + }, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByLabelText, getByText } = await renderWithThemeAndRouter( + + ); - const expandTableButton = getAllByRole('button')[3]; + const expandTableButton = getByLabelText(`expand ${subnet.label} row`); await userEvent.click(expandTableButton); - getByText('No Linodes'); + expect(getByText('No Linodes')).toBeVisible(); }); it('should show linode table head data when table is expanded', async () => { const subnet = subnetFactory.build({ linodes: [subnetAssignedLinodeDataFactory.build({ id: 1 })], }); - server.use( - http.get('*/vpcs/:vpcId/subnets', () => { - return HttpResponse.json(makeResourcePage([subnet])); - }), - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) - ); - const { getAllByRole, getByText, queryByTestId } = - await renderWithThemeAndRouter( - - ); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + queryMocks.useSubnetsQuery.mockReturnValue({ + data: { + data: [subnet], + }, + }); + + const { getByLabelText, getByText } = await renderWithThemeAndRouter( + + ); - const expandTableButton = getAllByRole('button')[3]; + const expandTableButton = getByLabelText(`expand ${subnet.label} row`); await userEvent.click(expandTableButton); - getByText('Linode'); - getByText('Status'); - getByText('VPC IPv4'); - getByText('Firewalls'); + expect(getByText('Linode')).toBeVisible(); + expect(getByText('Status')).toBeVisible(); + expect(getByText('VPC IPv4')).toBeVisible(); + expect(getByText('Firewalls')).toBeVisible(); }); it( @@ -220,31 +198,22 @@ describe('VPC Subnets table', () => { async () => { const subnet = subnetFactory.build(); - server.use( - http.get('*/vpcs/:vpcId/subnets', () => { - return HttpResponse.json(makeResourcePage([subnet])); - }), - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) + queryMocks.useSubnetsQuery.mockReturnValue({ + data: { + data: [subnet], + }, + }); + + const { getByLabelText, findByText } = await renderWithThemeAndRouter( + , + { flags: { nodebalancerVpc: true } } ); - const { getAllByRole, findByText, queryByTestId } = - await renderWithThemeAndRouter( - , - { flags: { nodebalancerVpc: true } } - ); - - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } - - const expandTableButton = getAllByRole('button')[3]; + const expandTableButton = getByLabelText(`expand ${subnet.label} row`); await userEvent.click(expandTableButton); await findByText('NodeBalancer'); @@ -255,12 +224,7 @@ describe('VPC Subnets table', () => { ); it('should disable Create Subnet button if the VPC is associated with a LKE-E cluster', async () => { - server.use( - http.get('*/networking/firewalls/settings', () => { - return HttpResponse.json(firewallSettingsFactory.build()); - }) - ); - const { getByRole, queryByTestId } = await renderWithThemeAndRouter( + const { getByRole } = await renderWithThemeAndRouter( { /> ); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } - const createButton = getByRole('button', { name: 'Create Subnet', }); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.test.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.test.tsx index 324856ab533..130b80ee000 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.test.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.test.tsx @@ -16,24 +16,20 @@ describe('VPC Delete Dialog', () => { }; it('renders a VPC delete dialog correctly', async () => { - const screen = await renderWithThemeAndRouter( - - ); - const vpcTitle = screen.getByText('Delete VPC vpc-1'); + const view = await renderWithThemeAndRouter(); + const vpcTitle = view.getByText('Delete VPC vpc-1'); expect(vpcTitle).toBeVisible(); - const cancelButton = screen.getByText('Cancel'); + const cancelButton = view.getByText('Cancel'); expect(cancelButton).toBeVisible(); - const deleteButton = screen.getByText('Delete'); + const deleteButton = view.getByText('Delete'); expect(deleteButton).toBeVisible(); }); it('closes the VPC delete dialog as expected', async () => { - const screen = await renderWithThemeAndRouter( - - ); - const cancelButton = screen.getByText('Cancel'); + const view = await renderWithThemeAndRouter(); + const cancelButton = view.getByText('Cancel'); expect(cancelButton).toBeVisible(); await userEvent.click(cancelButton); expect(props.onClose).toBeCalled(); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.test.tsx index cf05fab7e30..551da16bdbf 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.test.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.test.tsx @@ -15,21 +15,19 @@ describe('Edit VPC Drawer', () => { }; it('Should render a title, label input, description input, and action buttons', () => { - const { getAllByTestId, getByTestId, getByText } = renderWithTheme( + const { getByTestId, getByText } = renderWithTheme( ); const drawerTitle = getByText('Edit VPC'); expect(drawerTitle).toBeVisible(); - const inputs = getAllByTestId('textfield-input'); - const label = getByText('Label'); - const labelInput = inputs[0]; + const labelInput = getByTestId('label'); expect(label).toBeVisible(); expect(labelInput).toBeEnabled(); const description = getByText('Description'); - const descriptionInput = inputs[1]; + const descriptionInput = getByTestId('description'); expect(description).toBeVisible(); expect(descriptionInput).toBeEnabled(); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx index c0c41440e37..750ca0a04e1 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx @@ -90,6 +90,7 @@ export const VPCEditDrawer = (props: Props) => { name="label" render={({ field, fieldState }) => ( { name="description" render={({ field, fieldState }) => ( mockMatchMedia()); -describe('VPC Landing Table', () => { - it('should render vpc landing table with items', async () => { - server.use( - http.get('*/vpcs', () => { - const vpcsWithSubnet = vpcFactory.buildList(3, { - subnets: subnetFactory.buildList(Math.floor(Math.random() * 10) + 1), - }); - return HttpResponse.json(makeResourcePage(vpcsWithSubnet)); - }) - ); +const queryMocks = vi.hoisted(() => ({ + useVPCsQuery: vi.fn().mockReturnValue({}), +})); - const { getAllByText, queryByTestId } = await renderWithThemeAndRouter( - - ); +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useVPCsQuery: queryMocks.useVPCsQuery, + }; +}); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } +describe('VPC Landing Table', () => { + it('should render vpc landing table with items', async () => { + const vpcsWithSubnet = vpcFactory.buildList(3, { + subnets: subnetFactory.buildList(Math.floor(Math.random() * 10) + 1), + }); + queryMocks.useVPCsQuery.mockReturnValue({ + data: { + data: vpcsWithSubnet, + page: 1, + pages: 1, + results: 3, + }, + }); + + const { getByText } = await renderWithThemeAndRouter(); // Static text and table column headers - getAllByText('Label'); - getAllByText('Region'); - getAllByText('VPC ID'); - getAllByText('Subnets'); - getAllByText('Linodes'); + expect(getByText('Label')).toBeVisible(); + expect(getByText('Region')).toBeVisible(); + expect(getByText('VPC ID')).toBeVisible(); + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('Linodes')).toBeVisible(); }); it('should render vpc landing table with items with nodebalancerVpc flag enabled', async () => { - server.use( - http.get('*/vpcs', () => { - const vpcsWithSubnet = vpcFactory.buildList(3, { + queryMocks.useVPCsQuery.mockReturnValue({ + data: { + data: vpcFactory.buildList(3, { subnets: subnetFactory.buildList(Math.floor(Math.random() * 10) + 1), - }); - return HttpResponse.json(makeResourcePage(vpcsWithSubnet)); - }) - ); - - const { getAllByText, queryByTestId } = await renderWithThemeAndRouter( - , - { - flags: { nodebalancerVpc: true }, - } - ); - - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + }), + page: 1, + pages: 1, + results: 3, + }, + }); + + const { getByText } = await renderWithThemeAndRouter(, { + flags: { nodebalancerVpc: true }, + }); // Static text and table column headers - getAllByText('Label'); - getAllByText('Region'); - getAllByText('VPC ID'); - getAllByText('Subnets'); - getAllByText('Resources'); + expect(getByText('Label')).toBeVisible(); + expect(getByText('Region')).toBeVisible(); + expect(getByText('VPC ID')).toBeVisible(); + expect(getByText('Subnets')).toBeVisible(); + expect(getByText('Resources')).toBeVisible(); }); it('should render vpc landing with empty state', async () => { - server.use( - http.get('*/vpcs', () => { - return HttpResponse.json(makeResourcePage([])); - }) - ); - - const { getByText, queryByTestId } = await renderWithThemeAndRouter( - - ); + queryMocks.useVPCsQuery.mockReturnValue({ + data: { + data: [], + page: 1, + pages: 1, + results: 3, + }, + }); - const loadingState = queryByTestId(loadingTestId); - if (loadingState) { - await waitForElementToBeRemoved(loadingState); - } + const { getByText } = await renderWithThemeAndRouter(); expect( getByText('Create a private and isolated network') ).toBeInTheDocument(); }); + + it('should render vpc landing with loading state', async () => { + queryMocks.useVPCsQuery.mockReturnValue({ + isLoading: true, + }); + + const { findByTestId } = await renderWithThemeAndRouter(); + + const loading = await findByTestId('circle-progress'); + expect(loading).toBeInTheDocument(); + }); }); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.test.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.test.tsx index ab70607450b..bf7ac25a795 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.test.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.test.tsx @@ -1,6 +1,7 @@ -import { fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; +import { subnetFactory } from 'src/factories'; import { vpcFactory } from 'src/factories/vpcs'; import { renderWithTheme, @@ -12,10 +13,10 @@ import { VPCRow } from './VPCRow'; describe('VPC Table Row', () => { it('should render a VPC row', () => { - const vpc = vpcFactory.build(); + const vpc = vpcFactory.build({ id: 24, subnets: [subnetFactory.build()] }); resizeScreenSize(1600); - const { getAllByText, getByText } = renderWithTheme( + const { getByText } = renderWithTheme( wrapWithTableBody( { ); // Check to see if the row rendered some data - getByText(vpc.label); - getAllByText(vpc.id); - getAllByText(vpc.subnets.length); + expect(getByText(vpc.label)).toBeVisible(); + expect(getByText(vpc.id)).toBeVisible(); + expect(getByText(vpc.subnets.length)).toBeVisible(); // 1 subnet // Check if actions were rendered - getByText('Edit'); - getByText('Delete'); + expect(getByText('Edit')).toBeVisible(); + expect(getByText('Delete')).toBeVisible(); }); - it('should have a delete button that calls the provided callback when clicked', () => { + it('should have a delete button that calls the provided callback when clicked', async () => { const vpc = vpcFactory.build(); const handleDelete = vi.fn(); - const { getAllByRole } = renderWithTheme( + const { getByTestId } = renderWithTheme( wrapWithTableBody( { /> ) ); - const deleteBtn = getAllByRole('button')[1]; - fireEvent.click(deleteBtn); + const deleteBtn = getByTestId('Delete'); + await userEvent.click(deleteBtn); expect(handleDelete).toHaveBeenCalled(); }); - it('should have an edit button that calls the provided callback when clicked', () => { + it('should have an edit button that calls the provided callback when clicked', async () => { const vpc = vpcFactory.build(); const handleEdit = vi.fn(); - const { getAllByRole } = renderWithTheme( + const { getByTestId } = renderWithTheme( wrapWithTableBody( { /> ) ); - const editButton = getAllByRole('button')[0]; - fireEvent.click(editButton); + const editButton = getByTestId('Edit'); + await userEvent.click(editButton); expect(handleEdit).toHaveBeenCalled(); }); diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx index dacac7209b4..d8b8f320759 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx @@ -98,6 +98,7 @@ export const VPCRow = ({ {actions.map((action) => ( { Assign a public IPv4 address for this Linode diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index 6546e6a99d3..bfb54f7b22b 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -165,7 +165,7 @@ export const VolumeCreate = () => { return ( - - - - + text={tooltipCopy} + tooltipPosition="right" + /> ); }; diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx index 4a4f29e63f9..ea56ea19f89 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx @@ -198,7 +198,7 @@ describe('PlanSelection (table, desktop)', () => { wrapWithTableBody() ); - const button = getByTestId('disabled-plan-tooltip'); + const button = getByTestId('tooltip-info-icon'); fireEvent.mouseOver(button); await waitFor(() => { diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx index b616a6dfb9f..531c5d9838f 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx @@ -138,12 +138,12 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { : cellName} {showTransferTooltip(cellName) && showTooltip( - 'help', + 'info', 'Some plans do not include bundled network transfer. If the transfer allotment is 0, all outbound network transfer is subject to charges.' )} {showUsableStorageTooltip(cellName) && showTooltip( - 'help', + 'info', 'Usable storage is smaller than the actual plan storage due to the overhead from the database platform.', 240 )} diff --git a/packages/manager/src/hooks/useDetermineUnreachableIPs.test.ts b/packages/manager/src/hooks/useDetermineUnreachableIPs.test.ts new file mode 100644 index 00000000000..63676e84847 --- /dev/null +++ b/packages/manager/src/hooks/useDetermineUnreachableIPs.test.ts @@ -0,0 +1,324 @@ +import { queryClientFactory } from '@linode/queries'; +import { + configFactory, + linodeConfigInterfaceFactory, + linodeConfigInterfaceFactoryWithVPC, + linodeInterfaceFactoryPublic, + linodeInterfaceFactoryVlan, + linodeInterfaceFactoryVPC, +} from '@linode/utilities'; +import { renderHook, waitFor } from '@testing-library/react'; + +import { makeResourcePage } from 'src/mocks/serverHandlers'; +import { http, HttpResponse, server } from 'src/mocks/testServer'; +import { wrapWithTheme } from 'src/utilities/testHelpers'; + +import { + useDetermineUnreachableIPsConfigInterface, + useDetermineUnreachableIPsLinodeInterface, +} from './useDetermineUnreachableIPs'; + +const queryClient = queryClientFactory(); + +describe('useDetermineUnreachableIPsLinodeInterface', () => { + beforeEach(() => { + queryClient.clear(); + }); + + it('shows that public ipv4 and ipv6 are both unreachable if Linode has no interfaces', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ interfaces: [] }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(true); + }); + }); + + it('shows that public ipv6 is unreachable if Linode has no public interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [ + linodeInterfaceFactoryVPC.build({ + vpc: { + ipv4: { + addresses: [ + { + address: '10.0.0.0', + primary: true, + nat_1_1_address: 'auto', + }, + ], + }, + }, + }), + ], + }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(false); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(true); + }); + }); + + it('shows that public ipv4 (and ipv6) are both unreachable if Linode is "VPC only" and has no public interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [linodeInterfaceFactoryVPC.build()], + }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(true); + }); + }); + + it('shows that public ipv4 (and ipv6) are both unreachable if Linode only has a VLAN interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [linodeInterfaceFactoryVlan.build()], + }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(true); + }); + }); + + it('shows that public ipv4 is unreachable (but ipv6 is reachable) if Linode is a "VPC only Linode" and has public interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [ + linodeInterfaceFactoryVPC.build(), + linodeInterfaceFactoryPublic.build(), + ], + }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(false); + }); + }); + + it('shows public IPs are reachable if Linode is not a "VPC only Linode" and has public interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/interfaces', () => { + return HttpResponse.json({ + interfaces: [ + linodeInterfaceFactoryVlan.build(), + linodeInterfaceFactoryPublic.build(), + ], + }); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsLinodeInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4LinodeInterface).toBe(false); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6LinodeInterface).toBe(false); + }); + }); +}); + +describe('useDetermineUnreachableIPsConfigInterface', () => { + beforeEach(() => { + queryClient.clear(); + }); + + it('shows that public ipv4 (and ipv6) are both unreachable if Linode is "VPC only" and has no public interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/configs', () => { + return HttpResponse.json( + makeResourcePage([ + configFactory.build({ + interfaces: [ + linodeConfigInterfaceFactoryWithVPC.build({ + primary: true, + ipv4: { + vpc: '10.0.0.0', + nat_1_1: undefined, + }, + }), + ], + }), + ]) + ); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsConfigInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4ConfigInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6ConfigInterface).toBe(true); + }); + }); + + it('shows public IPv6 is not reachable if Linode has interfaces but none of them are public', async () => { + server.use( + http.get('*/linode/instances/:linodeId/configs', () => { + return HttpResponse.json( + makeResourcePage([ + configFactory.build({ + // vpc interface, not VPC only linode + interfaces: [ + linodeConfigInterfaceFactoryWithVPC.build({ + primary: true, + }), + ], + }), + ]) + ); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsConfigInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4ConfigInterface).toBe(false); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6ConfigInterface).toBe(true); + }); + }); + + it('shows that public ipv4 (and ipv6) are both unreachable if Linode only VLAN interface', async () => { + server.use( + http.get('*/linode/instances/:linodeId/configs', () => { + return HttpResponse.json( + makeResourcePage([ + configFactory.build({ + interfaces: [linodeConfigInterfaceFactory.build()], + }), + ]) + ); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsConfigInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4ConfigInterface).toBe(true); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6ConfigInterface).toBe(true); + }); + }); + + it('determines public IPs are reachable if Linode has no interfaces (see comments in hook)', async () => { + server.use( + http.get('*/linode/instances/:linodeId/configs', () => { + return HttpResponse.json(makeResourcePage([])); + }) + ); + + const { result } = renderHook( + () => useDetermineUnreachableIPsConfigInterface(1, true), + { + wrapper: (ui) => wrapWithTheme(ui, { queryClient }), + } + ); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv4ConfigInterface).toBe(false); + }); + + await waitFor(() => { + expect(result.current.isUnreachablePublicIPv6ConfigInterface).toBe(false); + }); + }); +}); diff --git a/packages/manager/src/hooks/useDetermineUnreachableIPs.ts b/packages/manager/src/hooks/useDetermineUnreachableIPs.ts new file mode 100644 index 00000000000..49aa63e03ca --- /dev/null +++ b/packages/manager/src/hooks/useDetermineUnreachableIPs.ts @@ -0,0 +1,182 @@ +import { + useAllLinodeConfigsQuery, + useLinodeInterfacesQuery, + useVPCQuery, +} from '@linode/queries'; + +import { getPrimaryInterfaceIndex } from 'src/features/Linodes/LinodesDetail/LinodeConfigs/utilities'; + +import type { Interface } from '@linode/api-v4/lib/linodes/types'; + +/** + * Returns whether the given Linode (id) has an unreachable public IPv4 and IPv6, as well as + * additional interface information. + * + * Returns the VPC Interface and VPC the Linode with the given ID is assigned to. Determines + * whether to use config profile related queries or Linode Interface related queries + * based on the types of interfaces this Linode is using + */ +export const useDetermineUnreachableIPs = (inputs: { + isLinodeInterface: boolean; + linodeId: number; +}) => { + const { isLinodeInterface, linodeId } = inputs; + + const { + linodeInterfaceWithVPC, + isUnreachablePublicIPv4LinodeInterface, + isUnreachablePublicIPv6LinodeInterface, + vpcLinodeIsAssignedTo: vpcLinodeIsAssignedToInterface, + } = useDetermineUnreachableIPsLinodeInterface(linodeId, isLinodeInterface); + const { + interfaceWithVPC: configInterfaceWithVPC, + configs, + isUnreachablePublicIPv6ConfigInterface, + isUnreachablePublicIPv4ConfigInterface, + vpcLinodeIsAssignedTo: vpcLinodeIsAssignedToConfig, + } = useDetermineUnreachableIPsConfigInterface(linodeId, !isLinodeInterface); + + const isUnreachablePublicIPv4 = isLinodeInterface + ? isUnreachablePublicIPv4LinodeInterface + : isUnreachablePublicIPv4ConfigInterface; + const isUnreachablePublicIPv6 = isLinodeInterface + ? isUnreachablePublicIPv6LinodeInterface + : isUnreachablePublicIPv6ConfigInterface; + const vpcLinodeIsAssignedTo = + vpcLinodeIsAssignedToConfig ?? vpcLinodeIsAssignedToInterface; + + return { + configs, // undefined if this Linode is using Linode Interfaces + interfaceWithVPC: linodeInterfaceWithVPC ?? configInterfaceWithVPC, + isUnreachablePublicIPv4, + isUnreachablePublicIPv6, + vpcLinodeIsAssignedTo, + }; +}; + +/** + * Linode Interface equivalent to useDetermineReachableIPsConfigInterface + * Returns whether the public IPv4/IPv6 are reachable, the VPC Linode interface, + * and the VPC of that interface + */ +export const useDetermineUnreachableIPsLinodeInterface = ( + linodeId: number, + enabled: boolean = true +) => { + const { data: interfaces } = useLinodeInterfacesQuery(linodeId, enabled); + + const vpcInterfaces = interfaces?.interfaces.filter((iface) => iface.vpc); + + // Some Linodes may have multiple VPC Linode interfaces. If so, we want the interface that + // is a default route (otherwise just get the first one) + const linodeInterfaceWithVPC = + vpcInterfaces?.find((vpcIface) => vpcIface.default_route.ipv4) ?? + vpcInterfaces?.[0]; + + const { data: vpcLinodeIsAssignedTo } = useVPCQuery( + linodeInterfaceWithVPC?.vpc?.vpc_id ?? -1, + Boolean(vpcInterfaces?.length) && enabled + ); + + // For Linode Interfaces, a VPC only Linode is a VPC interface that is the default route for ipv4 + // but doesn't have a nat_1_1 val + const isVPCOnlyLinodeInterface = Boolean( + linodeInterfaceWithVPC?.default_route.ipv4 && + !linodeInterfaceWithVPC?.vpc?.ipv4?.addresses.some( + (address) => address.nat_1_1_address + ) + ); + + const isUnreachablePublicIPv4LinodeInterface = + isVPCOnlyLinodeInterface || + !interfaces?.interfaces.some((iface) => iface.default_route.ipv4); + + // public IPv6 is (currently) not reachable if Linode has no public interfaces + const isUnreachablePublicIPv6LinodeInterface = !interfaces?.interfaces.some( + (iface) => iface.public + ); + + return { + isUnreachablePublicIPv4LinodeInterface, + isUnreachablePublicIPv6LinodeInterface, + linodeInterfaceWithVPC, + vpcLinodeIsAssignedTo, + }; +}; + +/** + * Legacy Config Interface equivalent to useDetermineUnreachableIPsLinodeInterface + * Returns whether the public IPv4/IPv6 are reachable, the VPC config interface, and the + * VPC associated with that interface + */ +export const useDetermineUnreachableIPsConfigInterface = ( + linodeId: number, + enabled: boolean = true +) => { + const { data: configs } = useAllLinodeConfigsQuery(linodeId, enabled); + let interfaceWithVPC: Interface | undefined; + + const configWithVPCInterface = configs?.find((config) => { + const interfaces = config.interfaces; + + const _interfaceWithVPC = interfaces?.find( + (_interface) => _interface.purpose === 'vpc' + ); + + if (_interfaceWithVPC) { + interfaceWithVPC = _interfaceWithVPC; + } + + return config; + }); + + const primaryInterfaceIndex = getPrimaryInterfaceIndex( + configWithVPCInterface?.interfaces ?? [] + ); + + const vpcInterfaceIndex = configWithVPCInterface?.interfaces?.findIndex( + (_interface) => _interface.id === interfaceWithVPC?.id + ); + + const { data: vpcLinodeIsAssignedTo } = useVPCQuery( + interfaceWithVPC?.vpc_id ?? -1, + Boolean(interfaceWithVPC) && enabled + ); + + // A VPC-only Linode is a Linode that has at least one primary VPC interface (either explicit or implicit) and purpose vpc and no ipv4.nat_1_1 value + const isVPCOnlyLinode = Boolean( + (interfaceWithVPC?.primary || + primaryInterfaceIndex === vpcInterfaceIndex) && + !interfaceWithVPC?.ipv4?.nat_1_1 + ); + + const hasConfigInterfaces = + configWithVPCInterface?.interfaces && + configWithVPCInterface?.interfaces.length > 0; + + // For legacy config interfaces, if a Linode has no interfaces, the API automatically provides public connectivity. + // IPv6 is unreachable if the Linode has interfaces and none of these interfaces are a public interface + const isUnreachablePublicIPv6ConfigInterface = Boolean( + hasConfigInterfaces && + !configWithVPCInterface?.interfaces?.some( + (_interface) => _interface.purpose === 'public' + ) + ); + + const isUnreachablePublicIPv4ConfigInterface = + isVPCOnlyLinode || + Boolean( + hasConfigInterfaces && + configWithVPCInterface?.interfaces?.every( + (iface) => iface.purpose === 'vlan' + ) + ); + + return { + interfaceWithVPC, + configs, + isUnreachablePublicIPv6ConfigInterface, + isUnreachablePublicIPv4ConfigInterface, + vpcLinodeIsAssignedTo, + }; +}; diff --git a/packages/manager/src/hooks/usePagination.ts b/packages/manager/src/hooks/usePagination.ts index 32783b36e58..b27bf44249e 100644 --- a/packages/manager/src/hooks/usePagination.ts +++ b/packages/manager/src/hooks/usePagination.ts @@ -1,5 +1,5 @@ import { useMutatePreferences, usePreferences } from '@linode/queries'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from '@tanstack/react-router'; import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants'; @@ -26,35 +26,34 @@ export const usePagination = ( ); const { mutateAsync: updatePreferences } = useMutatePreferences(); - const history = useHistory(); + const navigate = useNavigate(); const location = useLocation(); + const preferedPageSize = preferenceKey + ? (pageSizePreferences?.[preferenceKey] ?? MIN_PAGE_SIZE) + : MIN_PAGE_SIZE; const pageKey = queryParamsPrefix ? `${queryParamsPrefix}-page` : 'page'; const pageSizeKey = queryParamsPrefix ? `${queryParamsPrefix}-pageSize` : 'pageSize'; - const searchParams = new URLSearchParams(location.search); - const searchParamPage = searchParams.get(pageKey); - const searchParamPageSize = searchParams.get(pageSizeKey); - - const preferedPageSize = preferenceKey - ? (pageSizePreferences?.[preferenceKey] ?? MIN_PAGE_SIZE) - : MIN_PAGE_SIZE; + const searchParams: { [key: string]: any } = { + ...location.search, + }; + const searchParamPage = searchParams[pageKey]; + const searchParamPageSize = searchParams[pageSizeKey]; - const page = searchParamPage ? Number(searchParamPage) : initialPage; - const pageSize = searchParamPageSize - ? Number(searchParamPageSize) - : preferedPageSize; + const page = searchParamPage ? searchParamPage : initialPage; + const pageSize = searchParamPageSize ? searchParamPageSize : preferedPageSize; const setPage = (p: number) => { - searchParams.set(pageKey, String(p)); - history.replace(`?${searchParams.toString()}`); + searchParams[pageKey] = p; + navigate({ to: location.pathname, search: searchParams }); }; const setPageSize = (size: number) => { - searchParams.set(pageSizeKey, String(size)); - history.replace(`?${searchParams.toString()}`); + searchParams[pageSizeKey] = size; + navigate({ to: location.pathname, search: searchParams }); }; const handlePageSizeChange = (newPageSize: number) => { diff --git a/packages/manager/src/hooks/usePendo.ts b/packages/manager/src/hooks/usePendo.ts index 08dde8ca39c..ee6807b1ac9 100644 --- a/packages/manager/src/hooks/usePendo.ts +++ b/packages/manager/src/hooks/usePendo.ts @@ -2,8 +2,9 @@ import { useAccount, useProfile } from '@linode/queries'; import { loadScript } from '@linode/utilities'; // `loadScript` from `useScript` hook import React from 'react'; -import { ADOBE_ANALYTICS_URL, APP_ROOT, PENDO_API_KEY } from 'src/constants'; +import { ADOBE_ANALYTICS_URL, PENDO_API_KEY } from 'src/constants'; import { reportException } from 'src/exceptionReporting'; +import { getAppRoot } from 'src/OAuth/constants'; declare global { interface Window { @@ -17,9 +18,11 @@ declare global { * @returns Unique ID for the environment; else, undefined if missing values. */ const getUniquePendoId = (id: string | undefined) => { - const isProdEnv = APP_ROOT === 'https://cloud.linode.com'; + const appRoot = getAppRoot(); - if (!id || !APP_ROOT) { + const isProdEnv = appRoot === 'https://cloud.linode.com'; + + if (!id || !appRoot) { return; } diff --git a/packages/manager/src/hooks/useSessionExpiryToast.ts b/packages/manager/src/hooks/useSessionExpiryToast.ts new file mode 100644 index 00000000000..444d3bdfc42 --- /dev/null +++ b/packages/manager/src/hooks/useSessionExpiryToast.ts @@ -0,0 +1,58 @@ +import { isNumeric } from '@linode/utilities'; +import { useSnackbar } from 'notistack'; +import { useEffect } from 'react'; + +import { getIsAdminToken } from 'src/OAuth/oauth'; +import { storage } from 'src/utilities/storage'; + +export const useSessionExpiryToast = () => { + const { enqueueSnackbar } = useSnackbar(); + + useEffect(() => { + const token = storage.authentication.token.get(); + const expiresAt = storage.authentication.expire.get(); + + if (!token || !expiresAt) { + // Early return if no token is stored. + return; + } + + /** + * Only show the session expiry toast for **admins** that have logged in as a customer. + * Do **not** show a session expiry for regular customers. + * (We can change this in the future if we want, we just need to run it by product) + */ + if (!getIsAdminToken(token)) { + // Early return if we're not logged in as a customer + return; + } + + // This value use to be a string representation of the date but now it is + // a unix timestamp. Early return if it is the old format. + if (!isNumeric(expiresAt)) { + return; + } + + const millisecondsUntilTokenExpires = +expiresAt - Date.now(); + + // Show an expiry toast 1 minute before token expires. + const showToastIn = millisecondsUntilTokenExpires - 60 * 1000; + + if (showToastIn <= 0) { + // Token has already expired + return; + } + + const timeout = setTimeout(() => { + enqueueSnackbar('Your session will expire in 1 minute.', { + variant: 'info', + }); + }, showToastIn); + + return () => { + clearTimeout(timeout); + }; + }, []); + + return null; +}; diff --git a/packages/manager/src/hooks/useUpcomingMaintenanceNotice.ts b/packages/manager/src/hooks/useUpcomingMaintenanceNotice.ts new file mode 100644 index 00000000000..7b2c3dda8d2 --- /dev/null +++ b/packages/manager/src/hooks/useUpcomingMaintenanceNotice.ts @@ -0,0 +1,57 @@ +import { useAllAccountMaintenanceQuery } from '@linode/queries'; +import { useWatch } from 'react-hook-form'; +import type { UseFormReturn } from 'react-hook-form'; + +import { UPCOMING_MAINTENANCE_FILTER } from 'src/features/Account/Maintenance/utilities'; + +import type { AccountSettings } from '@linode/api-v4'; + +export type MaintenancePolicyValues = Pick< + AccountSettings, + 'maintenance_policy' +>; + +interface UseUpcomingMaintenanceNoticeProps { + control: UseFormReturn['control']; + entityId?: number; + entityType?: 'linode' | 'volume'; +} + +export const useUpcomingMaintenanceNotice = ({ + control, + entityId, + entityType = 'linode', +}: UseUpcomingMaintenanceNoticeProps) => { + const selectedMaintenancePolicy = useWatch({ + control, + name: 'maintenance_policy', + }); + + const { data: upcomingMaintenance } = useAllAccountMaintenanceQuery( + {}, + UPCOMING_MAINTENANCE_FILTER, + true // Always fetch for account-level settings + ); + + // Check if there's upcoming maintenance for the specific entity or any entity if no entityId provided + const entityUpcomingMaintenance = upcomingMaintenance?.find((maintenance) => { + const matchesEntityType = maintenance.entity.type === entityType; + const matchesEntityId = entityId + ? maintenance.entity.id === entityId + : true; + const isScheduled = maintenance.status === 'scheduled'; + const policyDiffers = + maintenance.maintenance_policy_set !== selectedMaintenancePolicy; + + return matchesEntityType && matchesEntityId && isScheduled && policyDiffers; + }); + + const showUpcomingMaintenanceNotice = + entityUpcomingMaintenance && selectedMaintenancePolicy; + + return { + showUpcomingMaintenanceNotice, + entityUpcomingMaintenance, + selectedMaintenancePolicy, + }; +}; diff --git a/packages/manager/src/hooks/useVPCConfigInterface.ts b/packages/manager/src/hooks/useVPCConfigInterface.ts deleted file mode 100644 index e3cedc2dd26..00000000000 --- a/packages/manager/src/hooks/useVPCConfigInterface.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { useAllLinodeConfigsQuery, useVPCQuery } from '@linode/queries'; - -import { getPrimaryInterfaceIndex } from 'src/features/Linodes/LinodesDetail/LinodeConfigs/utilities'; - -import type { Interface } from '@linode/api-v4/lib/linodes/types'; - -export const useVPCConfigInterface = ( - linodeId: number, - enabled: boolean = true -) => { - const { data: configs } = useAllLinodeConfigsQuery(linodeId, enabled); - let configInterfaceWithVPC: Interface | undefined; - - const configWithVPCInterface = configs?.find((config) => { - const interfaces = config.interfaces; - - const interfaceWithVPC = interfaces?.find( - (_interface) => _interface.purpose === 'vpc' - ); - - if (interfaceWithVPC) { - configInterfaceWithVPC = interfaceWithVPC; - } - - return config; - }); - - const primaryInterfaceIndex = getPrimaryInterfaceIndex( - configWithVPCInterface?.interfaces ?? [] - ); - - const vpcInterfaceIndex = configWithVPCInterface?.interfaces?.findIndex( - (_interface) => _interface.id === configInterfaceWithVPC?.id - ); - - const { data: vpcLinodeIsAssignedTo } = useVPCQuery( - configInterfaceWithVPC?.vpc_id ?? -1, - Boolean(configInterfaceWithVPC) && enabled - ); - - // A VPC-only Linode is a Linode that has at least one primary VPC interface (either explicit or implicit) and purpose vpc and no ipv4.nat_1_1 value - const isVPCOnlyLinode = Boolean( - (configInterfaceWithVPC?.primary || - primaryInterfaceIndex === vpcInterfaceIndex) && - !configInterfaceWithVPC?.ipv4?.nat_1_1 - ); - - return { - configInterfaceWithVPC, - configs, - isVPCOnlyLinode, - vpcLinodeIsAssignedTo, - }; -}; diff --git a/packages/manager/src/hooks/useVPCInterface.ts b/packages/manager/src/hooks/useVPCInterface.ts deleted file mode 100644 index 508b16654c7..00000000000 --- a/packages/manager/src/hooks/useVPCInterface.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { useLinodeInterfacesQuery, useVPCQuery } from '@linode/queries'; - -import { useVPCConfigInterface } from './useVPCConfigInterface'; - -/** - * Returns the VPC Interface and VPC the Linode with the given ID is assigned to. Determines - * whether to use config profile related queries or Linode Interface related queries - * based on the types of interfaces this Linode is using - */ -export const useVPCInterface = (inputs: { - isLinodeInterface: boolean; - linodeId: number; -}) => { - const { isLinodeInterface, linodeId } = inputs; - - const { - hasPublicLinodeInterface, - isVPCOnlyLinodeInterface, - linodeInterfaceWithVPC, - vpcLinodeIsAssignedTo: vpcLinodeIsAssignedToInterface, - } = useVPCLinodeInterface(linodeId, isLinodeInterface); - const { - configInterfaceWithVPC, - configs, - isVPCOnlyLinode: isVPCOnlyLinodeConfig, - vpcLinodeIsAssignedTo: vpcLinodeIsAssignedToConfig, - } = useVPCConfigInterface(linodeId, !isLinodeInterface); - - const isVPCOnlyLinode = isVPCOnlyLinodeConfig || isVPCOnlyLinodeInterface; - const vpcLinodeIsAssignedTo = - vpcLinodeIsAssignedToConfig ?? vpcLinodeIsAssignedToInterface; - - return { - configs, // undefined if this Linode is using Linode Interfaces - hasPublicLinodeInterface, // undefined if this Linode is using config interfaces. Is only used when the Linode is known to be using Linode Interfaces - interfaceWithVPC: linodeInterfaceWithVPC ?? configInterfaceWithVPC, - isVPCOnlyLinode, - vpcLinodeIsAssignedTo, - }; -}; - -/** - * Linode Interface equivalent to useVPCConfigInterface - * Returns the active VPC Linode interface (an VPC interface that is the default route for IPv4), - * the VPC of that interface, and if this Linode is a VPC only Linode - */ -export const useVPCLinodeInterface = ( - linodeId: number, - enabled: boolean = true -) => { - const { data: interfaces } = useLinodeInterfacesQuery(linodeId, enabled); - - const vpcInterfaces = interfaces?.interfaces.filter((iface) => iface.vpc); - - // if a Linode is a VPCOnlyLinode but has a public interface, its public IPv4 address will be associated with - // this public interface, but just won't be the default route - const hasPublicLinodeInterface = interfaces?.interfaces.some( - (iface) => iface.public - ); - - // Some Linodes may have multiple VPC Linode interfaces. If so, we want the interface that - // is a default route (otherwise just get the first one) - const linodeInterfaceWithVPC = - vpcInterfaces?.find((vpcIface) => vpcIface.default_route.ipv4) ?? - vpcInterfaces?.[0]; - - const { data: vpcLinodeIsAssignedTo } = useVPCQuery( - linodeInterfaceWithVPC?.vpc?.vpc_id ?? -1, - Boolean(vpcInterfaces?.length) && enabled - ); - - // For Linode Interfaces, a VPC only Linode is a VPC interface that is the default route for ipv4 - // but doesn't have a nat_1_1 val - const isVPCOnlyLinodeInterface = Boolean( - linodeInterfaceWithVPC?.default_route.ipv4 && - !linodeInterfaceWithVPC?.vpc?.ipv4?.addresses.some( - (address) => address.nat_1_1_address - ) - ); - - return { - hasPublicLinodeInterface, - isVPCOnlyLinodeInterface, - linodeInterfaceWithVPC, - vpcLinodeIsAssignedTo, - }; -}; diff --git a/packages/manager/src/index.css b/packages/manager/src/index.css index 3496564413d..a262deec22f 100644 --- a/packages/manager/src/index.css +++ b/packages/manager/src/index.css @@ -225,46 +225,12 @@ a.black:not(.nu):active { } */ /* Reusable Classes */ -.mlMain { - width: 100%; - flex-basis: 100%; -} -.mlSidebar { - width: 100%; - flex-basis: 100%; - margin-top: 24px !important; -} - .flexCenter { display: flex; flex-direction: row; align-items: center; } -@media (min-width: 960px) { - .mlMain { - max-width: 70%; - flex-basis: 70%; - } - .mlSidebar { - position: sticky; - top: 0; - align-self: flex-start; - max-width: 30%; - padding: 8px !important; - margin-top: 0 !important; - } -} -@media (min-width: 1280px) { - .mlMain { - max-width: 78.8%; - flex-basis: 78.8%; - } - .mlSidebar { - max-width: 21.2%; - padding: 8px 14px !important; - } -} .p0 { padding: 0 !important; } diff --git a/packages/manager/src/index.tsx b/packages/manager/src/index.tsx index 2b6a6ba0ec7..68f36a65cc7 100644 --- a/packages/manager/src/index.tsx +++ b/packages/manager/src/index.tsx @@ -13,26 +13,38 @@ import { SplashScreen } from 'src/components/SplashScreen'; import { setupInterceptors } from 'src/request'; import { storeFactory } from 'src/store'; -import { App } from './App'; import './index.css'; import { ENABLE_DEV_TOOLS } from './constants'; -import { Logout } from './layouts/Logout'; import { LinodeThemeWrapper } from './LinodeThemeWrapper'; const Lish = React.lazy(() => import('src/features/Lish')); +const App = React.lazy(() => + import('./App').then((module) => ({ + default: module.App, + })) +); + const CancelLanding = React.lazy(() => import('src/features/CancelLanding/CancelLanding').then((module) => ({ default: module.CancelLanding, })) ); +const Logout = React.lazy(() => + import('./OAuth/Logout').then((module) => ({ + default: module.Logout, + })) +); + const LoginAsCustomerCallback = React.lazy(() => - import('src/layouts/LoginAsCustomerCallback').then((module) => ({ + import('src/OAuth/LoginAsCustomerCallback').then((module) => ({ default: module.LoginAsCustomerCallback, })) ); -const OAuthCallbackPage = React.lazy(() => import('src/layouts/OAuth')); +const OAuthCallback = React.lazy(() => + import('src/OAuth/OAuthCallback').then((m) => ({ default: m.OAuthCallback })) +); const queryClient = queryClientFactory('longLived'); const store = storeFactory(); @@ -60,7 +72,7 @@ const Main = () => { }> diff --git a/packages/manager/src/initSentry.ts b/packages/manager/src/initSentry.ts index bc76feccdef..544c8635e08 100644 --- a/packages/manager/src/initSentry.ts +++ b/packages/manager/src/initSentry.ts @@ -1,7 +1,7 @@ import { deepStringTransform, redactAccessToken } from '@linode/utilities'; import { init } from '@sentry/react'; -import { APP_ROOT, SENTRY_URL } from 'src/constants'; +import { ENVIRONMENT_NAME, SENTRY_URL } from 'src/constants'; import packageJson from '../package.json'; @@ -9,8 +9,6 @@ import type { APIError } from '@linode/api-v4'; import type { ErrorEvent as SentryErrorEvent } from '@sentry/react'; export const initSentry = () => { - const environment = getSentryEnvironment(); - if (SENTRY_URL) { init({ allowUrls: [ @@ -29,7 +27,7 @@ export const initSentry = () => { /^chrome:\/\//i, ], dsn: SENTRY_URL, - environment, + environment: ENVIRONMENT_NAME, ignoreErrors: [ // Random plugins/extensions 'top.GLOBALS', @@ -212,20 +210,3 @@ const customFingerPrintMap = { localstorage: 'Local Storage Error', quotaExceeded: 'Local Storage Error', }; - -/** - * Derives a environment name from the APP_ROOT environment variable - * so a Sentry issue is identified by the correct environment name. - */ -const getSentryEnvironment = () => { - if (APP_ROOT === 'https://cloud.linode.com') { - return 'production'; - } - if (APP_ROOT.includes('staging')) { - return 'staging'; - } - if (APP_ROOT.includes('dev')) { - return 'dev'; - } - return 'local'; -}; diff --git a/packages/manager/src/layouts/LoginAsCustomerCallback.tsx b/packages/manager/src/layouts/LoginAsCustomerCallback.tsx deleted file mode 100644 index e61f1bbc838..00000000000 --- a/packages/manager/src/layouts/LoginAsCustomerCallback.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/** - * This component is similar to the OAuth comonent, in that it's main - * purpose is to consume the data given from the hash params provided from - * where the user was navigated from. In the case of this component, the user - * was navigated from Admin and the query params differ from what they would be - * if the user was navgiated from Login. Further, we are doing no nonce checking here - */ - -import { capitalize, getQueryParamsFromQueryString } from '@linode/utilities'; -import { useEffect } from 'react'; -import type { RouteComponentProps } from 'react-router-dom'; - -import { setAuthDataInLocalStorage } from 'src/OAuth/utils'; - -import type { BaseQueryParams } from '@linode/utilities'; - -interface QueryParams extends BaseQueryParams { - access_token: string; - destination: string; - expires_in: string; - token_type: string; -} - -export const LoginAsCustomerCallback = (props: RouteComponentProps) => { - useEffect(() => { - /** - * If this URL doesn't have a fragment, or doesn't have enough entries, we know we don't have - * the data we need and should bounce. - * location.hash is a string which starts with # and is followed by a basic query params stype string. - * - * 'location.hash = `#access_token=something&token_type=Admin&destination=linodes/1234` - * - */ - const { history, location } = props; - - /** - * If the hash doesn't contain a string after the #, there's no point continuing as we dont have - * the query params we need. - */ - - if (!location.hash || location.hash.length < 2) { - return history.push('/'); - } - - const hashParams = getQueryParamsFromQueryString( - location.hash.substr(1) - ); - - const { - access_token: accessToken, - destination, - expires_in: expiresIn, - token_type: tokenType, - } = hashParams; - - /** If the access token wasn't returned, something is wrong and we should bail. */ - if (!accessToken) { - return history.push('/'); - } - - /** - * We multiply the expiration time by 1000 ms because JavaSript returns time in ms, while - * the API returns the expiry time in seconds - */ - const expireDate = new Date(); - expireDate.setTime(expireDate.getTime() + +expiresIn * 1000); - - /** - * We have all the information we need and can persist it to localStorage - */ - setAuthDataInLocalStorage({ - token: `${capitalize(tokenType)} ${accessToken}`, - scopes: '*', - expires: expireDate.toString(), - }); - - /** - * All done, redirect to the destination from the hash params - * NOTE: the param does not include a leading slash - */ - history.push(`/${destination}`); - }, []); - - return null; -}; diff --git a/packages/manager/src/layouts/OAuth.test.tsx b/packages/manager/src/layouts/OAuth.test.tsx deleted file mode 100644 index ac81700170c..00000000000 --- a/packages/manager/src/layouts/OAuth.test.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import { getQueryParamsFromQueryString } from '@linode/utilities'; -import { createMemoryHistory } from 'history'; -import * as React from 'react'; -import { act } from 'react'; - -import { LOGIN_ROOT } from 'src/constants'; -import { OAuthCallbackPage } from 'src/layouts/OAuth'; -import * as utils from 'src/OAuth/utils'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - -import type { OAuthQueryParams } from './OAuth'; -import type { MemoryHistory } from 'history'; - -const setAuthDataInLocalStorage = vi.spyOn(utils, 'setAuthDataInLocalStorage'); - -describe('layouts/OAuth', () => { - describe('parseQueryParams', () => { - const NONCE_CHECK_KEY = 'authentication/nonce'; - const CODE_VERIFIER_KEY = 'authentication/code-verifier'; - const history: MemoryHistory = createMemoryHistory(); - history.push = vi.fn(); - - const location = { - hash: '', - pathname: '/oauth/callback', - search: - '?returnTo=%2F&state=9f16ac6c-5518-4b96-b4a6-26a16f85b127&code=bf952e05db75a45a51f5', - state: {}, - }; - - const match = { - isExact: false, - params: {}, - path: '', - url: '', - }; - - const mockProps = { - history: { - ...history, - location: { - ...location, - search: - '?code=test-code&returnTo=/&state=9f16ac6c-5518-4b96-b4a6-26a16f85b127', - }, - push: vi.fn(), - }, - location: { - ...location, - search: - '?code=test-code&returnTo=/&state=9f16ac6c-5518-4b96-b4a6-26a16f85b127', - }, - match, - }; - - let originalLocation: Location; - - beforeEach(() => { - originalLocation = window.location; - window.location = { assign: vi.fn() } as any; - }); - - afterEach(() => { - window.location = originalLocation; - vi.clearAllMocks(); - }); - - it('parses query params of the expected format', () => { - const res = getQueryParamsFromQueryString( - 'code=someCode&returnTo=some%20Url&state=someState' - ); - expect(res.code).toBe('someCode'); - expect(res.returnTo).toBe('some Url'); - expect(res.state).toBe('someState'); - }); - - it('returns an empty object for an empty string', () => { - const res = getQueryParamsFromQueryString(''); - expect(res).toStrictEqual({}); - }); - - it("doesn't truncate values that include =", () => { - const res = getQueryParamsFromQueryString( - 'code=123456&returnTo=https://localhost:3000/oauth/callback?returnTo=/asdf' - ); - expect(res.code).toBe('123456'); - expect(res.returnTo).toBe( - 'https://localhost:3000/oauth/callback?returnTo=/asdf' - ); - }); - - it('Should redirect to logout path when nonce is different', async () => { - localStorage.setItem( - CODE_VERIFIER_KEY, - '9Oc5c0RIXQxSRK7jKH4seN_O4w-CGvz6IMJ4Zit1gG1Y3pNsqGYUK6kH-oLpkVLqVEkCalJMGWzvF3TEawBLfw' - ); - localStorage.setItem( - NONCE_CHECK_KEY, - 'different_9f16ac6c-5518-4b96-b4a6-26a16f85b127' - ); - global.fetch = vi.fn().mockResolvedValue({ - ok: false, - }); - - await act(async () => { - renderWithTheme(); - }); - - expect(setAuthDataInLocalStorage).not.toHaveBeenCalled(); - expect(window.location.assign).toHaveBeenCalledWith( - `${LOGIN_ROOT}` + '/logout' - ); - }); - - it('Should redirect to logout path when nonce is different', async () => { - localStorage.setItem( - CODE_VERIFIER_KEY, - '9Oc5c0RIXQxSRK7jKH4seN_O4w-CGvz6IMJ4Zit1gG1Y3pNsqGYUK6kH-oLpkVLqVEkCalJMGWzvF3TEawBLfw' - ); - localStorage.setItem( - NONCE_CHECK_KEY, - 'different_9f16ac6c-5518-4b96-b4a6-26a16f85b127' - ); - global.fetch = vi.fn().mockResolvedValue({ - ok: false, - }); - - await act(async () => { - renderWithTheme(); - }); - - expect(setAuthDataInLocalStorage).not.toHaveBeenCalled(); - expect(window.location.assign).toHaveBeenCalledWith( - `${LOGIN_ROOT}` + '/logout' - ); - }); - - it('Should redirect to logout path when token exchange call fails', async () => { - localStorage.setItem( - CODE_VERIFIER_KEY, - '9Oc5c0RIXQxSRK7jKH4seN_O4w-CGvz6IMJ4Zit1gG1Y3pNsqGYUK6kH-oLpkVLqVEkCalJMGWzvF3TEawBLfw' - ); - localStorage.setItem( - NONCE_CHECK_KEY, - '9f16ac6c-5518-4b96-b4a6-26a16f85b127' - ); - global.fetch = vi.fn().mockResolvedValue({ - ok: false, - }); - - await act(async () => { - renderWithTheme(); - }); - - expect(setAuthDataInLocalStorage).not.toHaveBeenCalled(); - expect(window.location.assign).toHaveBeenCalledWith( - `${LOGIN_ROOT}` + '/logout' - ); - }); - - it('Should redirect to logout path when no code verifier in local storage', async () => { - await act(async () => { - renderWithTheme(); - }); - - expect(setAuthDataInLocalStorage).not.toHaveBeenCalled(); - expect(window.location.assign).toHaveBeenCalledWith( - `${LOGIN_ROOT}` + '/logout' - ); - }); - - it('exchanges authorization code for token and dispatches session start', async () => { - localStorage.setItem( - CODE_VERIFIER_KEY, - '9Oc5c0RIXQxSRK7jKH4seN_O4w-CGvz6IMJ4Zit1gG1Y3pNsqGYUK6kH-oLpkVLqVEkCalJMGWzvF3TEawBLfw' - ); - localStorage.setItem( - NONCE_CHECK_KEY, - '9f16ac6c-5518-4b96-b4a6-26a16f85b127' - ); - - global.fetch = vi.fn().mockResolvedValue({ - json: () => - Promise.resolve({ - access_token: - '198864fedc821dbb5941cd5b8c273b4e25309a08d31c77cbf65a38372fdfe5b5', - expires_in: '7200', - scopes: '*', - token_type: 'bearer', - }), - ok: true, - }); - - await act(async () => { - renderWithTheme(); - }); - - expect(global.fetch).toHaveBeenCalledWith( - expect.stringContaining(`${LOGIN_ROOT}/oauth/token`), - expect.objectContaining({ - body: expect.any(FormData), - method: 'POST', - }) - ); - - expect(setAuthDataInLocalStorage).toHaveBeenCalledWith( - expect.objectContaining({ - token: - 'Bearer 198864fedc821dbb5941cd5b8c273b4e25309a08d31c77cbf65a38372fdfe5b5', - scopes: '*', - expires: expect.any(String), - }) - ); - expect(mockProps.history.push).toHaveBeenCalledWith('/'); - }); - - it('Should redirect to login when no code parameter in URL', async () => { - mockProps.location.search = - '?returnTo=%2F&state=9f16ac6c-5518-4b96-b4a6-26a16f85b127&code1=bf952e05db75a45a51f5'; - await act(async () => { - renderWithTheme(); - }); - - expect(setAuthDataInLocalStorage).not.toHaveBeenCalled(); - expect(window.location.assign).toHaveBeenCalledWith( - `${LOGIN_ROOT}` + '/logout' - ); - mockProps.location.search = - '?returnTo=%2F&state=9f16ac6c-5518-4b96-b4a6-26a16f85b127&code=bf952e05db75a45a51f5'; - }); - }); -}); diff --git a/packages/manager/src/layouts/OAuth.tsx b/packages/manager/src/layouts/OAuth.tsx deleted file mode 100644 index 4579ec5a0cf..00000000000 --- a/packages/manager/src/layouts/OAuth.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { capitalize, getQueryParamsFromQueryString } from '@linode/utilities'; -import * as React from 'react'; -import type { RouteComponentProps } from 'react-router-dom'; - -import { SplashScreen } from 'src/components/SplashScreen'; -import { CLIENT_ID, LOGIN_ROOT } from 'src/constants'; -import { - clearAuthDataFromLocalStorage, - clearNonceAndCodeVerifierFromLocalStorage, - setAuthDataInLocalStorage, -} from 'src/OAuth/utils'; -import { - authentication, - getEnvLocalStorageOverrides, -} from 'src/utilities/storage'; - -const localStorageOverrides = getEnvLocalStorageOverrides(); -const loginURL = localStorageOverrides?.loginRoot ?? LOGIN_ROOT; -const clientID = localStorageOverrides?.clientID ?? CLIENT_ID; - -export type OAuthQueryParams = { - code: string; - returnTo: string; - state: string; // nonce -}; - -export const OAuthCallbackPage = ({ - history, - location, -}: RouteComponentProps) => { - const checkNonce = (nonce: string) => { - // nonce should be set and equal to ours otherwise retry auth - const storedNonce = authentication.nonce.get(); - authentication.nonce.set(''); - if (!(nonce && storedNonce === nonce)) { - clearStorageAndRedirectToLogout(); - } - }; - - const createFormData = ( - clientID: string, - code: string, - nonce: string, - codeVerifier: string - ): FormData => { - const formData = new FormData(); - formData.append('grant_type', 'authorization_code'); - formData.append('client_id', clientID); - formData.append('code', code); - formData.append('state', nonce); - formData.append('code_verifier', codeVerifier); - return formData; - }; - - const exchangeAuthorizationCodeForToken = async ( - code: string, - returnTo: string, - nonce: string - ) => { - try { - const expireDate = new Date(); - const codeVerifier = authentication.codeVerifier.get(); - - if (codeVerifier) { - authentication.codeVerifier.set(''); - - /** - * We need to validate that the nonce returned (comes from the location query param as the state param) - * matches the one we stored when authentication was started. This confirms the initiator - * and receiver are the same. - */ - checkNonce(nonce); - - const formData = createFormData( - `${clientID}`, - code, - nonce, - codeVerifier - ); - - const response = await fetch(`${loginURL}/oauth/token`, { - body: formData, - method: 'POST', - }); - - if (response.ok) { - const tokenParams = await response.json(); - - /** - * We multiply the expiration time by 1000 ms because JavaSript returns time in ms, while - * the API returns the expiry time in seconds - */ - - expireDate.setTime( - expireDate.getTime() + +tokenParams.expires_in * 1000 - ); - - setAuthDataInLocalStorage({ - token: `${capitalize(tokenParams.token_type)} ${tokenParams.access_token}`, - scopes: tokenParams.scopes, - expires: expireDate.toString(), - }); - - /** - * All done, redirect this bad-boy to the returnTo URL we generated earlier. - */ - history.push(returnTo); - } else { - clearStorageAndRedirectToLogout(); - } - } else { - clearStorageAndRedirectToLogout(); - } - } catch (error) { - clearStorageAndRedirectToLogout(); - } - }; - - React.useEffect(() => { - if (!location.search || location.search.length < 2) { - clearStorageAndRedirectToLogout(); - return; - } - - const { - code, - returnTo, - state: nonce, - } = getQueryParamsFromQueryString(location.search); - - if (!code || !returnTo || !nonce) { - clearStorageAndRedirectToLogout(); - return; - } - - exchangeAuthorizationCodeForToken(code, returnTo, nonce); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ; -}; - -const clearStorageAndRedirectToLogout = () => { - clearLocalStorage(); - window.location.assign(loginURL + '/logout'); -}; - -const clearLocalStorage = () => { - clearNonceAndCodeVerifierFromLocalStorage(); - clearAuthDataFromLocalStorage(); -}; - -export default OAuthCallbackPage; diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index 92924a0fa26..e092fc57e07 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -914,12 +914,14 @@ export const handlers = [ backups: { enabled: false }, label: 'aclp-supported-region-linode-1', region: 'us-iad', + alerts: { user: [100, 101], system: [200] }, }), linodeFactory.build({ id, backups: { enabled: false }, label: 'aclp-supported-region-linode-2', region: 'us-east', + alerts: { user: [], system: [] }, }), ]; const linodeNonMTCPlanInMTCSupportedRegionsDetail = linodeFactory.build({ @@ -963,7 +965,7 @@ export const handlers = [ return HttpResponse.json(response); }), http.get('*/linode/instances/:id/firewalls', async () => { - const firewalls = firewallFactory.buildList(10); + const firewalls = firewallFactory.buildList(1); firewallFactory.resetSequenceNumber(); return HttpResponse.json(makeResourcePage(firewalls)); }), @@ -1103,7 +1105,7 @@ export const handlers = [ return HttpResponse.json(newFirewall); }), http.get('*/v4/nodebalancers', () => { - const nodeBalancers = nodeBalancerFactory.buildList(1); + const nodeBalancers = nodeBalancerFactory.buildList(3); return HttpResponse.json(makeResourcePage(nodeBalancers)); }), http.get('*/v4/nodebalancers/types', () => { @@ -1472,7 +1474,7 @@ export const handlers = [ return HttpResponse.json(volume); }), http.get('*/vlans', () => { - const vlans = VLANFactory.buildList(2); + const vlans = VLANFactory.buildList(30); return HttpResponse.json(makeResourcePage(vlans)); }), http.get('*/profile/preferences', () => { @@ -2685,9 +2687,15 @@ export const handlers = [ }, service_type: serviceType === 'dbaas' ? 'dbaas' : 'linode', }), - ...alertFactory.buildList(5, { + ...alertFactory.buildList(6, { + service_type: serviceType === 'dbaas' ? 'dbaas' : 'linode', + type: 'user', + scope: 'account', + }), + ...alertFactory.buildList(6, { service_type: serviceType === 'dbaas' ? 'dbaas' : 'linode', type: 'user', + scope: 'region', }), ], }); @@ -2803,10 +2811,21 @@ export const handlers = [ serviceTypesFactory.build({ label: 'Linodes', service_type: 'linode', + alert: serviceAlertFactory.build({ scope: ['entity'] }), }), serviceTypesFactory.build({ label: 'Databases', service_type: 'dbaas', + alert: { + evaluation_period_seconds: [300], + polling_interval_seconds: [300], + }, + }), + serviceTypesFactory.build({ + label: 'Nodebalancers', + service_type: 'nodebalancer', + regions: 'us-iad,us-east', + alert: serviceAlertFactory.build({ scope: ['entity'] }), }), ], }; @@ -2829,6 +2848,10 @@ export const handlers = [ : serviceTypesFactory.build({ label: 'Databases', service_type: 'dbaas', + alert: serviceAlertFactory.build({ + evaluation_period_seconds: [300], + polling_interval_seconds: [300], + }), }); return HttpResponse.json(response, { status: 200 }); @@ -2876,6 +2899,16 @@ export const handlers = [ ); } + if (params.serviceType === 'nodebalancer') { + response.data.push( + dashboardFactory.build({ + id: 3, + label: 'Nodebalancer Dashboard', + service_type: 'nodebalancer', + }) + ); + } + return HttpResponse.json(response); }), http.get('*/monitor/services/:serviceType/metric-definitions', () => { @@ -3011,8 +3044,15 @@ export const handlers = [ label: params.id === '1' ? 'DBaaS Service I/O Statistics' - : 'Linode Service I/O Statistics', - service_type: params.id === '1' ? 'dbaas' : 'linode', // just update the service type and label and use same widget configs + : params.id === '3' + ? 'NodeBalancer Service I/O Statistics' + : 'Linode Service I/O Statistics', + service_type: + params.id === '1' + ? 'dbaas' + : params.id === '3' + ? 'nodebalancer' + : 'linode', // just update the service type and label and use same widget configs type: 'standard', updated: null, widgets: [ diff --git a/packages/manager/src/queries/cloudpulse/alerts.ts b/packages/manager/src/queries/cloudpulse/alerts.ts index faba390415a..7906cafe520 100644 --- a/packages/manager/src/queries/cloudpulse/alerts.ts +++ b/packages/manager/src/queries/cloudpulse/alerts.ts @@ -4,6 +4,7 @@ import { deleteAlertDefinition, deleteEntityFromAlert, editAlertDefinition, + updateServiceAlerts, } from '@linode/api-v4/lib/cloudpulse'; import { queryPresets } from '@linode/queries'; import { @@ -18,6 +19,7 @@ import { queryFactory } from './queries'; import type { Alert, AlertServiceType, + CloudPulseAlertsPayload, CreateAlertDefinitionPayload, DeleteAlertPayload, EditAlertPayloadWithService, @@ -233,3 +235,20 @@ export const useDeleteAlertDefinitionMutation = () => { }, }); }; + +export const useServiceAlertsMutation = ( + serviceType: string, + entityId: string +) => { + const queryClient = useQueryClient(); + return useMutation<{}, APIError[], CloudPulseAlertsPayload>({ + mutationFn: (payload: CloudPulseAlertsPayload) => { + return updateServiceAlerts(serviceType, entityId, payload); + }, + onSuccess() { + queryClient.invalidateQueries({ + queryKey: queryFactory.resources(serviceType).queryKey, + }); + }, + }); +}; diff --git a/packages/manager/src/queries/cloudpulse/queries.ts b/packages/manager/src/queries/cloudpulse/queries.ts index db1d6dc80e5..9da921566a3 100644 --- a/packages/manager/src/queries/cloudpulse/queries.ts +++ b/packages/manager/src/queries/cloudpulse/queries.ts @@ -6,11 +6,15 @@ import { getDashboards, getJWEToken, getMetricDefinitionsByServiceType, + getNodeBalancers, } from '@linode/api-v4'; -import { getAllLinodesRequest, volumeQueries } from '@linode/queries'; +import { + databaseQueries, + getAllLinodesRequest, + volumeQueries, +} from '@linode/queries'; import { createQueryKeys } from '@lukemorales/query-key-factory'; -import { databaseQueries } from '../databases/databases'; import { fetchCloudPulseMetrics } from './metrics'; import { getAllAlertsRequest, @@ -115,6 +119,15 @@ export const queryFactory = createQueryKeys(key, { queryKey: ['linodes', params, filters], }; + case 'nodebalancer': + return { + queryFn: async () => { + const response = await getNodeBalancers(params, filters); + return response.data; + }, + queryKey: ['nodebalancers', params, filters], + }; + case 'volumes': return volumeQueries.lists._ctx.all(params, filters); // in this we don't need to define our own query factory, we will reuse existing implementation in volumes.ts diff --git a/packages/manager/src/queries/databases/events.ts b/packages/manager/src/queries/databases/events.ts index 05ff08996cc..79f39dfcec2 100644 --- a/packages/manager/src/queries/databases/events.ts +++ b/packages/manager/src/queries/databases/events.ts @@ -1,6 +1,6 @@ -import { getEngineFromDatabaseEntityURL } from 'src/utilities/getEventsActionLink'; +import { databaseQueries } from '@linode/queries'; -import { databaseQueries } from './databases'; +import { getEngineFromDatabaseEntityURL } from 'src/utilities/getEventsActionLink'; import type { Engine } from '@linode/api-v4'; import type { EventHandlerData } from '@linode/queries'; diff --git a/packages/manager/src/request.test.tsx b/packages/manager/src/request.test.tsx index 1032c370cdf..c92d8a0df8c 100644 --- a/packages/manager/src/request.test.tsx +++ b/packages/manager/src/request.test.tsx @@ -1,7 +1,7 @@ import { profileFactory } from '@linode/utilities'; import { AxiosHeaders } from 'axios'; -import { setAuthDataInLocalStorage } from './OAuth/utils'; +import { setAuthDataInLocalStorage } from './OAuth/oauth'; import { getURL, handleError, injectAkamaiAccountHeader } from './request'; import { storeFactory } from './store'; import { storage } from './utilities/storage'; @@ -38,40 +38,7 @@ const error400: AxiosError = { }, }; -const error401: AxiosError = { - ...baseErrorWithJson, - response: { - ...mockAxiosError.response, - status: 401, - }, -}; - describe('Expiring Tokens', () => { - it('should properly expire tokens if given a 401 error', () => { - setAuthDataInLocalStorage({ - expires: 'never', - scopes: '*', - token: 'helloworld', - }); - - // Set CLIENT_ID because `handleError` needs it to redirect to Login with the Client ID when a 401 error occours - vi.mock('src/constants', async (importOriginal) => ({ - ...(await importOriginal()), - CLIENT_ID: '12345', - })); - - const result = handleError(error401, store); - - // the local storage state should nulled out because the error is a 401 - expect(storage.authentication.token.get()).toBeNull(); - expect(storage.authentication.expire.get()).toBeNull(); - expect(storage.authentication.scopes.get()).toBeNull(); - - result.catch((e: APIError[]) => - expect(e[0].reason).toMatch(mockAxiosError.response.data.errors[0].reason) - ); - }); - it('should just promise reject if a non-401 error', () => { setAuthDataInLocalStorage({ expires: 'never', diff --git a/packages/manager/src/request.tsx b/packages/manager/src/request.tsx index 6ffa13fcdf2..df34520711c 100644 --- a/packages/manager/src/request.tsx +++ b/packages/manager/src/request.tsx @@ -4,13 +4,11 @@ import { AxiosHeaders } from 'axios'; import { ACCESS_TOKEN, API_ROOT, DEFAULT_ERROR_MESSAGE } from 'src/constants'; import { setErrors } from 'src/store/globalErrors/globalErrors.actions'; -import { clearAuthDataFromLocalStorage } from './OAuth/utils'; -import { redirectToLogin } from './session'; +import { clearAuthDataFromLocalStorage, redirectToLogin } from './OAuth/oauth'; import { getEnvLocalStorageOverrides, storage } from './utilities/storage'; import type { ApplicationStore } from './store'; -import type { Profile } from '@linode/api-v4'; -import type { APIError } from '@linode/api-v4/lib/types'; +import type { APIError, Profile } from '@linode/api-v4'; import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'; const handleSuccess: >(response: T) => T | T = ( @@ -47,7 +45,7 @@ export const handleError = ( ) { isRedirectingToLogin = true; clearAuthDataFromLocalStorage(); - redirectToLogin(window.location.pathname, window.location.search); + redirectToLogin(); } const status: number = error.response?.status ?? 0; diff --git a/packages/manager/src/routes/datastream/dataStreamLazyRoutes.ts b/packages/manager/src/routes/datastream/dataStreamLazyRoutes.ts index d6041e32c0c..2bd0ac7b6b5 100644 --- a/packages/manager/src/routes/datastream/dataStreamLazyRoutes.ts +++ b/packages/manager/src/routes/datastream/dataStreamLazyRoutes.ts @@ -1,6 +1,7 @@ import { createLazyRoute } from '@tanstack/react-router'; import { DataStreamLanding } from 'src/features/DataStream/DataStreamLanding'; +import { DestinationCreate } from 'src/features/DataStream/Destinations/DestinationCreate/DestinationCreate'; import { StreamCreate } from 'src/features/DataStream/Streams/StreamCreate/StreamCreate'; export const dataStreamLandingLazyRoute = createLazyRoute('/datastream')({ @@ -12,3 +13,9 @@ export const streamCreateLazyRoute = createLazyRoute( )({ component: StreamCreate, }); + +export const destinationCreateLazyRoute = createLazyRoute( + '/datastream/destinations/create' +)({ + component: DestinationCreate, +}); diff --git a/packages/manager/src/routes/datastream/index.ts b/packages/manager/src/routes/datastream/index.ts index e9b29011a67..068360178bd 100644 --- a/packages/manager/src/routes/datastream/index.ts +++ b/packages/manager/src/routes/datastream/index.ts @@ -40,8 +40,15 @@ const destinationsRoute = createRoute({ import('./dataStreamLazyRoutes').then((m) => m.dataStreamLandingLazyRoute) ); +const destinationsCreateRoute = createRoute({ + getParentRoute: () => dataStreamRoute, + path: 'destinations/create', +}).lazy(() => + import('./dataStreamLazyRoutes').then((m) => m.destinationCreateLazyRoute) +); + export const dataStreamRouteTree = dataStreamRoute.addChildren([ dataStreamLandingRoute, streamsRoute.addChildren([streamsCreateRoute]), - destinationsRoute, + destinationsRoute.addChildren([destinationsCreateRoute]), ]); diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx index 00f4260860a..01646c550f6 100644 --- a/packages/manager/src/routes/index.tsx +++ b/packages/manager/src/routes/index.tsx @@ -104,6 +104,7 @@ export const migrationRouteTree = migrationRootRoute.addChildren([ iamRouteTree, imagesRouteTree, kubernetesRouteTree, + linodesRouteTree, longviewRouteTree, managedRouteTree, nodeBalancersRouteTree, diff --git a/packages/manager/src/routes/linodes/index.ts b/packages/manager/src/routes/linodes/index.ts index 573b5d30c93..278adab3fc5 100644 --- a/packages/manager/src/routes/linodes/index.ts +++ b/packages/manager/src/routes/linodes/index.ts @@ -1,8 +1,31 @@ -import { createRoute } from '@tanstack/react-router'; +import { createRoute, redirect } from '@tanstack/react-router'; import { rootRoute } from '../root'; import { LinodesRoute } from './LinodesRoute'; +import type { LinodeCreateType } from '@linode/utilities'; +import type { StackScriptTabType } from 'src/features/Linodes/LinodeCreate/Tabs/StackScripts/utilities'; + +interface LinodeDetailSearchParams { + delete?: boolean; + migrate?: boolean; + rebuild?: boolean; + rescue?: boolean; + resize?: boolean; + selectedImageId?: string; + upgrade?: boolean; +} + +export interface LinodeCreateSearchParams { + appID?: number; + backupID?: number; + imageID?: string; + linodeID?: number; + stackScriptID?: number; + subtype?: StackScriptTabType; + type?: LinodeCreateType; +} + export const linodesRoute = createRoute({ component: LinodesRoute, getParentRoute: () => rootRoute, @@ -13,14 +36,17 @@ const linodesIndexRoute = createRoute({ getParentRoute: () => linodesRoute, path: '/', }).lazy(() => - import('src/features/Linodes/index').then((m) => m.linodesLandingLazyRoute) + import('src/features/Linodes/linodesLandingLazyRoute').then( + (m) => m.linodesLandingLazyRoute + ) ); const linodesCreateRoute = createRoute({ getParentRoute: () => linodesRoute, path: 'create', + validateSearch: (search: LinodeCreateSearchParams) => search, }).lazy(() => - import('src/features/Linodes/LinodeCreate').then( + import('src/features/Linodes/LinodeCreate/linodeCreateLazyRoute').then( (m) => m.linodeCreateLazyRoute ) ); @@ -30,86 +56,138 @@ const linodesDetailRoute = createRoute({ parseParams: (params) => ({ linodeId: Number(params.linodeId), }), + validateSearch: (search: LinodeDetailSearchParams) => search, path: '$linodeId', }).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( + import('src/features/Linodes/LinodesDetail/linodeDetailLazyRoute').then( (m) => m.linodeDetailLazyRoute ) ); -const linodesDetailAnalyticsRoute = createRoute({ +const linodeCatchAllRoute = createRoute({ getParentRoute: () => linodesDetailRoute, - path: 'analytics', + path: '$invalidPath', + beforeLoad: ({ params }) => { + if ( + ['migrate', 'rebuild', 'rescue', 'resize', 'upgrade'].includes( + params.invalidPath + ) + ) { + throw redirect({ + to: '/linodes/$linodeId', + params: { linodeId: params.linodeId }, + search: { + [params.invalidPath]: true, + }, + }); + } + }, +}); + +const linodesDetailCloneRoute = createRoute({ + getParentRoute: () => linodesDetailRoute, + path: 'clone', }).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute + import('src/features/Linodes/CloneLanding/cloneLandingLazyRoute').then( + (m) => m.cloneLandingLazyRoute ) ); +const linodesDetailCloneConfigsRoute = createRoute({ + getParentRoute: () => linodesDetailCloneRoute, + path: 'configs', +}); + +const linodesDetailCloneDisksRoute = createRoute({ + getParentRoute: () => linodesDetailCloneRoute, + path: 'disks', +}); + +const linodesDetailAnalyticsRoute = createRoute({ + getParentRoute: () => linodesDetailRoute, + path: 'analytics', +}); + const linodesDetailNetworkingRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'networking', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); + +const linodesDetailNetworkingInterfacesRoute = createRoute({ + getParentRoute: () => linodesDetailNetworkingRoute, + path: 'interfaces', +}); + +const linodesDetailNetworkingInterfacesDetailRoute = createRoute({ + getParentRoute: () => linodesDetailNetworkingInterfacesRoute, + path: '$interfaceId', + parseParams: (params) => ({ + interfaceId: Number(params.interfaceId), + }), +}); const linodesDetailStorageRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'storage', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); const linodesDetailConfigurationsRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'configurations', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); const linodesDetailBackupsRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'backup', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); const linodesDetailActivityRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'activity', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); const linodesDetailSettingsRoute = createRoute({ getParentRoute: () => linodesDetailRoute, path: 'settings', -}).lazy(() => - import('src/features/Linodes/LinodesDetail/LinodesDetail').then( - (m) => m.linodeDetailLazyRoute - ) -); +}); + +const linodesDetailAlertsRoute = createRoute({ + getParentRoute: () => linodesDetailRoute, + path: 'alerts', +}); + +const linodesDetailMetricsRoute = createRoute({ + getParentRoute: () => linodesDetailRoute, + path: 'metrics', +}); + +const linodesDetailUpgradeInterfacesRoute = createRoute({ + getParentRoute: () => linodesDetailConfigurationsRoute, + path: 'upgrade-interfaces', +}); export const linodesRouteTree = linodesRoute.addChildren([ linodesIndexRoute, linodesCreateRoute, linodesDetailRoute.addChildren([ + linodesDetailCloneRoute.addChildren([ + linodesDetailCloneConfigsRoute, + linodesDetailCloneDisksRoute, + ]), linodesDetailAnalyticsRoute, - linodesDetailNetworkingRoute, + linodesDetailNetworkingRoute.addChildren([ + linodesDetailNetworkingInterfacesRoute, + linodesDetailNetworkingInterfacesDetailRoute, + ]), linodesDetailStorageRoute, - linodesDetailConfigurationsRoute, + linodesDetailConfigurationsRoute.addChildren([ + linodesDetailUpgradeInterfacesRoute, + ]), linodesDetailBackupsRoute, linodesDetailActivityRoute, linodesDetailSettingsRoute, + linodesDetailAlertsRoute, + linodesDetailMetricsRoute, + linodeCatchAllRoute, ]), ]); diff --git a/packages/manager/src/session.ts b/packages/manager/src/session.ts deleted file mode 100644 index 70a6e77f7a4..00000000000 --- a/packages/manager/src/session.ts +++ /dev/null @@ -1,104 +0,0 @@ -import Axios from 'axios'; - -import { APP_ROOT, CLIENT_ID, LOGIN_ROOT } from 'src/constants'; -import { generateCodeChallenge, generateCodeVerifier } from 'src/pkce'; -import { - authentication, - getEnvLocalStorageOverrides, -} from 'src/utilities/storage'; - -import { clearNonceAndCodeVerifierFromLocalStorage } from './OAuth/utils'; - -// If there are local storage overrides, use those. Otherwise use variables set in the ENV. -const localStorageOverrides = getEnvLocalStorageOverrides(); -const clientID = localStorageOverrides?.clientID ?? CLIENT_ID; -const loginRoot = localStorageOverrides?.loginRoot ?? LOGIN_ROOT; - -let codeVerifier: string = ''; -let codeChallenge: string = ''; - -export async function generateCodeVerifierAndChallenge(): Promise { - codeVerifier = await generateCodeVerifier(); - codeChallenge = await generateCodeChallenge(codeVerifier); - authentication.codeVerifier.set(codeVerifier); -} - -/** - * Creates a URL with the supplied props as a stringified query. The shape of the query is required - * by the Login server. - * - * @param redirectUri {string} - * @param scope {[string=*]} - * @param nonce {string} - * @returns {string} - OAuth authorization endpoint URL - */ -export const genOAuthEndpoint = ( - redirectUri: string, - scope: string = '*', - nonce: string -): string => { - if (!clientID) { - throw new Error('No CLIENT_ID specified.'); - } - - const query = { - client_id: clientID, - code_challenge: codeChallenge, - code_challenge_method: 'S256', - redirect_uri: `${APP_ROOT}/oauth/callback?returnTo=${redirectUri}`, - response_type: 'code', - scope, - state: nonce, - }; - - return `${loginRoot}/oauth/authorize?${new URLSearchParams( - query - ).toString()}`; -}; - -/** - * Generate a nonce (a UUID), store it in localStorage for later comparison, then create the URL - * we redirect to. - * - * @param redirectUri {string} - * @param scope {string} - * @returns {string} - OAuth authorization endpoint URL - */ -export const prepareOAuthEndpoint = ( - redirectUri: string, - scope: string = '*' -): string => { - const nonce = window.crypto.randomUUID(); - authentication.nonce.set(nonce); - return genOAuthEndpoint(redirectUri, scope, nonce); -}; - -/** - * It's in the name. - * - * @param {string} returnToPath - The path the user will come back to - * after authentication is complete - * @param {string} queryString - any additional query you want to add - * to the returnTo path - */ -export const redirectToLogin = async ( - returnToPath: string, - queryString: string = '' -) => { - clearNonceAndCodeVerifierFromLocalStorage(); - await generateCodeVerifierAndChallenge(); - const redirectUri = `${returnToPath}${queryString}`; - window.location.assign(prepareOAuthEndpoint(redirectUri)); -}; - -export const revokeToken = (client_id: string, token: string) => { - return Axios({ - baseURL: loginRoot, - data: new URLSearchParams({ client_id, token }).toString(), - headers: { - 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', - }, - method: 'POST', - url: `/oauth/revoke`, - }); -}; diff --git a/packages/manager/src/utilities/storage.ts b/packages/manager/src/utilities/storage.ts index f4ad5d51327..87fd32c8f83 100644 --- a/packages/manager/src/utilities/storage.ts +++ b/packages/manager/src/utilities/storage.ts @@ -225,12 +225,7 @@ export const storage: Storage = { }, }; -export const { - authentication, - stackScriptInProgress, - supportTicket, - ticketReply, -} = storage; +export const { stackScriptInProgress, supportTicket, ticketReply } = storage; // Only return these if the dev tools are enabled and we're in development mode. export const getEnvLocalStorageOverrides = () => { diff --git a/packages/manager/src/utilities/testHelpers.test.tsx b/packages/manager/src/utilities/testHelpers.test.tsx index 8f11a65a89b..c73ceff4555 100644 --- a/packages/manager/src/utilities/testHelpers.test.tsx +++ b/packages/manager/src/utilities/testHelpers.test.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { assertOrder, baseStore, + getShadowRootElement, mockMatchMedia, renderWithTheme, renderWithThemeAndFormik, @@ -180,4 +181,70 @@ describe('testHelpers', () => { ).toThrow(); }); }); + + describe('getShadowRootElement', () => { + let host: HTMLElement; + + beforeEach(() => { + host = document.createElement('div'); + document.body.appendChild(host); + }); + + afterEach(() => { + document.body.removeChild(host); + }); + + it('should resolve with null if the Shadow DOM is not attached', async () => { + const result = await getShadowRootElement( + host, + 'button' + ); + expect(result).toBeNull(); + }); + + it('should resolve with the element if it already exists in the Shadow DOM', async () => { + const shadowRoot = host.attachShadow({ mode: 'open' }); + const button = document.createElement('button'); + button.textContent = 'Click Me'; + shadowRoot.appendChild(button); + + const result = await getShadowRootElement( + host, + 'button' + ); + expect(result).toBe(button); + expect(result?.textContent).toBe('Click Me'); + }); + + it('should resolve with the element when it is added to the Shadow DOM later', async () => { + const shadowRoot = host.attachShadow({ mode: 'open' }); + + setTimeout(() => { + const button = document.createElement('button'); + button.textContent = 'Click Me'; + shadowRoot.appendChild(button); + }, 100); + + const result = await getShadowRootElement( + host, + 'button' + ); + expect(result).not.toBeNull(); + expect(result?.textContent).toBe('Click Me'); + }); + + it('should disconnect the MutationObserver after resolving', async () => { + const shadowRoot = host.attachShadow({ mode: 'open' }); + const observerSpy = vi.spyOn(MutationObserver.prototype, 'disconnect'); + + setTimeout(() => { + const button = document.createElement('button'); + shadowRoot.appendChild(button); + }, 100); + + await getShadowRootElement(host, 'button'); + expect(observerSpy).toHaveBeenCalled(); + observerSpy.mockRestore(); + }); + }); }); diff --git a/packages/manager/src/utilities/testHelpers.tsx b/packages/manager/src/utilities/testHelpers.tsx index 946c60e7abc..fb2ff994307 100644 --- a/packages/manager/src/utilities/testHelpers.tsx +++ b/packages/manager/src/utilities/testHelpers.tsx @@ -323,6 +323,16 @@ interface RenderWithThemeAndHookFormOptions { useFormOptions?: UseFormProps; } +export const wrapWithFormContext = ( + options: RenderWithThemeAndHookFormOptions +) => { + return ( + + {options.component} + + ); +}; + export const renderWithThemeAndHookFormContext = ( options: RenderWithThemeAndHookFormOptions ) => { @@ -368,3 +378,43 @@ export const assertOrder = ( expectedOrder ); }; + +/** + * Utility function to query an element inside the Shadow DOM of a web component. + * Uses MutationObserver to detect changes in the Shadow DOM and resolve the promise + * when the desired element is available. + * @param host - The web component host element. + * @param selector - The CSS selector for the element to query. + * @returns A promise that resolves to the queried element inside the Shadow DOM, or null if not found. + */ +export const getShadowRootElement = ( + host: HTMLElement, + selector: string +): Promise => { + return new Promise((resolve) => { + const shadowRoot = host.shadowRoot; + + if (!shadowRoot) { + resolve(null); + return; + } + + // Check if the element already exists + const element = shadowRoot.querySelector(selector); + if (element) { + resolve(element); + return; + } + + // Use MutationObserver to detect changes in the Shadow DOM + const observer = new MutationObserver(() => { + const element = shadowRoot.querySelector(selector); + if (element) { + observer.disconnect(); + resolve(element); + } + }); + + observer.observe(shadowRoot, { childList: true, subtree: true }); + }); +}; diff --git a/packages/manager/src/vite.d.ts b/packages/manager/src/vite.d.ts new file mode 100644 index 00000000000..bfd532357f2 --- /dev/null +++ b/packages/manager/src/vite.d.ts @@ -0,0 +1,10 @@ +/** + * We set any svg import to be a default export of a React component. + * + * We do this because Vite's default is for the type to be a `string`, + * but we use `vite-plugin-svgr` to allow us to import svgs as components. + */ +declare module '*.svg' { + const src: ComponentClass; + export default src; +} diff --git a/packages/queries/CHANGELOG.md b/packages/queries/CHANGELOG.md index 29dc4a765d4..92dde778e9f 100644 --- a/packages/queries/CHANGELOG.md +++ b/packages/queries/CHANGELOG.md @@ -1,3 +1,12 @@ +## [2025-07-15] - v0.9.0 + + +### Added: + +- `entitytransfers/` directory and migrated relevant query keys and hooks ([#12406](https://github.com/linode/manager/pull/12406)) +- Added `databases/` directory and migrated relevant query keys and hooks ([#12426](https://github.com/linode/manager/pull/12426)) +- `statusPage/` directory and migrated relevant query keys and hooks ([#12468](https://github.com/linode/manager/pull/12468)) + ## [2025-07-01] - v0.8.0 diff --git a/packages/queries/package.json b/packages/queries/package.json index def193ee177..7d2b857f8a2 100644 --- a/packages/queries/package.json +++ b/packages/queries/package.json @@ -1,6 +1,6 @@ { "name": "@linode/queries", - "version": "0.8.0", + "version": "0.9.0", "description": "Linode Utility functions library", "main": "src/index.js", "module": "src/index.ts", diff --git a/packages/manager/src/queries/databases/databases.ts b/packages/queries/src/databases/databases.ts similarity index 79% rename from packages/manager/src/queries/databases/databases.ts rename to packages/queries/src/databases/databases.ts index a08e0b63887..5686f21e5f5 100644 --- a/packages/manager/src/queries/databases/databases.ts +++ b/packages/queries/src/databases/databases.ts @@ -1,11 +1,6 @@ import { createDatabase, deleteDatabase, - getDatabaseBackups, - getDatabaseCredentials, - getDatabaseEngineConfig, - getDatabases, - getEngineDatabase, legacyRestoreWithBackup, patchDatabase, resetDatabaseCredentials, @@ -15,7 +10,6 @@ import { updateDatabase, } from '@linode/api-v4/lib/databases'; import { profileQueries, queryPresets } from '@linode/queries'; -import { createQueryKeys } from '@lukemorales/query-key-factory'; import { keepPreviousData, useInfiniteQuery, @@ -24,11 +18,7 @@ import { useQueryClient, } from '@tanstack/react-query'; -import { - getAllDatabaseEngines, - getAllDatabases, - getAllDatabaseTypes, -} from './requests'; +import { databaseQueries } from './keys'; import type { APIError, @@ -48,58 +38,6 @@ import type { UpdateDatabasePayload, } from '@linode/api-v4'; -export const databaseQueries = createQueryKeys('databases', { - configs: (engine: Engine) => ({ - queryFn: () => getDatabaseEngineConfig(engine), - queryKey: ['configs', engine], - }), - database: (engine: Engine, id: number) => ({ - contextQueries: { - backups: { - queryFn: () => getDatabaseBackups(engine, id), - queryKey: null, - }, - credentials: { - queryFn: () => getDatabaseCredentials(engine, id), - queryKey: null, - }, - }, - queryFn: () => getEngineDatabase(engine, id), - queryKey: [engine, id], - }), - databases: { - contextQueries: { - all: (params: Params = {}, filter: Filter = {}) => ({ - queryFn: () => getAllDatabases(params, filter), - queryKey: [params, filter], - }), - infinite: (filter: Filter) => ({ - queryFn: ({ pageParam }) => - getDatabases({ page: pageParam as number }, filter), - queryKey: [filter], - }), - paginated: (params: Params, filter: Filter) => ({ - queryFn: () => getDatabases(params, filter), - queryKey: [params, filter], - }), - }, - queryKey: null, - }, - engines: { - queryFn: getAllDatabaseEngines, - queryKey: null, - }, - types: { - contextQueries: { - all: (filter: Filter = {}) => ({ - queryFn: () => getAllDatabaseTypes(filter), - queryKey: [filter], - }), - }, - queryKey: null, - }, -}); - export const useDatabaseQuery = (engine: Engine, id: number) => useQuery({ ...databaseQueries.database(engine, id), @@ -113,7 +51,7 @@ export const useDatabaseQuery = (engine: Engine, id: number) => export const useDatabasesQuery = ( params: Params, filter: Filter, - isEnabled: boolean | undefined + isEnabled: boolean | undefined, ) => useQuery, APIError[]>({ ...databaseQueries.databases._ctx.paginated(params, filter), @@ -141,7 +79,7 @@ export const useDatabasesInfiniteQuery = (filter: Filter, enabled: boolean) => { export const useAllDatabasesQuery = ( enabled: boolean = true, params: Params = {}, - filter: Filter = {} + filter: Filter = {}, ) => useQuery({ ...databaseQueries.databases._ctx.all(params, filter), @@ -158,7 +96,7 @@ export const useDatabaseMutation = (engine: Engine, id: number) => { }); queryClient.setQueryData( databaseQueries.database(engine, id).queryKey, - database + database, ); }, }); @@ -191,7 +129,7 @@ export const useCreateDatabaseMutation = () => { }); queryClient.setQueryData( databaseQueries.database(database.engine, database.id).queryKey, - database + database, ); // If a restricted user creates an entity, we must make sure grants are up to date. queryClient.invalidateQueries({ @@ -249,7 +187,7 @@ export const useResumeDatabaseMutation = (engine: Engine, id: number) => { export const useDatabaseBackupsQuery = ( engine: Engine, id: number, - enabled: boolean = false + enabled: boolean = false, ) => useQuery, APIError[]>({ ...databaseQueries.database(engine, id)._ctx.backups, @@ -264,7 +202,7 @@ export const useDatabaseEnginesQuery = (enabled: boolean = false) => export const useDatabaseTypesQuery = ( filter: Filter = {}, - enabled: boolean = true + enabled: boolean = true, ) => useQuery({ ...databaseQueries.types._ctx.all(filter), @@ -273,7 +211,7 @@ export const useDatabaseTypesQuery = ( export const useDatabaseEngineConfig = ( engine: Engine, - enabled: boolean = true + enabled: boolean = true, ) => useQuery({ ...databaseQueries.configs(engine), @@ -283,7 +221,7 @@ export const useDatabaseEngineConfig = ( export const useDatabaseCredentialsQuery = ( engine: Engine, id: number, - enabled: boolean = false + enabled: boolean = false, ) => useQuery({ ...databaseQueries.database(engine, id)._ctx.credentials, @@ -311,7 +249,7 @@ export const useDatabaseCredentialsMutation = (engine: Engine, id: number) => { export const useLegacyRestoreFromBackupMutation = ( engine: Engine, databaseId: number, - backupId: number + backupId: number, ) => { const queryClient = useQueryClient(); return useMutation<{}, APIError[]>({ @@ -329,7 +267,7 @@ export const useLegacyRestoreFromBackupMutation = ( export const useRestoreFromBackupMutation = ( engine: Engine, - fork: DatabaseFork + fork: DatabaseFork, ) => { const queryClient = useQueryClient(); return useMutation({ diff --git a/packages/queries/src/databases/index.ts b/packages/queries/src/databases/index.ts new file mode 100644 index 00000000000..fbaadda0ad0 --- /dev/null +++ b/packages/queries/src/databases/index.ts @@ -0,0 +1,3 @@ +export * from './databases'; +export * from './keys'; +export * from './requests'; diff --git a/packages/queries/src/databases/keys.ts b/packages/queries/src/databases/keys.ts new file mode 100644 index 00000000000..62a3db02864 --- /dev/null +++ b/packages/queries/src/databases/keys.ts @@ -0,0 +1,68 @@ +import { + getDatabaseBackups, + getDatabaseCredentials, + getDatabaseEngineConfig, + getDatabases, + getEngineDatabase, +} from '@linode/api-v4/lib/databases'; +import { createQueryKeys } from '@lukemorales/query-key-factory'; + +import { + getAllDatabaseEngines, + getAllDatabases, + getAllDatabaseTypes, +} from './requests'; + +import type { Engine, Filter, Params } from '@linode/api-v4'; + +export const databaseQueries = createQueryKeys('databases', { + configs: (engine: Engine) => ({ + queryFn: () => getDatabaseEngineConfig(engine), + queryKey: ['configs', engine], + }), + database: (engine: Engine, id: number) => ({ + contextQueries: { + backups: { + queryFn: () => getDatabaseBackups(engine, id), + queryKey: null, + }, + credentials: { + queryFn: () => getDatabaseCredentials(engine, id), + queryKey: null, + }, + }, + queryFn: () => getEngineDatabase(engine, id), + queryKey: [engine, id], + }), + databases: { + contextQueries: { + all: (params: Params = {}, filter: Filter = {}) => ({ + queryFn: () => getAllDatabases(params, filter), + queryKey: [params, filter], + }), + infinite: (filter: Filter) => ({ + queryFn: ({ pageParam }) => + getDatabases({ page: pageParam as number }, filter), + queryKey: [filter], + }), + paginated: (params: Params, filter: Filter) => ({ + queryFn: () => getDatabases(params, filter), + queryKey: [params, filter], + }), + }, + queryKey: null, + }, + engines: { + queryFn: getAllDatabaseEngines, + queryKey: null, + }, + types: { + contextQueries: { + all: (filter: Filter = {}) => ({ + queryFn: () => getAllDatabaseTypes(filter), + queryKey: [filter], + }), + }, + queryKey: null, + }, +}); diff --git a/packages/manager/src/queries/databases/requests.ts b/packages/queries/src/databases/requests.ts similarity index 75% rename from packages/manager/src/queries/databases/requests.ts rename to packages/queries/src/databases/requests.ts index 5b3bb3c22fa..b256d73945a 100644 --- a/packages/manager/src/queries/databases/requests.ts +++ b/packages/queries/src/databases/requests.ts @@ -15,18 +15,21 @@ import type { export const getAllDatabases = ( passedParams: Params = {}, - passedFilter: Filter = {} + passedFilter: Filter = {}, ) => getAll((params, filter) => - getDatabases({ ...params, ...passedParams }, { ...filter, ...passedFilter }) + getDatabases( + { ...params, ...passedParams }, + { ...filter, ...passedFilter }, + ), )().then((data) => data.data); export const getAllDatabaseEngines = () => getAll((params) => getDatabaseEngines(params))().then( - (data) => data.data + (data) => data.data, ); export const getAllDatabaseTypes = (passedFilter: Filter = {}) => getAll((params, filter) => - getDatabaseTypes(params, { ...filter, ...passedFilter }) + getDatabaseTypes(params, { ...filter, ...passedFilter }), )().then((data) => data.data); diff --git a/packages/manager/src/queries/entityTransfers.ts b/packages/queries/src/entitytransfers/entityTransfers.ts similarity index 73% rename from packages/manager/src/queries/entityTransfers.ts rename to packages/queries/src/entitytransfers/entityTransfers.ts index 5cd9046673e..45fbc1f2756 100644 --- a/packages/manager/src/queries/entityTransfers.ts +++ b/packages/queries/src/entitytransfers/entityTransfers.ts @@ -1,23 +1,20 @@ import { createEntityTransfer, getEntityTransfer, - getEntityTransfers, } from '@linode/api-v4/lib/entity-transfers'; -import { - creationHandlers, - listToItemsByID, - queryPresets, - useProfile, -} from '@linode/queries'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { creationHandlers, queryPresets } from '../base'; +import { useProfile } from '../profile'; +import { getAllEntityTransfersRequest } from './requests'; + import type { CreateTransferPayload, EntityTransfer, } from '@linode/api-v4/lib/entity-transfers'; import type { APIError, Filter, Params } from '@linode/api-v4/lib/types'; -export const queryKey = 'entity-transfers'; +export const entityTransfersQueryKey = 'entity-transfers'; interface EntityTransfersData { entityTransfers: Record; @@ -41,24 +38,15 @@ export const TRANSFER_FILTERS = { }, }; -const getAllEntityTransfersRequest = ( - passedParams: Params = {}, - passedFilter: Filter = {} -) => - getEntityTransfers(passedParams, passedFilter).then((data) => ({ - entityTransfers: listToItemsByID(data.data, 'token'), - results: data.results, - })); - export const useEntityTransfersQuery = ( params: Params = {}, - filter: Filter = {} + filter: Filter = {}, ) => { const { data: profile } = useProfile(); return useQuery({ queryFn: () => getAllEntityTransfersRequest(params, filter), - queryKey: [queryKey, params, filter], + queryKey: [entityTransfersQueryKey, params, filter], ...queryPresets.longLived, enabled: !profile?.restricted, }); @@ -67,7 +55,7 @@ export const useEntityTransfersQuery = ( export const useTransferQuery = (token: string, enabled: boolean = true) => { return useQuery({ queryFn: () => getEntityTransfer(token), - queryKey: [queryKey, token], + queryKey: [entityTransfersQueryKey, token], ...queryPresets.shortLived, enabled, retry: false, @@ -80,6 +68,6 @@ export const useCreateTransfer = () => { mutationFn: (createData) => { return createEntityTransfer(createData); }, - ...creationHandlers([queryKey], 'token', queryClient), + ...creationHandlers([entityTransfersQueryKey], 'token', queryClient), }); }; diff --git a/packages/queries/src/entitytransfers/index.ts b/packages/queries/src/entitytransfers/index.ts new file mode 100644 index 00000000000..2a6a7c177ed --- /dev/null +++ b/packages/queries/src/entitytransfers/index.ts @@ -0,0 +1,2 @@ +export * from './entityTransfers'; +export * from './requests'; diff --git a/packages/queries/src/entitytransfers/requests.ts b/packages/queries/src/entitytransfers/requests.ts new file mode 100644 index 00000000000..e3e81b76b1e --- /dev/null +++ b/packages/queries/src/entitytransfers/requests.ts @@ -0,0 +1,14 @@ +import { getEntityTransfers } from '@linode/api-v4/lib/entity-transfers'; + +import { listToItemsByID } from '../base'; + +import type { Filter, Params } from '@linode/api-v4/lib/types'; + +export const getAllEntityTransfersRequest = ( + passedParams: Params = {}, + passedFilter: Filter = {}, +) => + getEntityTransfers(passedParams, passedFilter).then((data) => ({ + entityTransfers: listToItemsByID(data.data, 'token'), + results: data.results, + })); diff --git a/packages/queries/src/iam/iam.ts b/packages/queries/src/iam/iam.ts index d96f25468db..64c3a4e1f1e 100644 --- a/packages/queries/src/iam/iam.ts +++ b/packages/queries/src/iam/iam.ts @@ -2,6 +2,7 @@ import { updateUserRoles } from '@linode/api-v4'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { queryPresets } from '../base'; +import { useProfile } from '../profile'; import { iamQueries } from './keys'; import type { @@ -42,22 +43,28 @@ export const useUserRolesMutation = (username: string) => { }); }; -export const useUserAccountPermissions = (username?: string) => { +export const useUserAccountPermissions = (enabled = true) => { + const { data: profile } = useProfile(); return useQuery({ - ...iamQueries.user(username ?? '')._ctx.accountPermissions, - enabled: Boolean(username), + ...iamQueries.user(profile?.username || '')._ctx.accountPermissions, + enabled: Boolean(profile?.username) && profile?.restricted && enabled, }); }; export const useUserEntityPermissions = ( entityType: AccessType, entityId: number, - username?: string, + enabled = true, ) => { + const { data: profile } = useProfile(); return useQuery({ ...iamQueries - .user(username ?? '') + .user(profile?.username || '') ._ctx.entityPermissions(entityType, entityId), - enabled: Boolean(username), + enabled: + Boolean(profile?.username) && + profile?.restricted && + Boolean(entityType && entityId) && + enabled, }); }; diff --git a/packages/queries/src/iam/keys.ts b/packages/queries/src/iam/keys.ts index e4d66fd20ac..83367080383 100644 --- a/packages/queries/src/iam/keys.ts +++ b/packages/queries/src/iam/keys.ts @@ -17,7 +17,7 @@ export const iamQueries = createQueryKeys('iam', { }, accountPermissions: { queryFn: () => getUserAccountPermissions(username), - queryKey: null, + queryKey: [username], }, entityPermissions: (entityType: AccessType, entityId: number) => ({ queryFn: () => getUserEntityPermissions(username, entityType, entityId), diff --git a/packages/queries/src/index.ts b/packages/queries/src/index.ts index b98d521e0b6..f538ba81edb 100644 --- a/packages/queries/src/index.ts +++ b/packages/queries/src/index.ts @@ -2,7 +2,9 @@ export * from './account'; export * from './base'; export * from './betas'; export * from './cloudnats'; +export * from './databases'; export * from './domains'; +export * from './entitytransfers'; export * from './eventHandlers'; export * from './firewalls'; export * from './iam'; @@ -16,6 +18,7 @@ export * from './profile'; export * from './quotas'; export * from './regions'; export * from './stackscripts'; +export * from './statusPage'; export * from './support'; export * from './tags'; export * from './types'; diff --git a/packages/queries/src/linodes/interfaces.ts b/packages/queries/src/linodes/interfaces.ts index 56ee92fdde5..3860ee6e599 100644 --- a/packages/queries/src/linodes/interfaces.ts +++ b/packages/queries/src/linodes/interfaces.ts @@ -9,6 +9,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { firewallQueries } from '../firewalls'; import { networkingQueries } from '../networking'; +import { vlanQueries } from '../vlans'; import { vpcQueries } from '../vpcs'; import { linodeQueries } from './linodes'; @@ -136,6 +137,9 @@ export const useCreateLinodeInterfaceMutation = (linodeId: number) => { queryKey: firewallQueries.firewall(variables.firewall_id).queryKey, }); } + + // If a VLAN is attached at the time of creation... + queryClient.invalidateQueries({ queryKey: vlanQueries._def }); }, }, ); diff --git a/packages/queries/src/linodes/linodes.ts b/packages/queries/src/linodes/linodes.ts index 176b2f770b2..734223bcd75 100644 --- a/packages/queries/src/linodes/linodes.ts +++ b/packages/queries/src/linodes/linodes.ts @@ -308,7 +308,6 @@ export const useDeleteLinodeMutation = (id: number) => { return useMutation<{}, APIError[]>({ mutationFn: () => deleteLinode(id), async onSuccess() { - queryClient.removeQueries(linodeQueries.linode(id)); queryClient.invalidateQueries(linodeQueries.linodes); // If the linode is assigned to a placement group, @@ -342,7 +341,7 @@ export const useCreateLinodeMutation = () => { // If a restricted user creates an entity, we must make sure grants are up to date. queryClient.invalidateQueries(profileQueries.grants); - // @TODO Linode Interfaces - need to handle case if interface is not legacy + if (getIsLegacyInterfaceArray(variables.interfaces)) { if (variables.interfaces?.some((i) => i.purpose === 'vlan')) { // If a Linode is created with a VLAN, invalidate vlans because @@ -365,16 +364,26 @@ export const useCreateLinodeMutation = () => { }); } } else { - // invalidate firewall queries if a new Linode interface is assigned to a firewall - if (variables.interfaces?.some((iface) => iface.firewall_id)) { + // Invalidate Firewall "list" queries if any interface has a Firewall + if (variables.interfaces?.some((i) => i.firewall_id)) { queryClient.invalidateQueries({ queryKey: firewallQueries.firewalls.queryKey, }); } - for (const iface of variables.interfaces ?? []) { - if (iface.firewall_id) { + + // Invalidate VLAN queries if the Linode was created with a VLAN + if (variables.interfaces?.some((i) => i.vlan?.vlan_label)) { + queryClient.invalidateQueries({ + queryKey: vlanQueries._def, + }); + } + + for (const linodeInterface of variables.interfaces ?? []) { + if (linodeInterface.firewall_id) { + // If the interface has a Firewall, invalidate that Firewall queryClient.invalidateQueries({ - queryKey: firewallQueries.firewall(iface.firewall_id).queryKey, + queryKey: firewallQueries.firewall(linodeInterface.firewall_id) + .queryKey, }); } } diff --git a/packages/queries/src/nodebalancers/nodebalancers.ts b/packages/queries/src/nodebalancers/nodebalancers.ts index 3baf9bb8b3f..50de0045bdb 100644 --- a/packages/queries/src/nodebalancers/nodebalancers.ts +++ b/packages/queries/src/nodebalancers/nodebalancers.ts @@ -81,10 +81,6 @@ export const useNodebalancerDeleteMutation = (id: number) => { return useMutation<{}, APIError[]>({ mutationFn: () => deleteNodeBalancer(id), onSuccess() { - // Remove NodeBalancer queries for this specific NodeBalancer - queryClient.removeQueries({ - queryKey: nodebalancerQueries.nodebalancer(id).queryKey, - }); // Invalidate paginated stores queryClient.invalidateQueries({ queryKey: nodebalancerQueries.nodebalancers.queryKey, diff --git a/packages/queries/src/profile/profile.ts b/packages/queries/src/profile/profile.ts index 2257b9a70e0..3a0b664050f 100644 --- a/packages/queries/src/profile/profile.ts +++ b/packages/queries/src/profile/profile.ts @@ -121,12 +121,12 @@ export const updateProfileData = ( ); }; -export const useGrants = () => { +export const useGrants = (enabled = true) => { const { data: profile } = useProfile(); return useQuery({ ...profileQueries.grants, ...queryPresets.oneTimeFetch, - enabled: Boolean(profile?.restricted), + enabled: Boolean(profile?.restricted) && enabled, }); }; diff --git a/packages/manager/src/queries/statusPage/index.ts b/packages/queries/src/statusPage/index.ts similarity index 85% rename from packages/manager/src/queries/statusPage/index.ts rename to packages/queries/src/statusPage/index.ts index f1cfd96c557..c83ef8f63f0 100644 --- a/packages/manager/src/queries/statusPage/index.ts +++ b/packages/queries/src/statusPage/index.ts @@ -4,5 +4,7 @@ * used through this query, all of this is contained within src/queries. */ +export * from './keys'; +export * from './requests'; export * from './statusPage'; export * from './types'; diff --git a/packages/queries/src/statusPage/keys.ts b/packages/queries/src/statusPage/keys.ts new file mode 100644 index 00000000000..5bfcf760f75 --- /dev/null +++ b/packages/queries/src/statusPage/keys.ts @@ -0,0 +1,14 @@ +import { createQueryKeys } from '@lukemorales/query-key-factory'; + +import { getAllMaintenance, getIncidents } from './requests'; + +export const statusPageQueries = createQueryKeys('statusPage', { + incidents: (statusPageUrl?: string) => ({ + queryKey: [statusPageUrl], + queryFn: () => getIncidents(statusPageUrl), + }), + maintenance: (statusPageUrl?: string) => ({ + queryKey: [statusPageUrl], + queryFn: () => getAllMaintenance(statusPageUrl), + }), +}); diff --git a/packages/manager/src/queries/statusPage/requests.ts b/packages/queries/src/statusPage/requests.ts similarity index 70% rename from packages/manager/src/queries/statusPage/requests.ts rename to packages/queries/src/statusPage/requests.ts index b10d0aa135f..487805d5672 100644 --- a/packages/manager/src/queries/statusPage/requests.ts +++ b/packages/queries/src/statusPage/requests.ts @@ -1,5 +1,3 @@ -import { LINODE_STATUS_PAGE_URL } from 'src/constants'; - import type { IncidentResponse, MaintenanceResponse } from './types'; import type { APIError } from '@linode/api-v4'; @@ -18,10 +16,13 @@ const handleError = (error: APIError, defaultMessage: string) => { /** * Return a list of incidents with a status of "unresolved." */ -export const getIncidents = async (): Promise => { +export const getIncidents = async ( + statusPageUrl?: string, +): Promise => { + const STATUS_PAGE_URL = statusPageUrl ?? 'https://status.linode.com/api/v2'; try { const response = await fetch( - `${LINODE_STATUS_PAGE_URL}/incidents/unresolved.json` + `${STATUS_PAGE_URL}/incidents/unresolved.json`, ); if (!response.ok) { @@ -38,10 +39,14 @@ export const getIncidents = async (): Promise => { * There are several endpoints for maintenance events; this method will return * a list of the most recent 50 maintenance, inclusive of all statuses. */ -export const getAllMaintenance = async (): Promise => { +export const getAllMaintenance = async ( + statusPageUrl?: string, +): Promise => { + const STATUS_PAGE_URL = statusPageUrl ?? 'https://status.linode.com/api/v2'; + try { const response = await fetch( - `${LINODE_STATUS_PAGE_URL}/scheduled-maintenances.json` + `${STATUS_PAGE_URL}/scheduled-maintenances.json`, ); if (!response.ok) { @@ -52,7 +57,7 @@ export const getAllMaintenance = async (): Promise => { } catch (error) { return handleError( error as APIError, - 'Error retrieving maintenance events.' + 'Error retrieving maintenance events.', ); } }; diff --git a/packages/manager/src/queries/statusPage/statusPage.ts b/packages/queries/src/statusPage/statusPage.ts similarity index 56% rename from packages/manager/src/queries/statusPage/statusPage.ts rename to packages/queries/src/statusPage/statusPage.ts index 42194f18a3b..aea1627f249 100644 --- a/packages/manager/src/queries/statusPage/statusPage.ts +++ b/packages/queries/src/statusPage/statusPage.ts @@ -1,35 +1,28 @@ import { queryPresets } from '@linode/queries'; -import { createQueryKeys } from '@lukemorales/query-key-factory'; import { useQuery } from '@tanstack/react-query'; -import { getAllMaintenance, getIncidents } from './requests'; +import { statusPageQueries } from './keys'; import type { IncidentResponse, MaintenanceResponse } from './types'; import type { APIError } from '@linode/api-v4/lib/types'; import type { UseQueryOptions } from '@tanstack/react-query'; -export const statusPageQueries = createQueryKeys('statusPage', { - incidents: { - queryFn: getIncidents, - queryKey: null, - }, - maintenance: { - queryFn: getAllMaintenance, - queryKey: null, - }, -}); - -export const useIncidentQuery = () => +export const useIncidentQuery = ( + statusPageUrl?: string, + options?: Partial>, +) => useQuery({ - ...statusPageQueries.incidents, + ...statusPageQueries.incidents(statusPageUrl), ...queryPresets.shortLived, + ...(options ?? {}), }); export const useMaintenanceQuery = ( - options?: Partial> + statusPageUrl?: string, + options?: Partial>, ) => useQuery({ - ...statusPageQueries.maintenance, + ...statusPageQueries.maintenance(statusPageUrl), ...queryPresets.shortLived, ...(options ?? {}), }); diff --git a/packages/manager/src/queries/statusPage/types.ts b/packages/queries/src/statusPage/types.ts similarity index 100% rename from packages/manager/src/queries/statusPage/types.ts rename to packages/queries/src/statusPage/types.ts diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index 05275556d20..14351d9040d 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,3 +1,10 @@ +## [2025-07-15] - v0.5.0 + + +### Upcoming Features: + +- Add `useIsLinodeAclpSubscribed` hook and unit tests ([#12479](https://github.com/linode/manager/pull/12479)) + ## [2025-07-01] - v0.4.0 ### Tech Stories diff --git a/packages/shared/package.json b/packages/shared/package.json index 16df0a2adcb..28d31b7a1a0 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@linode/shared", - "version": "0.4.0", + "version": "0.5.0", "description": "Linode shared feature component library", "main": "src/index.ts", "module": "src/index.ts", diff --git a/packages/shared/src/hooks/index.ts b/packages/shared/src/hooks/index.ts index 5329361f3a1..26f3827740d 100644 --- a/packages/shared/src/hooks/index.ts +++ b/packages/shared/src/hooks/index.ts @@ -1 +1,2 @@ export * from './useIsGeckoEnabled'; +export * from './useIsLinodeAclpSubscribed'; diff --git a/packages/shared/src/hooks/useIsLinodeAclpSubscribed.test.ts b/packages/shared/src/hooks/useIsLinodeAclpSubscribed.test.ts new file mode 100644 index 00000000000..1c9aac39bb5 --- /dev/null +++ b/packages/shared/src/hooks/useIsLinodeAclpSubscribed.test.ts @@ -0,0 +1,140 @@ +import { renderHook } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; + +import { useIsLinodeAclpSubscribed } from './useIsLinodeAclpSubscribed'; + +const queryMocks = vi.hoisted(() => ({ + useLinodeQuery: vi.fn(), +})); + +vi.mock('@linode/queries', async () => { + const actual = await vi.importActual('@linode/queries'); + return { + ...actual, + useLinodeQuery: queryMocks.useLinodeQuery, + }; +}); + +describe('useIsLinodeAclpSubscribed', () => { + beforeEach(() => { + vi.resetAllMocks(); + }); + + it('returns false when linodeId is undefined', () => { + queryMocks.useLinodeQuery.mockReturnValue({}); + + const { result } = renderHook(() => + useIsLinodeAclpSubscribed(undefined, 'beta'), + ); + + expect(result.current).toBe(false); + }); + + it('returns false when linode data is undefined', () => { + queryMocks.useLinodeQuery.mockReturnValue({ data: undefined }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'beta')); + + expect(result.current).toBe(false); + }); + + it('returns true in GA stage when no alerts exist at all', () => { + queryMocks.useLinodeQuery.mockReturnValue({ + data: { + alerts: { + cpu: 0, + io: 0, + network_in: 0, + network_out: 0, + transfer_quota: 0, + system: [], + user: [], + }, + }, + }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'ga')); + + expect(result.current).toBe(true); + }); + + it('returns false in beta stage when no alerts exist at all', () => { + queryMocks.useLinodeQuery.mockReturnValue({ + data: { + alerts: { + cpu: 0, + io: 0, + network_in: 0, + network_out: 0, + transfer_quota: 0, + system: [], + user: [], + }, + }, + }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'beta')); + + expect(result.current).toBe(false); + }); + + it('returns false when only legacy alerts exist', () => { + queryMocks.useLinodeQuery.mockReturnValue({ + data: { + alerts: { + cpu: 90, + io: 0, + network_in: 0, + network_out: 0, + transfer_quota: 0, + system: [], + user: [], + }, + }, + }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'beta')); + + expect(result.current).toBe(false); + }); + + it('returns true when only ACLP alerts exist', () => { + queryMocks.useLinodeQuery.mockReturnValue({ + data: { + alerts: { + cpu: 0, + io: 0, + network_in: 0, + network_out: 0, + transfer_quota: 0, + system: [100], + user: [], + }, + }, + }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'beta')); + + expect(result.current).toBe(true); + }); + + it('returns true when both legacy and ACLP alerts exist', () => { + queryMocks.useLinodeQuery.mockReturnValue({ + data: { + alerts: { + cpu: 90, + io: 0, + network_in: 0, + network_out: 0, + transfer_quota: 0, + system: [100], + user: [200], + }, + }, + }); + + const { result } = renderHook(() => useIsLinodeAclpSubscribed(123, 'beta')); + + expect(result.current).toBe(true); + }); +}); diff --git a/packages/shared/src/hooks/useIsLinodeAclpSubscribed.ts b/packages/shared/src/hooks/useIsLinodeAclpSubscribed.ts new file mode 100644 index 00000000000..2f4eb5b07de --- /dev/null +++ b/packages/shared/src/hooks/useIsLinodeAclpSubscribed.ts @@ -0,0 +1,51 @@ +import { useLinodeQuery } from '@linode/queries'; + +type AclpStage = 'beta' | 'ga'; + +/** + * Determines if the linode is subscribed to ACLP or legacy alerts. + * + * ### Cases: + * - Legacy alerts = 0, Beta alerts = [] + * - Show default Legacy UI (disabled) for Beta + * - Show default Beta UI (disabled) for GA + * - Legacy alerts > 0, Beta alerts = [] + * - Show default Legacy UI (enabled) + * - Legacy alerts = 0, Beta alerts has values (either system, user, or both) + * - Show default Beta UI + * - Legacy alerts > 0, Beta alerts has values (either system, user, or both) + * - Show default Beta UI + * + * @param linodeId - The ID of the Linode + * @param stage - The current ACLP stage: 'beta' or 'ga' + * @returns {boolean} `true` if the Linode is subscribed to ACLP, otherwise `false` + */ +export const useIsLinodeAclpSubscribed = ( + linodeId: number | undefined, + stage: AclpStage, +) => { + const { data: linode } = useLinodeQuery( + linodeId ?? -1, + linodeId !== undefined, + ); + + if (!linode) { + return false; + } + + const hasLegacyAlerts = + (linode.alerts.cpu ?? 0) > 0 || + (linode.alerts.io ?? 0) > 0 || + (linode.alerts.network_in ?? 0) > 0 || + (linode.alerts.network_out ?? 0) > 0 || + (linode.alerts.transfer_quota ?? 0) > 0; + + const hasAclpAlerts = + (linode.alerts.system?.length ?? 0) > 0 || + (linode.alerts.user?.length ?? 0) > 0; + + // Always subscribed if ACLP alerts exist. For GA stage, default to subscribed if no alerts exist. + return ( + hasAclpAlerts || (!hasAclpAlerts && !hasLegacyAlerts && stage === 'ga') + ); +}; diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 6cb4f1f473a..85b27fb3c6e 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,3 +1,17 @@ +## [2025-07-15] - v0.16.0 + + +### Added: + +- Add `null` as type option for `headingChip` ([#12460](https://github.com/linode/manager/pull/12460)) + +### Changed: + +- TooltipIcon CDS standardization ([#12348](https://github.com/linode/manager/pull/12348)) +- Add `timeZoneProps` to control `timeZone dropdown` in DateTimeRangePicker.tsx ([#12423](https://github.com/linode/manager/pull/12423)) +- Notification banner stroke, width, error icon ([#12471](https://github.com/linode/manager/pull/12471)) +- Require `selected` prop in `ListItemOptionProps` type ([#12481](https://github.com/linode/manager/pull/12481)) + ## [2025-07-01] - v0.15.0 diff --git a/packages/ui/package.json b/packages/ui/package.json index b2102dfcaaf..6f9d549cd76 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -2,7 +2,7 @@ "name": "@linode/ui", "author": "Linode", "description": "Linode UI component library", - "version": "0.15.0", + "version": "0.16.0", "type": "module", "main": "src/index.ts", "module": "src/index.ts", diff --git a/packages/ui/src/assets/icons/error-outlined.svg b/packages/ui/src/assets/icons/error-outlined.svg index 538bc951feb..b1eedd96a0e 100644 --- a/packages/ui/src/assets/icons/error-outlined.svg +++ b/packages/ui/src/assets/icons/error-outlined.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/error.svg b/packages/ui/src/assets/icons/error.svg index 5cf04dc9b7d..6d6b71a9851 100644 --- a/packages/ui/src/assets/icons/error.svg +++ b/packages/ui/src/assets/icons/error.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/info-outlined.svg b/packages/ui/src/assets/icons/info-outlined.svg index b9769a3f914..2c6c055fe7c 100644 --- a/packages/ui/src/assets/icons/info-outlined.svg +++ b/packages/ui/src/assets/icons/info-outlined.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/packages/ui/src/assets/icons/success-outlined.svg b/packages/ui/src/assets/icons/success-outlined.svg index 0fca783ffc6..56d320bce2e 100644 --- a/packages/ui/src/assets/icons/success-outlined.svg +++ b/packages/ui/src/assets/icons/success-outlined.svg @@ -1,4 +1,3 @@ - - - + + \ No newline at end of file diff --git a/packages/ui/src/assets/icons/tip-outlined.svg b/packages/ui/src/assets/icons/tip-outlined.svg index 4fbf8c6788c..27d17e1df92 100644 --- a/packages/ui/src/assets/icons/tip-outlined.svg +++ b/packages/ui/src/assets/icons/tip-outlined.svg @@ -1,4 +1,3 @@ - - - + + \ No newline at end of file diff --git a/packages/ui/src/assets/icons/warning-outlined.svg b/packages/ui/src/assets/icons/warning-outlined.svg index 391587bc5bc..e6add355be7 100644 --- a/packages/ui/src/assets/icons/warning-outlined.svg +++ b/packages/ui/src/assets/icons/warning-outlined.svg @@ -1,5 +1,5 @@ - - - - + + + + \ No newline at end of file diff --git a/packages/ui/src/assets/icons/warning.svg b/packages/ui/src/assets/icons/warning.svg index dbebf239f12..1c2d5e5bbfb 100644 --- a/packages/ui/src/assets/icons/warning.svg +++ b/packages/ui/src/assets/icons/warning.svg @@ -1,4 +1,4 @@ - - - - + + + + \ No newline at end of file diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx index 0f8bcdd766d..f2043e95fae 100644 --- a/packages/ui/src/components/Accordion/Accordion.tsx +++ b/packages/ui/src/components/Accordion/Accordion.tsx @@ -60,7 +60,7 @@ export interface AccordionProps extends _AccordionProps { /** * A chip to render in the heading */ - headingChip?: React.JSX.Element; + headingChip?: null | React.JSX.Element; /** * A number to display in the Accordion's heading */ diff --git a/packages/ui/src/components/BetaChip/BetaChip.tsx b/packages/ui/src/components/BetaChip/BetaChip.tsx index 34904f809ee..06f6a6b9a3d 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.tsx @@ -33,7 +33,7 @@ export const BetaChip = (props: BetaChipProps) => { return ; }; -const StyledBetaChip = styled(Chip, { +export const StyledBetaChip = styled(Chip, { label: 'StyledBetaChip', shouldForwardProp: (prop) => prop !== 'color', })(({ theme }) => ({ diff --git a/packages/ui/src/components/Button/Button.test.tsx b/packages/ui/src/components/Button/Button.test.tsx index bd97ce4c580..ca6369babc4 100644 --- a/packages/ui/src/components/Button/Button.test.tsx +++ b/packages/ui/src/components/Button/Button.test.tsx @@ -25,7 +25,7 @@ describe('Button', () => { , ); - const helpIcon = getByTestId('HelpOutlineIcon'); + const helpIcon = getByTestId('tooltip-info-icon'); expect(helpIcon).toBeInTheDocument(); }); diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 492ee477856..01aeebde18b 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -1,9 +1,9 @@ -import HelpOutline from '@mui/icons-material/HelpOutline'; +import { styled, SvgIcon } from '@mui/material'; import _Button from '@mui/material/Button'; -import { styled } from '@mui/material/styles'; import * as React from 'react'; import type { JSX } from 'react'; +import InfoOutline from '../../assets/icons/info-outlined.svg'; import { omittedProps } from '../../utilities'; import { Tooltip } from '../Tooltip'; @@ -63,7 +63,7 @@ export interface ButtonProps extends _ButtonProps { const StyledButton = styled(_Button, { shouldForwardProp: omittedProps(['compactX', 'compactY', 'buttonType']), -})(({ compactX, compactY }) => ({ +})(({ compactX, compactY, theme }) => ({ ...(compactX && { minWidth: 50, paddingLeft: 0, @@ -74,6 +74,9 @@ const StyledButton = styled(_Button, { paddingBottom: 0, paddingTop: 0, }), + '&:hover [data-testid="tooltip-info-icon"] *': { + color: theme.tokens.alias.Content.Icon.Primary.Hover, + }, })); export const Button = React.forwardRef( @@ -124,7 +127,18 @@ export const Button = React.forwardRef( data-testid={rest['data-testid'] || 'button'} disableRipple={disabled || rest.disableRipple} endIcon={ - (showTooltip && ) || rest.endIcon + (showTooltip && ( + + )) || + rest.endIcon } onClick={disabled ? (e) => e.preventDefault() : rest.onClick} onKeyDown={disabled ? handleDisabledKeyDown : rest.onKeyDown} diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx index 42344e81d4b..0283af89b92 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/ui/src/components/Checkbox/Checkbox.tsx @@ -77,7 +77,7 @@ export const Checkbox = (props: Props) => { return ( <> {CheckboxComponent} - {toolTipText ? : null} + {toolTipText ? : null} ); }; diff --git a/packages/ui/src/components/DatePicker/DateRangePicker/DateRangePicker.test.tsx b/packages/ui/src/components/DatePicker/DateRangePicker/DateRangePicker.test.tsx index abaecd36a51..500b4dfb6b5 100644 --- a/packages/ui/src/components/DatePicker/DateRangePicker/DateRangePicker.test.tsx +++ b/packages/ui/src/components/DatePicker/DateRangePicker/DateRangePicker.test.tsx @@ -73,7 +73,7 @@ describe('DateRangePicker', () => { renderWithTheme(); await userEvent.click(screen.getByRole('textbox', { name: 'Start Date' })); - await userEvent.click(screen.getByRole('button', { name: 'Last day' })); + await userEvent.click(screen.getByRole('button', { name: 'last day' })); await userEvent.click(screen.getByRole('button', { name: 'Apply' })); // Normalize values before assertion (use toISODate() instead of toISO()) @@ -82,7 +82,7 @@ describe('DateRangePicker', () => { expect(defaultProps.onApply).toHaveBeenCalledWith({ endDate: expectedEndDate, - selectedPreset: 'Last day', + selectedPreset: 'last day', startDate: expectedStartDate, }); diff --git a/packages/ui/src/components/DatePicker/DateRangePicker/Presets.tsx b/packages/ui/src/components/DatePicker/DateRangePicker/Presets.tsx index 684f97c0191..3a4a931dfb6 100644 --- a/packages/ui/src/components/DatePicker/DateRangePicker/Presets.tsx +++ b/packages/ui/src/components/DatePicker/DateRangePicker/Presets.tsx @@ -20,51 +20,68 @@ export const Presets = ({ onPresetSelect, selectedPreset }: PresetsProps) => { const today = DateTime.now(); const presets = [ + { + getRange: () => ({ + endDate: today, + startDate: today.minus({ minutes: 30 }), + }), + label: 'last 30 minutes', + }, { getRange: () => ({ endDate: today, startDate: today.minus({ hours: 1 }), }), - label: 'Last hour', + label: 'last hour', }, { getRange: () => ({ endDate: today, - startDate: today.minus({ days: 1 }), + startDate: today.minus({ hours: 12 }), }), - label: 'Last day', + label: 'last 12 hours', }, { getRange: () => ({ endDate: today, - startDate: today.minus({ days: 6 }), + startDate: today.minus({ days: 1 }), }), - label: 'Last 7 days', + label: 'last day', }, { getRange: () => ({ endDate: today, - startDate: today.minus({ days: 30 }), + startDate: today.minus({ days: 6 }), }), - label: 'Last 30 days', + label: 'last 7 days', }, { getRange: () => ({ endDate: today, - startDate: today.minus({ days: 60 }), + startDate: today.minus({ days: 30 }), }), - label: 'Last 60 days', + label: 'last 30 days', }, { getRange: () => ({ endDate: today, - startDate: today.minus({ days: 90 }), + startDate: today.startOf('month'), }), - label: 'Last 90 days', + label: 'this month', + }, + { + getRange: () => { + const lastMonth = today.minus({ months: 1 }); + return { + startDate: lastMonth.startOf('month'), + endDate: lastMonth.endOf('month'), + }; + }, + label: 'last month', }, { getRange: () => ({ endDate: null, startDate: null }), - label: 'Reset', + label: 'reset', }, ]; diff --git a/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.stories.tsx b/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.stories.tsx index b73ea2d1bb6..4d5225dca56 100644 --- a/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.stories.tsx +++ b/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.stories.tsx @@ -35,6 +35,10 @@ const meta: Meta = { control: 'object', description: 'Props for start date input field.', }, + timeZoneProps: { + control: 'object', + description: 'Props for timezone selection.', + }, }, component: DateTimeRangePicker, parameters: { @@ -92,7 +96,7 @@ export const Default: Story = { export const WithPresets: Story = { args: { presetsProps: { - defaultValue: 'Last 30 days', + defaultValue: 'last 30 days', enablePresets: true, }, }, diff --git a/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.tsx index 786063eb45a..ab22ddf2c2e 100644 --- a/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -48,6 +48,7 @@ export interface DateTimeRangePickerProps { endDate: null | string; selectedPreset: null | string; startDate: null | string; + timeZone: null | string; }) => void; /** Additional settings for the presets dropdown */ @@ -76,6 +77,14 @@ export interface DateTimeRangePickerProps { /** Any additional styles to apply to the root element */ sx?: SxProps; + + /** Properties for the time zone selector */ + timeZoneProps?: { + /** Default value to be selected */ + defaultValue?: string; + /** If true, disables the timezone selector */ + disabled?: boolean; + }; } export const DateTimeRangePicker = ({ @@ -85,6 +94,7 @@ export const DateTimeRangePicker = ({ presetsProps, startDateProps, sx, + timeZoneProps, }: DateTimeRangePickerProps) => { const [startDate, setStartDate] = useState( startDateProps?.value ?? null, @@ -103,7 +113,9 @@ export const DateTimeRangePicker = ({ const [anchorEl, setAnchorEl] = useState(null); const [currentMonth, setCurrentMonth] = useState(DateTime.now()); const [focusedField, setFocusedField] = useState<'end' | 'start'>('start'); // Tracks focused input field - const [timeZone, setTimeZone] = useState('UTC'); // Default timezone + const [timeZone, setTimeZone] = useState( + timeZoneProps?.defaultValue ?? 'UTC', + ); // Default timezone const startDateInputRef = useRef(null); const endDateInputRef = useRef(null); @@ -130,6 +142,7 @@ export const DateTimeRangePicker = ({ endDate: endDate ? endDate.toISO() : null, selectedPreset, startDate: startDate ? startDate.toISO() : null, + timeZone, }); handleClose(); }; @@ -164,6 +177,8 @@ export const DateTimeRangePicker = ({ }; const handleDateSelection = (date: DateTime) => { + setSelectedPreset('reset'); // Reset preset selection on manual date selection + if (focusedField === 'start') { setStartDate(date); @@ -318,6 +333,7 @@ export const DateTimeRangePicker = ({ value={endDate} /> { item: T & { id: number | string }; maxHeight?: number; props: React.HTMLAttributes; - selected?: boolean; + selected: boolean; } export interface DisableItemOption { diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts index fa0f8641236..54f197037b7 100644 --- a/packages/ui/src/components/Notice/Notice.styles.ts +++ b/packages/ui/src/components/Notice/Notice.styles.ts @@ -1,73 +1,80 @@ -import { makeStyles } from 'tss-react/mui'; +import { styled } from '@mui/material/styles'; -export const useStyles = makeStyles()((theme) => ({ - error: { - borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Error.Border}`, +import { omittedProps } from '../../utilities'; +import { Box } from '../Box'; + +import type { NoticeVariant } from './Notice'; + +export const StyledNoticeBox = styled(Box, { + label: 'StyledNotice', + shouldForwardProp: omittedProps(['variant']), +})<{ variant: NoticeVariant }>(({ theme, variant }) => ({ + display: 'flex', + gap: '0.5rem', + alignItems: 'center', + '& + .notice': { + marginTop: `${theme.spacingFunction(16)} !important`, + }, + borderRadius: 1, + padding: `10px ${theme.spacingFunction(12)}`, + '& .MuiTypography-root': { + width: '100%', + }, + '& p': { + fontSize: theme.tokens.font.FontSize.Xs, + font: theme.font.semibold, + position: 'relative', + top: 1, + margin: 0, + }, + '& ul': { + paddingLeft: 20, + margin: 0, + listStyleType: 'disc', + '& li': { + display: 'list-item', + padding: 0, + }, + }, + ...(variant === 'error' && { + border: `1px solid ${theme.tokens.component.NotificationBanner.Error.Border}`, background: theme.tokens.component.NotificationBanner.Error.Background, '& path': { fill: theme.tokens.component.NotificationBanner.Error.StatusIcon, }, - }, - icon: { - '& g': { - stroke: theme.tokens.color.Neutrals.White, - }, - color: theme.tokens.color.Neutrals.White, - width: 20, - height: 20, - position: 'relative', - }, - info: { - borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`, + }), + ...(['info', 'tip'].includes(variant) && { + border: `1px solid ${theme.tokens.component.NotificationBanner.Informative.Border}`, background: theme.tokens.component.NotificationBanner.Informative.Background, '& path': { fill: theme.tokens.component.NotificationBanner.Informative.StatusIcon, }, - }, - root: { - display: 'flex', - alignItems: 'center', - '& + .notice': { - marginTop: `${theme.spacingFunction(16)} !important`, - }, - borderRadius: 1, - padding: `10px ${theme.spacingFunction(12)}`, - '& .MuiTypography-root': { - width: '100%', - }, - '& p': { - fontSize: theme.tokens.font.FontSize.Xs, - font: theme.font.semibold, - position: 'relative', - top: 1, - margin: 0, - }, - '& ul': { - paddingLeft: 20, - margin: 0, - listStyleType: 'disc', - '& li': { - display: 'list-item', - padding: 0, - }, - }, - maxWidth: '100%', - position: 'relative', - }, - success: { - borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Success.Border}`, + }), + ...(variant === 'success' && { + border: `1px solid ${theme.tokens.component.NotificationBanner.Success.Border}`, background: theme.tokens.component.NotificationBanner.Success.Background, '& path': { fill: theme.tokens.component.NotificationBanner.Success.StatusIcon, }, - }, - warning: { - borderLeft: `4px solid ${theme.tokens.component.NotificationBanner.Warning.Border}`, + }), + ...(variant === 'warning' && { + border: `1px solid ${theme.tokens.component.NotificationBanner.Warning.Border}`, background: theme.tokens.component.NotificationBanner.Warning.Background, // Only update outer triangle color '& .css-1j6o9qe-icon path:first-of-type': { fill: theme.tokens.component.NotificationBanner.Warning.StatusIcon, }, - }, + }), + maxWidth: '100%', + position: 'relative', +})); + +export const StyledIconBox = styled(Box, { + label: 'StyledIconBox', +})(() => ({ + display: 'flex', + width: 20, + height: 20, + position: 'relative', })); diff --git a/packages/ui/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx index dd05e3984dc..2565021d175 100644 --- a/packages/ui/src/components/Notice/Notice.test.tsx +++ b/packages/ui/src/components/Notice/Notice.test.tsx @@ -63,7 +63,7 @@ describe('Notice Component', () => { it('applies variant prop', () => { const { container } = renderWithTheme(); - expect(container.firstChild).toHaveStyle('border-left: 4px solid #d63c42;'); + expect(container.firstChild).toHaveStyle('border: 1px solid #d63c42;'); expect(container.firstChild).toHaveStyle('background: #ffe5e5;'); }); diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx index 4d50dc2b2a8..2a1d309b1c8 100644 --- a/packages/ui/src/components/Notice/Notice.tsx +++ b/packages/ui/src/components/Notice/Notice.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useStyles } from 'tss-react/mui'; import { CheckIcon, @@ -9,7 +10,7 @@ import { } from '../../assets/icons'; import { Box } from '../Box'; import { Typography } from '../Typography'; -import { useStyles } from './Notice.styles'; +import { StyledIconBox, StyledNoticeBox } from './Notice.styles'; import type { BoxProps } from '../Box'; import type { TypographyProps } from '../Typography'; @@ -31,6 +32,10 @@ export interface NoticeProps extends BoxProps { * The error group this error belongs to. This is used to scroll to the error when the user clicks on the error. */ errorGroup?: string; + /** + * If true, the width of the notice will only span the content instead of the container. + */ + fitContentWidth?: boolean; /** * If true, the important icon will be vertically centered with the text no matter the height of the text. */ @@ -79,6 +84,7 @@ export interface NoticeProps extends BoxProps { export const Notice = (props: NoticeProps) => { const { bypassValidation = false, + fitContentWidth = false, children, className, dataTestId, @@ -94,15 +100,7 @@ export const Notice = (props: NoticeProps) => { ...rest } = props; - const { classes, cx } = useStyles(); - - const variantMap = { - error: variant === 'error', - info: variant === 'info', - success: variant === 'success', - tip: variant === 'tip', - warning: variant === 'warning', - }; + const { cx } = useStyles(); const errorScrollClassName = bypassValidation ? '' @@ -110,27 +108,21 @@ export const Notice = (props: NoticeProps) => { ? `error-for-scroll-${errorGroup}` : `error-for-scroll`; - const dataAttributes = !variantMap.error - ? { - 'data-qa-notice': true, - } - : { - 'data-qa-error': true, - 'data-qa-notice': true, - }; + const dataAttributes = + variant !== 'error' + ? { + 'data-qa-notice': true, + } + : { + 'data-qa-error': true, + 'data-qa-notice': true, + }; return ( - { : theme.spacingFunction(16), marginLeft: spacingLeft !== undefined ? `${spacingLeft}px` : 0, marginTop: spacingTop !== undefined ? `${spacingTop}px` : 0, + width: fitContentWidth ? 'fit-content' : '100%', }), ...(Array.isArray(sx) ? sx : [sx]), ]} + variant={variant ?? 'info'} {...dataAttributes} {...rest} > - ({ - display: 'flex', + - {variantMap.error && } - {variantMap.info && } - {variantMap.success && } - {variantMap.tip && } - {variantMap.warning && } - + {variant === 'error' && } + {variant === 'info' && } + {variant === 'success' && } + {variant === 'tip' && } + {variant === 'warning' && } + {text || typeof children === 'string' ? ( {text ?? children} @@ -169,6 +161,6 @@ export const Notice = (props: NoticeProps) => { children )} - + ); }; diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index ef04b93ddcd..770c54a7d25 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -325,7 +325,7 @@ export const TextField = (props: TextFieldProps) => { {labelTooltipText && labelTooltipIconPosition === 'left' && ( { {labelTooltipText && labelTooltipIconPosition === 'right' && ( { ...sx, }} /> - {tooltipText && } + {tooltipText && } ); }; diff --git a/packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx b/packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx index 4aa1053a322..3430fd20f96 100644 --- a/packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx +++ b/packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx @@ -13,7 +13,15 @@ type Story = StoryObj; export const Default: Story = { args: { - status: 'help', + status: 'info', + text: 'Hello World', + }, + render: (args) => , +}; + +export const Warning: Story = { + args: { + status: 'warning', text: 'Hello World', }, render: (args) => , @@ -21,7 +29,7 @@ export const Default: Story = { export const VariableWidth: Story = { args: { - status: 'help', + status: 'info', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', width: 500, }, @@ -30,7 +38,7 @@ export const VariableWidth: Story = { export const SmallTooltipIcon: Story = { args: { - status: 'help', + status: 'info', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', labelTooltipIconSize: 'small', }, @@ -39,7 +47,7 @@ export const SmallTooltipIcon: Story = { export const LargeTooltipIcon: Story = { args: { - status: 'help', + status: 'info', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', labelTooltipIconSize: 'large', }, diff --git a/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx b/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx index cc39bfeb0dc..87d76621759 100644 --- a/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx +++ b/packages/ui/src/components/TooltipIcon/TooltipIcon.tsx @@ -1,13 +1,10 @@ import styled from '@emotion/styled'; -import SuccessOutline from '@mui/icons-material/CheckCircleOutlined'; -import ErrorOutline from '@mui/icons-material/ErrorOutline'; -import HelpOutline from '@mui/icons-material/HelpOutline'; -import InfoOutline from '@mui/icons-material/InfoOutlined'; -import WarningSolid from '@mui/icons-material/Warning'; -import { useTheme } from '@mui/material/styles'; +import { SvgIcon, useTheme } from '@mui/material'; import * as React from 'react'; import type { JSX } from 'react'; +import InfoOutlined from '../../assets/icons/info-outlined.svg'; +import WarningOutlined from '../../assets/icons/warning.svg'; import { omittedProps } from '../../utilities'; import { IconButton } from '../IconButton'; import { Tooltip, tooltipClasses } from '../Tooltip'; @@ -15,21 +12,23 @@ import { Tooltip, tooltipClasses } from '../Tooltip'; import type { TooltipProps } from '../Tooltip'; import type { SxProps, Theme } from '@mui/material/styles'; -export type TooltipIconStatus = - | 'error' - | 'help' - | 'info' - | 'other' - | 'pending' - | 'scheduled' - | 'success' - | 'warning'; +export type TooltipIconStatus = 'info' | 'warning'; interface EnhancedTooltipProps extends TooltipProps { width?: number; } -export interface TooltipIconProps +type TooltipIconWithStatus = { + icon?: never; + status: TooltipIconStatus; +}; + +type TooltipIconWithCustomIcon = { + icon: JSX.Element; + status?: never; +}; + +export interface TooltipIconBaseProps extends Omit< TooltipProps, 'children' | 'disableInteractive' | 'leaveDelay' | 'title' @@ -39,10 +38,9 @@ export interface TooltipIconProps */ className?: string; /** - * Use this custom icon when `status` is `other` - * @todo this seems like a flaw... passing an icon should not require `status` to be `other` + * An optional data-testid */ - icon?: JSX.Element; + dataTestId?: string; /** * Size of the tooltip icon * @default small @@ -53,10 +51,6 @@ export interface TooltipIconProps * @default false */ leaveDelay?: number; - /** - * Sets the icon and color - */ - status: TooltipIconStatus; /** * Pass specific styles to the Tooltip */ @@ -83,6 +77,9 @@ export interface TooltipIconProps */ width?: number; } + +export type TooltipIconProps = TooltipIconBaseProps & + (TooltipIconWithCustomIcon | TooltipIconWithStatus); /** * ## Usage * @@ -98,12 +95,12 @@ export const TooltipIcon = (props: TooltipIconProps) => { const theme = useTheme(); const { + dataTestId, + className, classes, - icon, leaveDelay, + icon, status, - sx, - className, sxTooltipIcon, text, tooltipAnalyticsEvent, @@ -120,52 +117,41 @@ export const TooltipIcon = (props: TooltipIconProps) => { let renderIcon: JSX.Element | null; - const sxRootStyle = { - '&&': { - fill: theme.tokens.component.Label.InfoIcon, - stroke: theme.tokens.component.Label.InfoIcon, - strokeWidth: 0, + const cdsIconProps = { + rootStyle: { + color: theme.tokens.alias.Content.Icon.Secondary.Default, + height: labelTooltipIconSize === 'small' ? 16 : 20, + width: labelTooltipIconSize === 'small' ? 16 : 20, + '&:hover': { + color: theme.tokens.alias.Content.Icon.Primary.Hover, + }, }, - '&:hover': { - color: theme.tokens.alias.Content.Icon.Primary.Hover, - fill: theme.tokens.alias.Content.Icon.Primary.Hover, - stroke: theme.tokens.alias.Content.Icon.Primary.Hover, - }, - height: labelTooltipIconSize === 'small' ? 16 : 20, - width: labelTooltipIconSize === 'small' ? 16 : 20, + viewBox: '0 0 20 20', }; switch (status) { - case 'error': - renderIcon = ( - - ); - break; - case 'help': - renderIcon = ; - break; case 'info': - renderIcon = ; - break; - case 'other': - renderIcon = icon ?? null; - break; - case 'success': renderIcon = ( - ); break; case 'warning': renderIcon = ( - + ); break; default: - renderIcon = null; + renderIcon = icon ?? null; } return ( @@ -173,12 +159,18 @@ export const TooltipIcon = (props: TooltipIconProps) => { classes={classes} componentsProps={props.componentsProps} data-qa-help-tooltip + data-testid={dataTestId} enterTouchDelay={0} leaveDelay={leaveDelay ? 3000 : undefined} leaveTouchDelay={5000} onOpen={handleOpenTooltip} placement={tooltipPosition ? tooltipPosition : 'bottom'} - sx={sx} + sx={{ + ...sxTooltipIcon, + '&:hover': { + color: theme.tokens.alias.Content.Icon.Primary.Hover, + }, + }} title={text} width={width} > @@ -191,7 +183,9 @@ export const TooltipIcon = (props: TooltipIconProps) => { e.stopPropagation(); }} size="large" - sx={sxTooltipIcon} + sx={{ + ...sxTooltipIcon, + }} > {renderIcon} diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index c4a9e6f7d2a..16124032e76 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -111,6 +111,7 @@ export const notificationToast = { backgroundColor: NotificationToast.Informative.Background, borderLeft: `48px solid ${NotificationToast.Informative.IconBackground}`, color: NotificationToast.Text, + icon: NotificationToast.Informative.StatusIcon, }, error: { backgroundColor: NotificationToast.Error.Background, @@ -127,6 +128,7 @@ export const notificationToast = { warning: { backgroundColor: NotificationToast.Warning.Background, borderLeft: `48px solid ${NotificationToast.Warning.IconBackground}`, + icon: NotificationToast.Warning.StatusIcon, }, tip: { backgroundColor: NotificationToast.Informative.Background, @@ -459,6 +461,9 @@ export const darkTheme: ThemeOptions = { styleOverrides: { root: { '&[aria-disabled="true"]': { + '&[aria-describedby="button-tooltip"] svg': { + color: Alias.Content.Icon.Primary.Default, + }, '& .MuiSvgIcon-root': { fill: Button.Primary.Disabled.Icon, }, diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index dd8ee4348d5..cfe840decf5 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -117,6 +117,7 @@ export const notificationToast = { backgroundColor: NotificationToast.Informative.Background, borderLeft: `48px solid ${NotificationToast.Informative.IconBackground}`, color: NotificationToast.Text, + icon: NotificationToast.Informative.StatusIcon, }, error: { backgroundColor: NotificationToast.Error.Background, @@ -133,6 +134,7 @@ export const notificationToast = { warning: { backgroundColor: NotificationToast.Warning.Background, borderLeft: `48px solid ${NotificationToast.Warning.IconBackground}`, + icon: NotificationToast.Warning.StatusIcon, }, tip: { backgroundColor: NotificationToast.Informative.Background, @@ -625,6 +627,9 @@ export const lightTheme: ThemeOptions = { styleOverrides: { root: { '&[aria-disabled="true"]': { + '&[aria-describedby="button-tooltip"] svg': { + color: Alias.Content.Icon.Secondary.Default, + }, '& .MuiSvgIcon-root': { fill: Button.Primary.Disabled.Icon, }, @@ -1231,11 +1236,6 @@ export const lightTheme: ThemeOptions = { outlined: { border: `1px solid ${Color.Neutrals[30]}`, }, - root: { - '& .notice': { - width: 'fit-content', - }, - }, rounded: { borderRadius: 0, }, diff --git a/packages/utilities/src/factories/linodeInterface.ts b/packages/utilities/src/factories/linodeInterface.ts index 220aedd19de..79ca9f11d36 100644 --- a/packages/utilities/src/factories/linodeInterface.ts +++ b/packages/utilities/src/factories/linodeInterface.ts @@ -29,9 +29,7 @@ export const upgradeLinodeInterfaceFactory = export const linodeInterfaceFactoryVlan = Factory.Sync.makeFactory({ created: '2025-03-19T03:58:04', - default_route: { - ipv4: true, - }, + default_route: {}, // VLAN interfaces cannot be the default route id: Factory.each((i) => i), mac_address: 'a4:ac:39:b7:6e:42', public: null, @@ -48,7 +46,7 @@ export const linodeInterfaceFactoryVPC = Factory.Sync.makeFactory({ created: '2025-03-19T03:58:04', default_route: { - ipv4: true, + ipv4: true, // Currently, VPC interfaces can only be the default route for IPv4, not IPv6 }, id: Factory.each((i) => i), mac_address: 'a4:ac:39:b7:6e:42', @@ -80,6 +78,7 @@ export const linodeInterfaceFactoryPublic = created: '2025-03-19T03:58:04', default_route: { ipv4: true, + ipv6: true, // Currently, only public interfaces can be the default route for IPv6 }, id: Factory.each((i) => i), mac_address: 'a4:ac:39:b7:6e:42', diff --git a/packages/utilities/src/helpers/errors.ts b/packages/utilities/src/helpers/errors.ts new file mode 100644 index 00000000000..932e31537c4 --- /dev/null +++ b/packages/utilities/src/helpers/errors.ts @@ -0,0 +1,24 @@ +// Types for the result object with discriminated union +type Success = { + data: T; + error: null; +}; + +type Failure = { + data: null; + error: E; +}; + +type Result = Failure | Success; + +// Main wrapper function +export async function tryCatch( + promise: Promise, +): Promise> { + try { + const data = await promise; + return { data, error: null }; + } catch (error) { + return { data: null, error: error as E }; + } +} diff --git a/packages/utilities/src/helpers/index.ts b/packages/utilities/src/helpers/index.ts index 7b4f0e01321..91d4ec4da5e 100644 --- a/packages/utilities/src/helpers/index.ts +++ b/packages/utilities/src/helpers/index.ts @@ -12,6 +12,7 @@ export * from './deepStringTransform'; export * from './doesRegionSupportFeature'; export * from './downloadFile'; export * from './env'; +export * from './errors'; export * from './escapeRegExp'; export * from './evenizeNumber'; export * from './formatDuration'; diff --git a/packages/utilities/src/types/ManagerPreferences.ts b/packages/utilities/src/types/ManagerPreferences.ts index 6fa41902ff1..643d3de0266 100644 --- a/packages/utilities/src/types/ManagerPreferences.ts +++ b/packages/utilities/src/types/ManagerPreferences.ts @@ -31,7 +31,6 @@ export type ManagerPreferences = Partial<{ domains_group_by_tag: boolean; firewall_beta_notification: boolean; gst_banner_dismissed: boolean; - isAclpAlertsBeta: boolean; isAclpMetricsBeta: boolean; isTableStripingEnabled: boolean; linode_news_banner_dismissed: boolean; diff --git a/packages/validation/.changeset/pr-12441-fixed-1751029941692.md b/packages/validation/.changeset/pr-12441-fixed-1751029941692.md deleted file mode 100644 index b56d3f0c8fa..00000000000 --- a/packages/validation/.changeset/pr-12441-fixed-1751029941692.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@linode/validation": Fixed ---- - -ACLP: update `scope` property in `createAlertDefinitionSchema` and `editAlertDefinitionSchema` to optional and nullable ([#12441](https://github.com/linode/manager/pull/12441)) diff --git a/packages/validation/CHANGELOG.md b/packages/validation/CHANGELOG.md index 4f79c9dce44..b520a51e6a3 100644 --- a/packages/validation/CHANGELOG.md +++ b/packages/validation/CHANGELOG.md @@ -1,3 +1,11 @@ +## [2025-07-15] - v0.70.0 + + +### Upcoming Features: + +- Update validation schemas for the changes in endpoints /v4/nodebalancers & /v4/nodebalancers/configs/{configId}/nodes for NB Dual Stack Support ([#12421](https://github.com/linode/manager/pull/12421)) +- Add `regions` in `createAlertDefinitionSchema` and `editAlertDefinitionSchema` ([#12435](https://github.com/linode/manager/pull/12435)) + ## [2025-07-01] - v0.69.0 @@ -5,6 +13,10 @@ - IAM RBAC: email validation ([#12395](https://github.com/linode/manager/pull/12395)) +### Fixed: + +- ACLP: update `scope` property in `createAlertDefinitionSchema` and `editAlertDefinitionSchema` to optional and nullable ([#12441](https://github.com/linode/manager/pull/12441)) + ### Upcoming Features: - Add `scope` in `createAlertDefinitionSchema` and `editAlertDefinitionSchema` ([#12377](https://github.com/linode/manager/pull/12377)) diff --git a/packages/validation/package.json b/packages/validation/package.json index fa30a719579..d0bff11de7f 100644 --- a/packages/validation/package.json +++ b/packages/validation/package.json @@ -1,6 +1,6 @@ { "name": "@linode/validation", - "version": "0.69.0", + "version": "0.70.0", "description": "Yup validation schemas for use with the Linode APIv4", "type": "module", "main": "lib/index.cjs", diff --git a/packages/validation/src/nodebalancers.schema.ts b/packages/validation/src/nodebalancers.schema.ts index f983ac45abc..01401f25dfd 100644 --- a/packages/validation/src/nodebalancers.schema.ts +++ b/packages/validation/src/nodebalancers.schema.ts @@ -1,6 +1,6 @@ import { array, boolean, mixed, number, object, string } from 'yup'; -import { vpcsValidateIP } from './vpcs.schema'; +import { determineIPType, vpcsValidateIP } from './vpcs.schema'; const PORT_WARNING = 'Port must be between 1 and 65535.'; const LABEL_WARNING = 'Label must be between 3 and 32 characters.'; @@ -44,7 +44,39 @@ export const nodeBalancerConfigNodeSchema = object({ address: string() .typeError('IP address is required.') .required('IP address is required.') - .matches(PRIVATE_IPV4_REGEX, PRIVATE_IPV4_WARNING), + .test( + 'IP validation', + 'Must be a private IPv4 or a valid IPv6 address', + function (value) { + const type = determineIPType(value); + const isIPv4 = type === 'ipv4'; + const isIPv6 = type === 'ipv6'; + + if (!isIPv4 && !isIPv6) { + // @TODO- NB Dual Stack Support(IPv6): Edit the error message to cover IPv6 addresses + return this.createError({ + message: PRIVATE_IPV4_WARNING, + }); + } + + if (isIPv4) { + if (!PRIVATE_IPV4_REGEX.test(value)) { + return this.createError({ + message: PRIVATE_IPV4_WARNING, + }); + } + return true; + } + + if (isIPv6) { + return true; + } + + return this.createError({ + message: 'Unexpected error during IP address validation', + }); + }, + ), subnet_id: number().when('vpcs', { is: (vpcs: (typeof createNodeBalancerVPCsSchema)[]) => vpcs !== undefined, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b2fba8d0cf4..b2c8b2df5d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -209,8 +209,8 @@ importers: specifier: ^5.5.0 version: 5.5.0 akamai-cds-react-components: - specifier: 0.0.1-alpha.6 - version: 0.0.1-alpha.6(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 0.0.1-alpha.11 + version: 0.0.1-alpha.11(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) algoliasearch: specifier: ^4.14.3 version: 4.24.0 @@ -2475,14 +2475,14 @@ packages: ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} - akamai-cds-react-components@0.0.1-alpha.6: - resolution: {integrity: sha512-dmhw1YF8ZKIw/xS7n/Fq6mFV9bG7TmRS85uVHAl+W1Qc4oXFmXGIKwZhXFN1Ue7fePTrU1pz8v3GNTwtv0sWUg==} + akamai-cds-react-components@0.0.1-alpha.11: + resolution: {integrity: sha512-A/CJX+H2OFhwaGpHVtEqQnm1tW5VV8qDed90JgD11qi6RfzU3kIbsuXl+XiD4pxTr17BmAM6wpJsQ7bhyvYCuw==} peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 - akamai-cds-web-components@0.0.1-alpha.6: - resolution: {integrity: sha512-yc0NNkX8kzV+U8dK+CSbKz5QswkNfcX9GHqDSlRzly83aRGASGQYIRsxEquteobzcZkErflKfh/6iW5Rv4HHOg==} + akamai-cds-web-components@0.0.1-alpha.11: + resolution: {integrity: sha512-ZSAYKLmQJcMkQ94oIpEDBL6n4jmhXz9NIi7EshUQl/dQw+qfpJJZXCxTkLlHYALM83DUnprXuatSmXRzZl2bbw==} peerDependencies: '@linode/design-language-system': ^4.0.0 @@ -7792,17 +7792,17 @@ snapshots: json-schema-traverse: 0.4.1 uri-js: 4.4.1 - akamai-cds-react-components@0.0.1-alpha.6(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + akamai-cds-react-components@0.0.1-alpha.11(@linode/design-language-system@4.0.0)(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: '@lit/react': 1.0.7(@types/react@19.1.6) - akamai-cds-web-components: 0.0.1-alpha.6(@linode/design-language-system@4.0.0) + akamai-cds-web-components: 0.0.1-alpha.11(@linode/design-language-system@4.0.0) react: 19.1.0 react-dom: 19.1.0(react@19.1.0) transitivePeerDependencies: - '@linode/design-language-system' - '@types/react' - akamai-cds-web-components@0.0.1-alpha.6(@linode/design-language-system@4.0.0): + akamai-cds-web-components@0.0.1-alpha.11(@linode/design-language-system@4.0.0): dependencies: '@linode/design-language-system': 4.0.0 lit: 3.3.0 diff --git a/scripts/tod-payload/index.ts b/scripts/tod-payload/index.ts index 3a749364634..87a5be2fde3 100644 --- a/scripts/tod-payload/index.ts +++ b/scripts/tod-payload/index.ts @@ -6,6 +6,20 @@ import { program } from 'commander'; import * as fs from 'fs/promises'; import { resolve } from 'path'; +/** + * Encode a string to base64, accounting for UTF-8 characters. + */ +const b64EncodeUnicode = (str: string) => { + // Adapted from: https://stackoverflow.com/a/30106551 + return btoa( + encodeURIComponent(str) + .replace( + /%([0-9A-F]{2})/g, + (_match, p1: string) => { + return String.fromCharCode(Number(`0x${p1}`)); + })); +} + program .name('tod-payload') .description('Output TOD test result payload') @@ -48,6 +62,7 @@ const main = async (junitPath: string) => { return fs.readFile(junitFile, 'utf8'); })); + const payload = JSON.stringify({ team: program.opts()['appTeam'], name: program.opts()['appName'], @@ -57,7 +72,7 @@ const main = async (junitPath: string) => { pass: !program.opts()['fail'], tag: !!program.opts()['tag'] ? program.opts()['tag'] : undefined, xunitResults: junitContents.map((junitContent) => { - return btoa(junitContent); + return b64EncodeUnicode(junitContent); }), });