diff --git a/packages/api-v4/.changeset/pr-10589-upcoming-features-1718971604339.md b/packages/api-v4/.changeset/pr-10589-upcoming-features-1718971604339.md new file mode 100644 index 00000000000..31b076dc1d7 --- /dev/null +++ b/packages/api-v4/.changeset/pr-10589-upcoming-features-1718971604339.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Upcoming Features +--- + +Added types needed for DashboardSelect component ([#10589](https://github.com/linode/manager/pull/10589)) diff --git a/packages/api-v4/src/cloudpulse/dashboards.ts b/packages/api-v4/src/cloudpulse/dashboards.ts index 7459249472c..6afd2f7a851 100644 --- a/packages/api-v4/src/cloudpulse/dashboards.ts +++ b/packages/api-v4/src/cloudpulse/dashboards.ts @@ -1,16 +1,13 @@ import { ResourcePage } from 'src/types'; -import Request, { setHeaders, setMethod, setURL } from '../request'; +import Request, { setMethod, setURL } from '../request'; import { Dashboard } from './types'; import { API_ROOT } from 'src/constants'; //Returns the list of all the dashboards available export const getDashboards = () => - Request>( - setURL( - `${API_ROOT}/monitor/services/linode/dashboards` - ), - setMethod('GET'), - setHeaders({ - Authorization: '', //Authorization will be updated once the end-point is ready, till then will use mock data - }) - ); \ No newline at end of file + Request>( + setURL( + `${API_ROOT}/monitor/services/linode/dashboards` + ), + setMethod('GET'), + ); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx index cc2acdf59b1..8db2c68246b 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx @@ -1,18 +1,72 @@ import { renderWithTheme } from "src/utilities/testHelpers"; import { CloudPulseDashboardSelect, CloudPulseDashboardSelectProps } from "./CloudPulseDashboardSelect"; import React from "react"; +import { fireEvent, screen } from '@testing-library/react'; -const props : CloudPulseDashboardSelectProps = { - handleDashboardChange : vi.fn(), +const props: CloudPulseDashboardSelectProps = { + handleDashboardChange: vi.fn(), } -describe("CloudPulse Dashboard select", ()=>{ - it("Should render dashboard select component", ()=>{ - const {getByTestId} = renderWithTheme( - - ); - - expect(getByTestId('cloudview-dashboard-select')).toBeInTheDocument(); +const queryMocks = vi.hoisted(() => ({ + useCloudViewDashboardsQuery: vi.fn().mockReturnValue({}), +})); +vi.mock('src/queries/cloudpulse/dashboards', async () => { + const actual = await vi.importActual('src/queries/cloudpulse/dashboards'); + return { + ...actual, + useCloudViewDashboardsQuery: queryMocks.useCloudViewDashboardsQuery, + }; +}); + +queryMocks.useCloudViewDashboardsQuery.mockReturnValue({ + data: + { + data: [ + { + id: 1, + type: "standard", + service_type: "linode", + label: "Dashboard 1", + created: "2024-04-29T17:09:29", + updated: null, + widgets: {} + } + ] + } + , + isLoading: false, + error: false +}); + +describe("CloudPulse Dashboard select", () => { + it("Should render dashboard select component", () => { + const { getByTestId, getByPlaceholderText } = renderWithTheme( + + ); + + expect(getByTestId('cloudview-dashboard-select')).toBeInTheDocument(); + expect(getByPlaceholderText('Select a Dashboard')).toBeInTheDocument(); + + }), + + it("Should render dashboard select component with data", () => { + + + renderWithTheme() + + fireEvent.click(screen.getByRole('button', { name: 'Open' })); + + expect(screen.getByRole('option', { name: 'Dashboard 1' })).toBeInTheDocument(); + }), + + it("Should select the option on click", () => { + + renderWithTheme(); + + fireEvent.click(screen.getByRole("button", { name: "Open" })); + fireEvent.click(screen.getByRole("option", { name: "Dashboard 1" })); + + expect(screen.getByRole("combobox")).toHaveAttribute("value", "Dashboard 1"); }) -}) \ No newline at end of file +}) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx index 2b051ff41de..8c3178574ab 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx @@ -23,7 +23,7 @@ export const CloudPulseDashboardSelect = React.memo((props: CloudPulseDashboardS const errorText: string = error ? 'Error loading dashboards' : ''; - const placeHolder = "Select Dashboard"; + const placeHolder = "Select a Dashboard"; // sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour const getSortedDashboardsList = (options: Dashboard[]) => { diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx index 6f17a20649d..6570bdd8934 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx @@ -7,6 +7,8 @@ import { CloudPulseRegionSelect } from './CloudPulseRegionSelect'; const props: CloudPulseRegionSelectProps = { handleRegionChange: vi.fn(), + selectedDashboard: undefined, + selectedRegion: undefined }; describe('CloudViewRegionSelect', () => { diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index eb9d4081f9d..1f45fb150b7 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -25,7 +25,7 @@ export const CloudPulseRegionSelect = React.memo( onChange={(e, region) => props.handleRegionChange(region?.id)} regions={regions ? regions : []} disabled={!props.selectedDashboard} - value={props.selectedRegion ?? null} + value={props.selectedRegion} /> ); }