Adapt html title tag by helmet for Admin Area

Author: FalkWolsky

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -2436,6 +2436,7 @@ export const de: typeof en = {
       "allApplications": "Alle Apps",
       "allModules": "Alle Module",
       "allFolders": "Alle Ordner",
+      "yourFolders" : "Deine Ordner",
       "modules": "Module",
       "module": "Modul",
       "trash": "Papierkorb",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2801,6 +2801,7 @@ export const en = {
     "allApplications": "Your Apps",
     "allModules": "Your Modules",
     "allFolders": "All Folders",
+    "yourFolders" : "Your Folders",
     "modules": "Modules",
     "module": "Module",
     "trash": "Trash",

client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx

@@ -6,6 +6,8 @@ import { fetchFolderElements } from "../../redux/reduxActions/folderActions";
 import { FolderMeta } from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
 import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
+import { Helmet } from "react-helmet";
+import { trans } from "i18n";
 
 function getBreadcrumbs(
   folder: FolderMeta,
@@ -48,5 +50,10 @@ export function FolderView() {
     dispatch(fetchFolderElements({ folderId: folderId }));
   }, [folderId]);
 
-  return <HomeLayout elements={elements[folderId]} mode={"folder"} breadcrumb={breadcrumbs} />;
+  return (
+    <>
+      <Helmet>{<title>{trans("home.yourFolders")}</title>}</Helmet>
+      <HomeLayout elements={elements[folderId]} mode={"folder"} breadcrumb={breadcrumbs} />
+    </>
+  );
 }

client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx

@@ -2,6 +2,8 @@ import { useSelector } from "react-redux";
 import { HomeLayout } from "./HomeLayout";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { folderElementsSelector } from "../../redux/selectors/folderSelector";
+import { Helmet } from "react-helmet";
+import { trans } from "i18n";
 
 export function HomeView() {
   const elements = useSelector(folderElementsSelector)[""];
@@ -11,5 +13,10 @@ export function HomeView() {
     return null;
   }
 
-  return <HomeLayout elements={elements} mode={"view"} />;
+  return (
+    <>
+      <Helmet>{<title>{trans("productName")} {trans("home.home")}</title>}</Helmet>
+      <HomeLayout elements={elements} mode={"view"} />
+    </>
+  );
 }

client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx

@@ -8,6 +8,7 @@ import { ApplicationMeta } from "@lowcoder-ee/constants/applicationConstants";
 import { GenericApiResponse } from "@lowcoder-ee/api/apiResponses";
 import { validateResponse } from "@lowcoder-ee/api/apiUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { Helmet } from "react-helmet";
 
 export function MarketplaceView() {
   const [ marketplaceApps, setMarketplaceApps ] = useState<Array<ApplicationMeta>>([]);
@@ -52,12 +53,14 @@ export function MarketplaceView() {
   }, []);
 
   return (
-    <HomeLayout
-      elements={[]}
-      localMarketplaceApps={localMarketplaceApps}
-      globalMarketplaceApps={marketplaceApps}
-      breadcrumb={[{ text: trans("home.marketplace"), path: MARKETPLACE_URL }]}
-      mode={"marketplace"}
-    />
+    <>
+      <Helmet>{<title>{trans("home.marketplace")}</title>}</Helmet>
+      <HomeLayout
+        elements={[]}
+        localMarketplaceApps={localMarketplaceApps}
+        globalMarketplaceApps={marketplaceApps}
+        breadcrumb={[{ text: trans("home.marketplace"), path: MARKETPLACE_URL }]}
+        mode={"marketplace"} />
+    </>
   );
 };

client/packages/lowcoder/src/pages/ApplicationV2/ModuleView.tsx

@@ -5,6 +5,7 @@ import { MODULE_APPLICATIONS_URL } from "../../constants/routesURL";
 import { normalAppListSelector } from "../../redux/selectors/applicationSelector";
 import { AppTypeEnum } from "../../constants/applicationConstants";
 import { trans } from "../../i18n";
+import { Helmet } from "react-helmet";
 
 export function ModuleView() {
   const user = useSelector(getUser);
@@ -15,10 +16,12 @@ export function ModuleView() {
   }
 
   return (
-    <HomeLayout
-      elements={allApplications.filter((a) => a.applicationType === AppTypeEnum.Module)}
-      mode={"module"}
-      breadcrumb={[{ text: trans("home.allModules"), path: MODULE_APPLICATIONS_URL }]}
-    />
+    <>
+      <Helmet>{<title>{trans("productName")} {trans("home.modules")}</title>}</Helmet>
+      <HomeLayout
+        elements={allApplications.filter((a) => a.applicationType === AppTypeEnum.Module)}
+        mode={"module"}
+        breadcrumb={[{ text: trans("home.allModules"), path: MODULE_APPLICATIONS_URL }]} />
+    </>
   );
 }

client/packages/lowcoder/src/pages/ApplicationV2/NewsView.tsx

@@ -1,7 +1,13 @@
+import { Helmet } from "react-helmet";
 import { NewsLayout } from "./NewsLayout";
+import { trans } from "i18n";
 
 export function NewsView() {
 
-  return <NewsLayout/>;
+  return (
+    <><Helmet>
+      {<title>{trans("productName")} {trans("home.news")}</title>}
+    </Helmet><NewsLayout /></>
+  );
 
 };

client/packages/lowcoder/src/pages/ApplicationV2/TrashView.tsx

@@ -5,6 +5,7 @@ import { TRASH_URL } from "../../constants/routesURL";
 import { useEffect } from "react";
 import { fetchApplicationRecycleList } from "../../redux/reduxActions/applicationActions";
 import { trans } from "../../i18n";
+import { Helmet } from "react-helmet";
 
 export function TrashView() {
   const dispatch = useDispatch();
@@ -15,10 +16,12 @@ export function TrashView() {
   }, [dispatch]);
 
   return (
-    <HomeLayout
+    <>
+      <Helmet>{<title>{trans("home.trash")}</title>}</Helmet>
+      <HomeLayout
       elements={recycleList}
       breadcrumb={[{ text: trans("home.trash"), path: TRASH_URL }]}
-      mode={"trash"}
-    />
+      mode={"trash"} />
+    </>
   );
 }

client/packages/lowcoder/src/pages/ApplicationV2/UserProfileView.tsx

@@ -5,6 +5,7 @@ import { trans } from "../../i18n";
 import { USER_PROFILE_URL } from "constants/routesURL";
 import { useEffect } from "react";
 import { fetchApiKeysAction } from "redux/reduxActions/userActions";
+import { Helmet } from "react-helmet";
 
 export function UserProfileView() {
 
@@ -22,6 +23,11 @@ export function UserProfileView() {
   }
 
 
-  return <UserProfileLayout breadcrumb={[{ text: trans("home.profile"), path: USER_PROFILE_URL }]}/>;
+  return (
+    <>
+      <Helmet>{<title>{trans("home.profile")}</title>}</Helmet>
+      <UserProfileLayout breadcrumb={[{ text: trans("home.profile"), path: USER_PROFILE_URL }]} />
+    </>
+  );
 
 };

client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx

@@ -13,6 +13,7 @@ import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
 import { getDatasourceTutorial } from "@lowcoder-ee/util/tutorialUtils";
 import { getDataSourceFormManifest } from "./getDataSourceFormManifest";
 import DataSourceIcon from "components/DataSourceIcon";
+import { Helmet } from "react-helmet";
 
 const Wrapper = styled.div`
   display: flex;
@@ -190,7 +191,7 @@ export const DatasourceEditPage = () => {
   const DatasourceForm = formManifest?.form;
 
   return (
-    <Wrapper>
+    <><Helmet>{<title>{trans("home.datasource")} | {finalDataSourceType}</title>}</Helmet><Wrapper>
       <ContentWrapper>
         <Header>
           <BackBtn onClick={() => history.push(DATASOURCE_URL)}>
@@ -223,8 +224,7 @@ export const DatasourceEditPage = () => {
                 onFormReadyStatusChange={handleFormReadyStatusChange}
                 dataSourceTypeInfo={dataSourceTypeInfo}
                 datasource={datasourceInfo?.datasource!}
-                size={"middle"}
-              />
+                size={"middle"} />
             )}
 
             {formManifest && (
@@ -233,14 +233,12 @@ export const DatasourceEditPage = () => {
                   <TacoButton
                     buttonType="link"
                     loading={testLoading}
-                    onClick={() =>
-                      resolveTest(
-                        genRequest({
-                          datasourceId: datasourceId,
-                          datasourceType: datasourceType ?? datasourceInfo?.datasource.type,
-                        })
-                      )
-                    }
+                    onClick={() => resolveTest(
+                      genRequest({
+                        datasourceId: datasourceId,
+                        datasourceType: datasourceType ?? datasourceInfo?.datasource.type,
+                      })
+                    )}
                   >
                     {trans("query.testConnection")}
                   </TacoButton>
@@ -250,16 +248,14 @@ export const DatasourceEditPage = () => {
                   buttonType="primary"
                   loading={createLoading}
                   disabled={!isReady}
-                  onClick={() =>
-                    resolveCreate({
+                  onClick={() => resolveCreate({
+                    datasourceId: datasourceId,
+                    request: genRequest({
                       datasourceId: datasourceId,
-                      request: genRequest({
-                        datasourceId: datasourceId,
-                        datasourceType: datasourceType ?? datasourceInfo?.datasource.type,
-                      }),
-                      afterCreate: () => history.push(DATASOURCE_URL),
-                    })
-                  }
+                      datasourceType: datasourceType ?? datasourceInfo?.datasource.type,
+                    }),
+                    afterCreate: () => history.push(DATASOURCE_URL),
+                  })}
                 >
                   {!createLoading && trans("query.save")}
                 </TacoButton>
@@ -290,6 +286,6 @@ export const DatasourceEditPage = () => {
           )}
         </Body>
       </ContentWrapper>
-    </Wrapper>
+    </Wrapper></>
   );
 };