fix: [M3-9281] - Ensure document titles for Cloud Pulse pages have ap…

packages/manager/.changeset/pr-11662-fixed-1739467765713.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Document titles of ACPL with appropriate keyword ([#11662](https://github.com/linode/manager/pull/11662))

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 
 import AlertsIcon from 'src/assets/icons/entityIcons/alerts.svg';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { useAlertDefinitionQuery } from 'src/queries/cloudpulse/alerts';
@@ -96,8 +97,10 @@ export const AlertDetail = () => {
     service_type: alertServiceType,
     type,
   } = alertDetails;
+
   return (
     <>
+      <DocumentTitleSegment segment={`${alertDetails.label}`} />
       <Breadcrumb crumbOverrides={crumbOverrides} pathname={pathname} />
       <Box display="flex" flexDirection="column" gap={2}>
         <Box display="flex" flexDirection={{ md: 'row', xs: 'column' }} gap={2}>

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -9,6 +9,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { useFlags } from 'src/hooks/useFlags';
@@ -51,31 +52,34 @@ export const AlertsLanding = React.memo(() => {
   };
 
   return (
-    <Paper sx={{ padding: 2 }}>
-      <Tabs
-        index={activeTabIndex}
-        onChange={handleChange}
-        sx={{ width: '100%' }}
-      >
-        <Box
-          sx={{
-            aligneItems: 'center',
-            display: 'flex',
-            justifyContent: 'space-between',
-            p: 1,
-            width: '100%',
-          }}
+    <React.Fragment>
+      <DocumentTitleSegment segment="Alerts" />
+      <Paper sx={{ padding: 2 }}>
+        <Tabs
+          index={activeTabIndex}
+          onChange={handleChange}
+          sx={{ width: '100%' }}
         >
-          <TabLinkList tabs={accessibleTabs} />
-        </Box>
-        <Switch>
-          <Route
-            component={AlertDefinitionLanding}
-            path={'/monitor/alerts/definitions'}
-          />
-          <Redirect from="*" to="/monitor/alerts/definitions" />
-        </Switch>
-      </Tabs>
-    </Paper>
+          <Box
+            sx={{
+              aligneItems: 'center',
+              display: 'flex',
+              justifyContent: 'space-between',
+              p: 1,
+              width: '100%',
+            }}
+          >
+            <TabLinkList tabs={accessibleTabs} />
+          </Box>
+          <Switch>
+            <Route
+              component={AlertDefinitionLanding}
+              path={'/monitor/alerts/definitions'}
+            />
+            <Redirect from="*" to="/monitor/alerts/definitions" />
+          </Switch>
+        </Tabs>
+      </Paper>
+    </React.Fragment>
   );
 });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx

@@ -7,6 +7,7 @@ import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
 
 import { MetricCriteriaField } from './Criteria/MetricCriteria';
@@ -109,74 +110,77 @@ export const CreateAlertDefinition = () => {
   });
 
   return (
-    <Paper sx={{ paddingLeft: 1, paddingRight: 1, paddingTop: 2 }}>
-      <Breadcrumb crumbOverrides={overrides} pathname="/Definitions/Create" />
-      <FormProvider {...formMethods}>
-        <form onSubmit={onSubmit}>
-          <Typography marginTop={2} variant="h2">
-            1. General Information
-          </Typography>
-          <Controller
-            render={({ field, fieldState }) => (
-              <TextField
-                data-testid="alert-name"
-                errorText={fieldState.error?.message}
-                label="Name"
-                name="label"
-                onBlur={field.onBlur}
-                onChange={(e) => field.onChange(e.target.value)}
-                placeholder="Enter Name"
-                value={field.value ?? ''}
-              />
-            )}
-            control={control}
-            name="label"
-          />
-          <Controller
-            render={({ field, fieldState }) => (
-              <TextField
-                errorText={fieldState.error?.message}
-                label="Description"
-                name="description"
-                onBlur={field.onBlur}
-                onChange={(e) => field.onChange(e.target.value)}
-                optional
-                placeholder="Enter Description"
-                value={field.value ?? ''}
-              />
-            )}
-            control={control}
-            name="description"
-          />
-          <CloudPulseServiceSelect name="serviceType" />
-          <CloudPulseAlertSeveritySelect name="severity" />
-          <CloudPulseModifyAlertResources name="entity_ids" />
-          <MetricCriteriaField
-            setMaxInterval={(interval: number) =>
-              setMaxScrapeInterval(interval)
-            }
-            name="rule_criteria.rules"
-            serviceType={serviceTypeWatcher!}
-          />
-          <TriggerConditions
-            maxScrapingInterval={maxScrapeInterval}
-            name="trigger_conditions"
-          />
-          <AddChannelListing name="channel_ids" />
-          <ActionsPanel
-            primaryButtonProps={{
-              label: 'Submit',
-              loading: formState.isSubmitting,
-              type: 'submit',
-            }}
-            secondaryButtonProps={{
-              label: 'Cancel',
-              onClick: alertCreateExit,
-            }}
-            sx={{ display: 'flex', justifyContent: 'flex-end' }}
-          />
-        </form>
-      </FormProvider>
-    </Paper>
+    <React.Fragment>
+      <DocumentTitleSegment segment="Create an Alert" />
+      <Paper sx={{ paddingLeft: 1, paddingRight: 1, paddingTop: 2 }}>
+        <Breadcrumb crumbOverrides={overrides} pathname="/Definitions/Create" />
+        <FormProvider {...formMethods}>
+          <form onSubmit={onSubmit}>
+            <Typography marginTop={2} variant="h2">
+              1. General Information
+            </Typography>
+            <Controller
+              render={({ field, fieldState }) => (
+                <TextField
+                  data-testid="alert-name"
+                  errorText={fieldState.error?.message}
+                  label="Name"
+                  name="label"
+                  onBlur={field.onBlur}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  placeholder="Enter Name"
+                  value={field.value ?? ''}
+                />
+              )}
+              control={control}
+              name="label"
+            />
+            <Controller
+              render={({ field, fieldState }) => (
+                <TextField
+                  errorText={fieldState.error?.message}
+                  label="Description"
+                  name="description"
+                  onBlur={field.onBlur}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  optional
+                  placeholder="Enter Description"
+                  value={field.value ?? ''}
+                />
+              )}
+              control={control}
+              name="description"
+            />
+            <CloudPulseServiceSelect name="serviceType" />
+            <CloudPulseAlertSeveritySelect name="severity" />
+            <CloudPulseModifyAlertResources name="entity_ids" />
+            <MetricCriteriaField
+              setMaxInterval={(interval: number) =>
+                setMaxScrapeInterval(interval)
+              }
+              name="rule_criteria.rules"
+              serviceType={serviceTypeWatcher!}
+            />
+            <TriggerConditions
+              maxScrapingInterval={maxScrapeInterval}
+              name="trigger_conditions"
+            />
+            <AddChannelListing name="channel_ids" />
+            <ActionsPanel
+              primaryButtonProps={{
+                label: 'Submit',
+                loading: formState.isSubmitting,
+                type: 'submit',
+              }}
+              secondaryButtonProps={{
+                label: 'Cancel',
+                onClick: alertCreateExit,
+              }}
+              sx={{ display: 'flex', justifyContent: 'flex-end' }}
+            />
+          </form>
+        </FormProvider>
+      </Paper>
+    </React.Fragment>
   );
 };

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx

@@ -2,6 +2,8 @@ import { Box, Paper } from '@linode/ui';
 import { Grid } from '@mui/material';
 import * as React from 'react';
 
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+
 import { GlobalFilters } from '../Overview/GlobalFilters';
 import { CloudPulseAppliedFilterRenderer } from '../shared/CloudPulseAppliedFilterRenderer';
 import { defaultTimeDuration } from '../Utils/CloudPulseDateTimePickerUtils';
@@ -75,30 +77,33 @@ export const CloudPulseDashboardLanding = () => {
     []
   );
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <Paper sx={{ padding: 0 }}>
-          <Box display="flex" flexDirection="column">
-            <GlobalFilters
-              handleAnyFilterChange={onFilterChange}
-              handleDashboardChange={onDashboardChange}
-              handleTimeDurationChange={onTimeDurationChange}
-              handleToggleAppliedFilter={toggleAppliedFilter}
-            />
-            {dashboard?.service_type && showAppliedFilters && (
-              <CloudPulseAppliedFilterRenderer
-                filters={filterData.label}
-                serviceType={dashboard.service_type}
+    <React.Fragment>
+      <DocumentTitleSegment segment="Dashboards" />
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Paper sx={{ padding: 0 }}>
+            <Box display="flex" flexDirection="column">
+              <GlobalFilters
+                handleAnyFilterChange={onFilterChange}
+                handleDashboardChange={onDashboardChange}
+                handleTimeDurationChange={onTimeDurationChange}
+                handleToggleAppliedFilter={toggleAppliedFilter}
               />
-            )}
-          </Box>
-        </Paper>
+              {dashboard?.service_type && showAppliedFilters && (
+                <CloudPulseAppliedFilterRenderer
+                  filters={filterData.label}
+                  serviceType={dashboard.service_type}
+                />
+              )}
+            </Box>
+          </Paper>
+        </Grid>
+        <CloudPulseDashboardRenderer
+          dashboard={dashboard}
+          filterValue={filterData.id}
+          timeDuration={timeDuration}
+        />
       </Grid>
-      <CloudPulseDashboardRenderer
-        dashboard={dashboard}
-        filterValue={filterData.id}
-        timeDuration={timeDuration}
-      />
-    </Grid>
+    </React.Fragment>
   );
 };