feat: support document title (apache#7410)

bobharwood · Apr 30, 2024 · c3a5b74 · c3a5b74
1 parent c890de7
commit c3a5b74
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 3 deletions.
diff --git a/config-ui/env.example b/config-ui/env.example
@@ -15,6 +15,7 @@
 #
 
 # About Basic Information
+# DEVLAKE_BRAND_NAME=
 # DEVLAKE_PATH_PREFIX=
 # DEVLAKE_TITLE_CUSTOM=
 # DEVLAKE_COLOR_CUSTOM=

diff --git a/config-ui/index.html b/config-ui/index.html
@@ -32,7 +32,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Config UI</title>
+    <title>DevLake</title>
     <link rel="icon" href="/favicon.ico" />
   </head>
   <body>

diff --git a/config-ui/package.json b/config-ui/package.json
@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-is": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-medium-image-zoom": "^5.1.10",
@@ -53,6 +54,7 @@
     "@types/react": "^18.2.56",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.19",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/config-ui/src/routes/blueprint/connection-detail/index.tsx b/config-ui/src/routes/blueprint/connection-detail/index.tsx
@@ -18,6 +18,7 @@
 
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
 import { Flex, Table, Popconfirm, Modal, Button } from 'antd';
 
@@ -30,6 +31,8 @@ import { operator } from '@/utils';
 
 import * as S from './styled';
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 export const BlueprintConnectionDetailPage = () => {
   const [version, setVersion] = useState(1);
   const [open, setOpen] = useState(false);
@@ -213,6 +216,11 @@ export const BlueprintConnectionDetailPage = () => {
             ]
       }
     >
+      <Helmet>
+        <title>
+          {pname ? pname : blueprint.name} - {connection.name} - {brandName}
+        </title>
+      </Helmet>
       <S.Top>
         <span>
           To manage the complete data scope and scope config for this Connection, please{' '}

diff --git a/config-ui/src/routes/blueprint/detail/blueprint-detail-page.tsx b/config-ui/src/routes/blueprint/detail/blueprint-detail-page.tsx
@@ -17,6 +17,7 @@
  */
 
 import { useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { PageHeader } from '@/components';
 import { PATHS } from '@/config';
@@ -25,6 +26,8 @@ import { FromEnum } from '../types';
 
 import { BlueprintDetail } from './blueprint-detail';
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 export const BlueprintDetailPage = () => {
   const { id } = useParams() as { id: string };
 
@@ -36,6 +39,11 @@ export const BlueprintDetailPage = () => {
         { name: id, path: PATHS.BLUEPRINT(id) },
       ]}
     >
+      <Helmet>
+        <title>
+          {`Blueprints:${id}`} - {brandName}
+        </title>
+      </Helmet>
       <BlueprintDetail id={id} from={FromEnum.blueprint} />
     </PageHeader>
   );

diff --git a/config-ui/src/routes/connection/connection.tsx b/config-ui/src/routes/connection/connection.tsx
@@ -18,6 +18,7 @@
 
 import { useState, useMemo } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { DeleteOutlined, PlusOutlined, LinkOutlined, ClearOutlined } from '@ant-design/icons';
 import { theme, Space, Table, Button, Modal, message } from 'antd';
 
@@ -40,6 +41,8 @@ import { operator } from '@/utils';
 
 import * as S from './styled';
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 export const Connection = () => {
   const [type, setType] = useState<
     | 'deleteConnection'
@@ -241,6 +244,11 @@ export const Connection = () => {
         </Button>
       }
     >
+      <Helmet>
+        <title>
+          {connection.name} - {brandName}
+        </title>
+      </Helmet>
       <Space style={{ display: 'flex' }} direction="vertical" size={36}>
         <div>
           <span style={{ marginRight: 4 }}>Status:</span>

diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx
@@ -16,8 +16,9 @@
  *
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useLoaderData, Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { Layout as AntdLayout, Menu, Divider } from 'antd';
 
 import { PageLoading, Logo, ExternalLink } from '@/components';
@@ -29,6 +30,8 @@ import { menuItems, menuItemsMatch, headerItems } from './config';
 
 const { Sider, Header, Content, Footer } = AntdLayout;
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 export const Layout = () => {
   const [openKeys, setOpenKeys] = useState<string[]>([]);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
@@ -67,6 +70,11 @@ export const Layout = () => {
     setSelectedKeys(selectedKeys);
   }, [pathname]);
 
+  const title = useMemo(() => {
+    const curMenuItem = menuItemsMatch[pathname];
+    return curMenuItem?.label ?? '';
+  }, [pathname]);
+
   if (['idle', 'loading'].includes(status)) {
     return <PageLoading />;
   }
@@ -77,6 +85,12 @@ export const Layout = () => {
 
   return (
     <AntdLayout style={{ height: '100vh' }}>
+      <Helmet>
+        <title>
+          {title ? `${title} - ` : ''}
+          {brandName}
+        </title>
+      </Helmet>
       <Sider>
         {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
           <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff' }}>

diff --git a/config-ui/src/routes/onboard/index.tsx b/config-ui/src/routes/onboard/index.tsx
@@ -18,6 +18,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { theme, Layout, Modal } from 'antd';
 
@@ -50,6 +51,8 @@ const steps = [
   },
 ];
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 interface Props {
   logo?: React.ReactNode;
   title?: React.ReactNode;
@@ -109,6 +112,9 @@ export const Onboard = ({ logo, title }: Props) => {
         setPlugin: setPlugin,
       }}
     >
+      <Helmet>
+        <title>Onboard - {brandName}</title>
+      </Helmet>
       <Layout style={{ minHeight: '100vh' }}>
         <S.Inner>
           {step === 0 ? (

diff --git a/config-ui/src/routes/project/detail/index.tsx b/config-ui/src/routes/project/detail/index.tsx
@@ -18,6 +18,7 @@
 
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { Tabs } from 'antd';
 import useUrlState from '@ahooksjs/use-url-state';
 
@@ -31,6 +32,8 @@ import { WebhooksPanel } from './webhooks-panel';
 import { SettingsPanel } from './settings-panel';
 import * as S from './styled';
 
+const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
+
 export const ProjectDetailPage = () => {
   const [version, setVersion] = useState(1);
 
@@ -58,6 +61,11 @@ export const ProjectDetailPage = () => {
         { name: data.name, path: PATHS.PROJECT(pname) },
       ]}
     >
+      <Helmet>
+        <title>
+          {data.name} - {brandName}
+        </title>
+      </Helmet>
       <S.Wrapper>
         <Tabs
           items={[

diff --git a/config-ui/src/vite-env.d.ts b/config-ui/src/vite-env.d.ts
@@ -20,6 +20,7 @@
 /// <reference types="vite-plugin-svgr/client" />
 
 interface ImportMetaEnv {
+  readonly DEVLAKE_BRAND_NAME: string;
   readonly DEVLAKE_PATH_PREFIX: string;
   readonly DEVLAKE_TITLE_CUSTOM: string;
   readonly DEVLAKE_COLOR_CUSTOM: string;

diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
@@ -2647,6 +2647,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-helmet@npm:^6.1.11":
+  version: 6.1.11
+  resolution: "@types/react-helmet@npm:6.1.11"
+  dependencies:
+    "@types/react": "*"
+  checksum: e329d8ad82c365fec7dd7d91c8b6d167faac30cef0d9f1e27d7e895172a0ebfa65829fb4acabbe79283b01cbbe5840a845caeb50148ceef6f3fad42b3c2c4bdc
+  languageName: node
+  linkType: hard
+
 "@types/react-router-dom@npm:^5.3.3":
   version: 5.3.3
   resolution: "@types/react-router-dom@npm:5.3.3"
@@ -3665,6 +3674,7 @@ __metadata:
     "@types/react": ^18.2.56
     "@types/react-copy-to-clipboard": ^5.0.7
     "@types/react-dom": ^18.2.19
+    "@types/react-helmet": ^6.1.11
     "@types/react-router-dom": ^5.3.3
     "@types/styled-components": ^5.1.34
     "@vitejs/plugin-react": ^4.2.1
@@ -3689,6 +3699,7 @@ __metadata:
     react: ^18.2.0
     react-copy-to-clipboard: ^5.1.0
     react-dom: ^18.2.0
+    react-helmet: ^6.1.0
     react-is: ^18.2.0
     react-markdown: ^9.0.1
     react-medium-image-zoom: ^5.1.10
@@ -7031,7 +7042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -7656,6 +7667,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.1.1":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+  languageName: node
+  linkType: hard
+
+"react-helmet@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "react-helmet@npm:6.1.0"
+  dependencies:
+    object-assign: ^4.1.1
+    prop-types: ^15.7.2
+    react-fast-compare: ^3.1.1
+    react-side-effect: ^2.1.0
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: a4998479dab7fc1c2799eddefb1870a9d881b5f71cfdf97979a9882e42f4bb50402d55335f308f461e735e01a06f46b16cc7b4e6bcb22c7a4a6f85a753c5c106
+  languageName: node
+  linkType: hard
+
 "react-infinite-scroll-component@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-infinite-scroll-component@npm:6.1.0"
@@ -7765,6 +7797,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-side-effect@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "react-side-effect@npm:2.1.2"
+  peerDependencies:
+    react: ^16.3.0 || ^17.0.0 || ^18.0.0
+  checksum: c5eb1f42b464fb093bca59aaae0f1b2060373a2aaff95275b8781493628cdbbb6acdd6014e7883782c65c361f35a30f28cc515d68a1263ddb39cbbc47110be53
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"