refactor: [M3-9388 ] - Move Status Page queries queries (#12468)

* Add statuspage query

* update paths

* Added changeset: Move Status Page  queries and dependencies to shared `queries` package

* Added changeset: Added `statusPage/` directory and migrated relevant query keys and hooks

* remove status page queries

* Update constants.ts

* Update packages/queries/.changeset/pr-12468-added-1751563776473.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* Update requests.ts

* update the keys and statusPage

* pass the LINODE_STATUS_PAGE_URL as param

* Update packages/manager/.changeset/pr-12468-removed-1751563731187.md

Co-authored-by: Harsh Shankar Rao <hrao@akamai.com>

* PR - feedback - @mjac0bs

---------

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Co-authored-by: Harsh Shankar Rao <hrao@akamai.com>

Author: 3 people

packages/manager/.changeset/pr-12468-removed-1751563731187.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Move Status Page queries and dependencies to shared `queries` package ([#12468](https://github.com/linode/manager/pull/12468))

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';
 

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 (

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) {

packages/queries/.changeset/pr-12468-added-1751563776473.md

@@ -0,0 +1,5 @@
+---
+"@linode/queries": Added
+---
+
+`statusPage/` directory and migrated relevant query keys and hooks ([#12468](https://github.com/linode/manager/pull/12468))

packages/queries/src/index.ts

@@ -18,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';

…/manager/src/queries/statusPage/index.ts packages/queries/src/statusPage/index.tspackages/manager/src/queries/statusPage/index.ts renamed to packages/queries/src/statusPage/index.ts packages/manager/src/queries/statusPage/index.ts renamed to 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';

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),
+  }),
+});

…nager/src/queries/statusPage/requests.ts …kages/queries/src/statusPage/requests.tspackages/manager/src/queries/statusPage/requests.ts renamed to packages/queries/src/statusPage/requests.ts packages/manager/src/queries/statusPage/requests.ts renamed to 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<IncidentResponse> => {
+export const getIncidents = async (
+  statusPageUrl?: string,
+): Promise<IncidentResponse> => {
+  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<IncidentResponse> => {
  * 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<MaintenanceResponse> => {
+export const getAllMaintenance = async (
+  statusPageUrl?: string,
+): Promise<MaintenanceResponse> => {
+  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<MaintenanceResponse> => {
   } catch (error) {
     return handleError(
       error as APIError,
-      'Error retrieving maintenance events.'
+      'Error retrieving maintenance events.',
     );
   }
 };

…ger/src/queries/statusPage/statusPage.ts …ges/queries/src/statusPage/statusPage.tspackages/manager/src/queries/statusPage/statusPage.ts renamed to packages/queries/src/statusPage/statusPage.ts packages/manager/src/queries/statusPage/statusPage.ts renamed to 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<UseQueryOptions<IncidentResponse, APIError[]>>,
+) =>
   useQuery<IncidentResponse, APIError[]>({
-    ...statusPageQueries.incidents,
+    ...statusPageQueries.incidents(statusPageUrl),
     ...queryPresets.shortLived,
+    ...(options ?? {}),
   });
 
 export const useMaintenanceQuery = (
-  options?: Partial<UseQueryOptions<MaintenanceResponse, APIError[]>>
+  statusPageUrl?: string,
+  options?: Partial<UseQueryOptions<MaintenanceResponse, APIError[]>>,
 ) =>
   useQuery<MaintenanceResponse, APIError[]>({
-    ...statusPageQueries.maintenance,
+    ...statusPageQueries.maintenance(statusPageUrl),
     ...queryPresets.shortLived,
     ...(options ?? {}),
   });