fix: [M3-8905] - Change document title from address to appropriate ke…

…yword (linode#11385) * fix: [M3-8905] - Change document title from address to appropriate keyword * Added changeset: Document title from URL to appropriate keyword * Make Document title more descriptive * resolve small regression * Change some more document title from address to appropriate keyword
dmcintyr-akamai · Jan 9, 2025 · 15af44d · 15af44d
1 parent e7a68f8
commit 15af44d
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 144 deletions.
diff --git a/packages/manager/.changeset/pr-11385-fixed-1733735480951.md b/packages/manager/.changeset/pr-11385-fixed-1733735480951.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Document title from URL to appropriate keyword ([#11385](https://github.com/linode/manager/pull/11385))
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -8,6 +8,7 @@ import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Currency } from 'src/components/Currency';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { Link } from 'src/components/Link';
@@ -117,152 +118,156 @@ export const InvoiceDetail = () => {
   };
 
   return (
-    <Paper
-      sx={{
-        padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
-      }}
-    >
-      <Grid container rowGap={2}>
-        <Grid xs={12}>
-          <Grid container data-qa-invoice-header spacing={2} sx={sxGrid}>
-            <Grid sm={4} sx={sxGrid} xs={12}>
-              <Link
-                accessibleAriaLabel="Back to Billing"
-                data-qa-back-to-billing
-                to={`/account/billing`}
-              >
-                <IconButton
-                  sx={{
-                    padding: 0,
-                  }}
-                  component="span"
-                  disableFocusRipple
-                  role="none"
-                  size="large"
-                  tabIndex={-1}
+    <>
+      <DocumentTitleSegment segment="Invoice | Account & Billing" />
+      <Paper
+        sx={{
+          padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+        }}
+      >
+        <Grid container rowGap={2}>
+          <Grid xs={12}>
+            <Grid container data-qa-invoice-header spacing={2} sx={sxGrid}>
+              <Grid sm={4} sx={sxGrid} xs={12}>
+                <Link
+                  accessibleAriaLabel="Back to Billing"
+                  data-qa-back-to-billing
+                  to={`/account/billing`}
                 >
-                  <KeyboardArrowLeft
+                  <IconButton
                     sx={{
-                      height: 34,
-                      width: 34,
+                      padding: 0,
+                    }}
+                    component="span"
+                    disableFocusRipple
+                    role="none"
+                    size="large"
+                    tabIndex={-1}
+                  >
+                    <KeyboardArrowLeft
+                      sx={{
+                        height: 34,
+                        width: 34,
+                      }}
+                    />
+                  </IconButton>
+                </Link>
+                {invoice && (
+                  <LandingHeader
+                    breadcrumbProps={{
+                      crumbOverrides: [{ label: 'Billing Info', position: 1 }],
+                      firstAndLastOnly: true,
+                      labelTitle: `Invoice #${invoice.id}`,
+                      pathname: location.pathname,
                     }}
                   />
-                </IconButton>
-              </Link>
-              {invoice && (
-                <LandingHeader
-                  breadcrumbProps={{
-                    crumbOverrides: [{ label: 'Billing Info', position: 1 }],
-                    firstAndLastOnly: true,
-                    labelTitle: `Invoice #${invoice.id}`,
-                    pathname: location.pathname,
-                  }}
-                />
-              )}
+                )}
+              </Grid>
+              <Grid
+                data-qa-printable-invoice
+                sm
+                sx={{ ...sxGrid, justifyContent: 'flex-end' }}
+              >
+                {account && invoice && items && (
+                  <>
+                    <DownloadCSV
+                      csvRef={csvRef}
+                      data={items}
+                      filename={`invoice-${invoice.date}.csv`}
+                      headers={csvHeaders}
+                      onClick={() => csvRef.current.link.click()}
+                      sx={{ ...sxDownloadButton, marginRight: '8px' }}
+                    />
+                    <Button
+                      buttonType="secondary"
+                      onClick={() => printInvoicePDF(account, invoice, items)}
+                      sx={sxDownloadButton}
+                    >
+                      Download PDF
+                    </Button>
+                  </>
+                )}
+              </Grid>
+              <Grid sm="auto">
+                {invoice && (
+                  <Typography data-qa-total={invoice.total} variant="h2">
+                    Total:{' '}
+                    <Currency
+                      quantity={invoice.total}
+                      wrapInParentheses={invoice.total < 0}
+                    />
+                  </Typography>
+                )}
+              </Grid>
             </Grid>
-            <Grid
-              data-qa-printable-invoice
-              sm
-              sx={{ ...sxGrid, justifyContent: 'flex-end' }}
-            >
-              {account && invoice && items && (
-                <>
-                  <DownloadCSV
-                    csvRef={csvRef}
-                    data={items}
-                    filename={`invoice-${invoice.date}.csv`}
-                    headers={csvHeaders}
-                    onClick={() => csvRef.current.link.click()}
-                    sx={{ ...sxDownloadButton, marginRight: '8px' }}
+          </Grid>
+          <Grid xs={12}>
+            {pdfGenerationError && (
+              <Notice variant="error">Failed generating PDF.</Notice>
+            )}
+            <InvoiceTable
+              errors={errors}
+              items={items}
+              loading={loading}
+              shouldShowRegion={shouldShowRegion}
+            />
+          </Grid>
+          <Grid xs={12}>
+            {invoice && (
+              <Box
+                sx={{
+                  alignItems: 'flex-end',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: theme.spacing(2),
+                  padding: theme.spacing(1),
+                }}
+                data-qa-invoice-summary
+              >
+                <Typography variant="h2">
+                  Subtotal:{' '}
+                  <Currency
+                    quantity={invoice.subtotal}
+                    wrapInParentheses={invoice.subtotal < 0}
                   />
-                  <Button
-                    buttonType="secondary"
-                    onClick={() => printInvoicePDF(account, invoice, items)}
-                    sx={sxDownloadButton}
-                  >
-                    Download PDF
-                  </Button>
-                </>
-              )}
-            </Grid>
-            <Grid sm="auto">
-              {invoice && (
-                <Typography data-qa-total={invoice.total} variant="h2">
+                </Typography>
+                {invoice.tax_summary.map((summary) => {
+                  return (
+                    <Typography key={summary.name} variant="h2">
+                      {summary.name === 'Standard'
+                        ? 'Standard Tax: '
+                        : `${summary.name}: `}
+                      <Currency quantity={summary.tax} />
+                    </Typography>
+                  );
+                })}
+                <Typography variant="h2">
+                  Tax Subtotal: <Currency quantity={invoice.tax} />
+                </Typography>
+                <Typography variant="h2">
                   Total:{' '}
                   <Currency
                     quantity={invoice.total}
                     wrapInParentheses={invoice.total < 0}
                   />
                 </Typography>
-              )}
-            </Grid>
+                <Typography>
+                  This invoice may include Linode Compute Instances that have
+                  been powered off as the data is maintained and resources are
+                  still reserved. If you no longer need powered-down Linodes,
+                  you can{' '}
+                  <Link to="https://techdocs.akamai.com/cloud-computing/docs/stop-further-billing">
+                    {' '}
+                    remove the service
+                  </Link>{' '}
+                  from your account.
+                </Typography>
+              </Box>
+            )}
           </Grid>
         </Grid>
-        <Grid xs={12}>
-          {pdfGenerationError && (
-            <Notice variant="error">Failed generating PDF.</Notice>
-          )}
-          <InvoiceTable
-            errors={errors}
-            items={items}
-            loading={loading}
-            shouldShowRegion={shouldShowRegion}
-          />
-        </Grid>
-        <Grid xs={12}>
-          {invoice && (
-            <Box
-              sx={{
-                alignItems: 'flex-end',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: theme.spacing(2),
-                padding: theme.spacing(1),
-              }}
-              data-qa-invoice-summary
-            >
-              <Typography variant="h2">
-                Subtotal:{' '}
-                <Currency
-                  quantity={invoice.subtotal}
-                  wrapInParentheses={invoice.subtotal < 0}
-                />
-              </Typography>
-              {invoice.tax_summary.map((summary) => {
-                return (
-                  <Typography key={summary.name} variant="h2">
-                    {summary.name === 'Standard'
-                      ? 'Standard Tax: '
-                      : `${summary.name}: `}
-                    <Currency quantity={summary.tax} />
-                  </Typography>
-                );
-              })}
-              <Typography variant="h2">
-                Tax Subtotal: <Currency quantity={invoice.tax} />
-              </Typography>
-              <Typography variant="h2">
-                Total:{' '}
-                <Currency
-                  quantity={invoice.total}
-                  wrapInParentheses={invoice.total < 0}
-                />
-              </Typography>
-              <Typography>
-                This invoice may include Linode Compute Instances that have been
-                powered off as the data is maintained and resources are still
-                reserved. If you no longer need powered-down Linodes, you can{' '}
-                <Link to="https://techdocs.akamai.com/cloud-computing/docs/stop-further-billing">
-                  {' '}
-                  remove the service
-                </Link>{' '}
-                from your account.
-              </Typography>
-            </Box>
-          )}
-        </Grid>
-      </Grid>
-    </Paper>
+      </Paper>
+    </>
   );
 };
 

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -165,7 +165,11 @@ export const DatabaseDetail = () => {
 
   return (
     <>
-      <DocumentTitleSegment segment={database.label} />
+      <DocumentTitleSegment
+        segment={`${database?.label} - ${
+          tabs[getTabIndex()]?.title ?? 'Detail View'
+        }`}
+      />
       <LandingHeader
         breadcrumbProps={{
           crumbOverrides: [

diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx
@@ -189,6 +189,7 @@ export const DomainsLanding = (props: DomainsLandingProps) => {
   if (domains?.results === 0) {
     return (
       <>
+        <DocumentTitleSegment segment="Domains" />
         <DomainsEmptyLandingState
           navigateToCreate={navigateToCreate}
           openImportZoneDrawer={openImportZoneDrawer}

diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
@@ -78,7 +78,9 @@ export const KubernetesClusterDetail = () => {
 
   return (
     <Box>
-      <DocumentTitleSegment segment={`Kubernetes Cluster ${cluster?.label}`} />
+      <DocumentTitleSegment
+        segment={`${cluster?.label} | Kubernetes Cluster`}
+      />
       <UpgradeKubernetesVersionBanner
         clusterID={cluster?.id}
         clusterLabel={cluster?.label}

diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
@@ -10,6 +10,7 @@ import { debounce } from 'throttle-debounce';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Hidden } from 'src/components/Hidden';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -378,6 +379,7 @@ export const BucketDetail = (props: Props) => {
 
   return (
     <>
+      <DocumentTitleSegment segment={`${bucketName} | Bucket`} />
       <BucketBreadcrumb
         bucketName={bucketName}
         history={history}
@@ -439,7 +441,6 @@ export const BucketDetail = (props: Props) => {
           </StyledTryAgainButton>
         </StyledErrorFooter>
       )}
-
       {!hasNextPage && numOfDisplayedObjects >= 100 && (
         <StyledFooter variant="subtitle2">
           Showing all {numOfDisplayedObjects} items

diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -2,6 +2,7 @@ import { Divider, Paper, Stack } from '@linode/ui';
 import { createLazyRoute } from '@tanstack/react-router';
 import React from 'react';
 
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { useProfile } from 'src/queries/profile/profile';
 
 import { AvatarForm } from './AvatarForm';
@@ -15,14 +16,20 @@ export const DisplaySettings = () => {
   const isProxyUser = profile?.user_type === 'proxy';
 
   return (
-    <Paper>
-      <Stack divider={<Divider spacingBottom={0} spacingTop={0} />} spacing={3}>
-        {!isProxyUser && <AvatarForm />}
-        <UsernameForm />
-        <EmailForm />
-        <TimezoneForm />
-      </Stack>
-    </Paper>
+    <>
+      <DocumentTitleSegment segment="Display" />
+      <Paper>
+        <Stack
+          divider={<Divider spacingBottom={0} spacingTop={0} />}
+          spacing={3}
+        >
+          {!isProxyUser && <AvatarForm />}
+          <UsernameForm />
+          <EmailForm />
+          <TimezoneForm />
+        </Stack>
+      </Paper>
+    </>
   );
 };