Sync page title and document title (#1032)

* Sync page title and document title

* update readme

Author: aine-etke

README.md

@@ -144,6 +144,7 @@ The following changes are already implemented:
 * 📋 [Add User Memberships tab](https://github.com/etkecc/synapse-admin/issues/1002)
 * 🐋 [Run rootless in Docker container](https://github.com/etkecc/synapse-admin/issues/1021)
 * 🇮🇷 [Fix loading of Persian localization](https://github.com/etkecc/synapse-admin/commit/737ec69b16da62e515be12778c46823f6525df4e#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2)
+* 🔖 [Sync page title and document title](https://github.com/etkecc/synapse-admin/pull/1032)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

src/components/AdminLayout.tsx

@@ -168,10 +168,14 @@ export const AdminLayout = ({ children }) => {
   const icfg = GetInstanceConfig();
   useEffect(() => {
     document.documentElement.lang = locale;
-    // set <title> based on instance name
-    if (icfg.name) {
+
+    // copy of the code from index.tsx to set base title dynamically
+    document.head.dataset.baseTitle = icfg.name || "Synapse Admin";
+    // set <title> based on instance name, only if it's not already set
+    if (icfg.name && !document.title.includes(icfg.name)) {
       document.title = icfg.name;
     }
+
     if (icfg.favicon_url) {
       const link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
       if (link) {

src/components/etke.cc/BillingPage.tsx

@@ -24,6 +24,7 @@ import { Title, useDataProvider, useLocale, useNotify, useTranslate } from "reac
 import { EtkeAttribution } from "./EtkeAttribution";
 import { useAppContext } from "../../Context";
 import { SynapseDataProvider, Payment } from "../../synapse/dataProvider";
+import { useDocTitle } from "../hooks/useDocTitle";
 
 const TruncatedUUID = ({ uuid }): React.ReactElement => {
   const short = `${uuid.slice(0, 8)}...${uuid.slice(-6)}`;
@@ -53,6 +54,7 @@ const BillingPage = () => {
   const [failure, setFailure] = useState<string | null>(null);
   const [downloadingInvoice, setDownloadingInvoice] = useState<string | null>(null);
 
+  useDocTitle(translate("etkecc.billing.name"));
   useEffect(() => {
     const fetchBillingData = async () => {
       if (!etkeccAdmin) return;

src/components/etke.cc/ServerActionsPage.tsx

@@ -6,11 +6,13 @@ import { Title, useTranslate } from "react-admin";
 import CurrentlyRunningCommand from "./CurrentlyRunningCommand";
 import { EtkeAttribution } from "./EtkeAttribution";
 import ServerCommandsPanel from "./ServerCommandsPanel";
+import { useDocTitle } from "../hooks/useDocTitle";
 import RecurringCommandsList from "./schedules/components/recurring/RecurringCommandsList";
 import ScheduledCommandsList from "./schedules/components/scheduled/ScheduledCommandsList";
 
 const ServerActionsPage = () => {
   const translate = useTranslate();
+  useDocTitle(translate("etkecc.actions.name"));
 
   return (
     <>

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -7,6 +7,7 @@ import { Title, useLocale, useStore, useTranslate } from "react-admin";
 import { useAppContext } from "../../Context";
 import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider";
 import { getTimeSince } from "../../utils/date";
+import { useDocTitle } from "../hooks/useDocTitle";
 
 const ServerNotificationsPage = () => {
   const locale = useLocale();
@@ -17,6 +18,8 @@ const ServerNotificationsPage = () => {
     success: false,
   });
 
+  useDocTitle(translate("etkecc.notifications.title"));
+
   const notifications = serverNotifications.notifications;
 
   return (

src/components/etke.cc/ServerStatusPage.tsx

@@ -8,6 +8,7 @@ import { Title } from "react-admin";
 import CurrentlyRunningCommand from "./CurrentlyRunningCommand";
 import { EtkeAttribution } from "./EtkeAttribution";
 import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider";
+import { useDocTitle } from "../hooks/useDocTitle";
 
 const StatusChip = ({
   isOkay,
@@ -44,6 +45,7 @@ const ServerComponentText = ({ text }: { text: string }) => {
 
 const ServerStatusPage = () => {
   const translate = useTranslate();
+  useDocTitle(translate("etkecc.status.name"));
   const errorLabel = translate("etkecc.status.error");
   const [serverStatus, _setServerStatus] = useStore<ServerStatusResponse>("serverStatus", {
     ok: false,

src/components/etke.cc/schedules/components/recurring/RecurringCommandEdit.tsx

@@ -13,13 +13,15 @@ import {
   SelectInput,
   TimeInput,
   useTranslate,
+  Title,
 } from "react-admin";
 import { useWatch } from "react-hook-form";
 import { useParams, useNavigate } from "react-router-dom";
 
 import RecurringDeleteButton from "./RecurringDeleteButton";
 import { useAppContext } from "../../../../../Context";
 import { RecurringCommand } from "../../../../../synapse/dataProvider";
+import { useDocTitle } from "../../../../hooks/useDocTitle";
 import { EtkeAttribution } from "../../../EtkeAttribution";
 import { useServerCommands } from "../../../hooks/useServerCommands";
 import { useRecurringCommands } from "../../hooks/useRecurringCommands";
@@ -59,6 +61,7 @@ const RecurringCommandEdit = () => {
   const pageTitle = isCreating
     ? translate("etkecc.actions.recurring_title_create")
     : translate("etkecc.actions.recurring_title_edit");
+  useDocTitle(pageTitle);
 
   const commandChoices = transformCommandsToChoices(serverCommands);
   const dayOfWeekChoices = [
@@ -144,74 +147,79 @@ const RecurringCommandEdit = () => {
   }
 
   return (
-    <Box sx={{ mt: 2 }}>
-      <Button
-        label={translate("etkecc.actions.buttons.back")}
-        onClick={() => navigate("/server_actions")}
-        startIcon={<ArrowBackIcon />}
-        sx={{ mb: 2 }}
-      />
-
-      <Card>
-        <CardHeader title={pageTitle} />
-        <CardContent>
-          {command && (
-            <EtkeAttribution>
-              <Alert severity="info">
-                <Typography variant="body1" sx={{ px: 2 }}>
-                  {translate("etkecc.actions.command_details_intro")}{" "}
-                  <Link href={`https://etke.cc/help/extras/scheduler/#${command.command}`} target="_blank">
-                    {`etke.cc/help/extras/scheduler/#${command.command}`}
-                  </Link>
-                  .
-                </Typography>
-              </Alert>
-            </EtkeAttribution>
-          )}
-          <Form
-            defaultValues={command || undefined}
-            onSubmit={handleSubmit}
-            record={command || undefined}
-            warnWhenUnsavedChanges
-          >
-            <Box display="flex" flexDirection="column" gap={2}>
-              {!isCreating && (
-                <TextInput readOnly source="id" label={translate("etkecc.actions.form.id")} fullWidth required />
-              )}
-              <SelectInput
-                source="command"
-                choices={commandChoices}
-                label={translate("etkecc.actions.form.command")}
-                fullWidth
-                required
-              />
-              <ArgumentsField serverCommands={serverCommands} />
-              <SelectInput
-                source="day_of_week"
-                choices={dayOfWeekChoices}
-                label={translate("etkecc.actions.form.day_of_week")}
-                fullWidth
-                required
-              />
-              <TimeInput
-                source="execution_time"
-                label={translate("etkecc.actions.table.time_utc")}
-                fullWidth
-                required
-              />
-              <Box mt={2} display="flex" justifyContent="space-between">
-                <SaveButton
-                  label={
-                    isCreating ? translate("etkecc.actions.buttons.create") : translate("etkecc.actions.buttons.update")
-                  }
+    <>
+      <Title title={pageTitle} />
+      <Box sx={{ mt: 2 }}>
+        <Button
+          label={translate("etkecc.actions.buttons.back")}
+          onClick={() => navigate("/server_actions")}
+          startIcon={<ArrowBackIcon />}
+          sx={{ mb: 2 }}
+        />
+
+        <Card>
+          <CardHeader title={pageTitle} />
+          <CardContent>
+            {command && (
+              <EtkeAttribution>
+                <Alert severity="info">
+                  <Typography variant="body1" sx={{ px: 2 }}>
+                    {translate("etkecc.actions.command_details_intro")}{" "}
+                    <Link href={`https://etke.cc/help/extras/scheduler/#${command.command}`} target="_blank">
+                      {`etke.cc/help/extras/scheduler/#${command.command}`}
+                    </Link>
+                    .
+                  </Typography>
+                </Alert>
+              </EtkeAttribution>
+            )}
+            <Form
+              defaultValues={command || undefined}
+              onSubmit={handleSubmit}
+              record={command || undefined}
+              warnWhenUnsavedChanges
+            >
+              <Box display="flex" flexDirection="column" gap={2}>
+                {!isCreating && (
+                  <TextInput readOnly source="id" label={translate("etkecc.actions.form.id")} fullWidth required />
+                )}
+                <SelectInput
+                  source="command"
+                  choices={commandChoices}
+                  label={translate("etkecc.actions.form.command")}
+                  fullWidth
+                  required
                 />
-                {!isCreating && <RecurringDeleteButton />}
+                <ArgumentsField serverCommands={serverCommands} />
+                <SelectInput
+                  source="day_of_week"
+                  choices={dayOfWeekChoices}
+                  label={translate("etkecc.actions.form.day_of_week")}
+                  fullWidth
+                  required
+                />
+                <TimeInput
+                  source="execution_time"
+                  label={translate("etkecc.actions.table.time_utc")}
+                  fullWidth
+                  required
+                />
+                <Box mt={2} display="flex" justifyContent="space-between">
+                  <SaveButton
+                    label={
+                      isCreating
+                        ? translate("etkecc.actions.buttons.create")
+                        : translate("etkecc.actions.buttons.update")
+                    }
+                  />
+                  {!isCreating && <RecurringDeleteButton />}
+                </Box>
               </Box>
-            </Box>
-          </Form>
-        </CardContent>
-      </Card>
-    </Box>
+            </Form>
+          </CardContent>
+        </Card>
+      </Box>
+    </>
   );
 };