Restructure localisation resources setup pages #4341

ref #4290 ref #4291 ref #4334 ref DEV-1381 ref DEV-1382 ref DEV-1418
authgear · Jun 17, 2024 · 3285b91 · 3285b91
2 parents 66b9bbb + 27aa812
commit 3285b91
Show file tree

Hide file tree

Showing 13 changed files with 444 additions and 197 deletions.
diff --git a/portal/src/AppRoot.tsx b/portal/src/AppRoot.tsx
@@ -91,6 +91,9 @@ const UISettingsScreen = lazy(
 const LocalizationConfigurationScreen = lazy(
   async () => import("./graphql/portal/LocalizationConfigurationScreen")
 );
+const CustomTextConfigurationScreen = lazy(
+  async () => import("./graphql/portal/CustomTextConfigurationScreen")
+);
 const LanguagesConfigurationScreen = lazy(
   async () => import("./graphql/portal/LanguagesConfigurationScreen")
 );
@@ -420,29 +423,59 @@ const AppRoot: React.VFC = function AppRoot() {
             </Route>
           </Route>
 
-          <Route path="custom-domains">
+          <Route path="branding">
             <Route
               index={true}
+              element={<Navigate to="ui-settings" replace={true} />}
+            />
+            <Route
+              path="ui-settings"
+              element={
+                <Suspense fallback={<ShowLoading />}>
+                  <UISettingsScreen />
+                </Suspense>
+              }
+            />
+            <Route
+              path="localization"
               element={
                 <Suspense fallback={<ShowLoading />}>
-                  <CustomDomainListScreen />
+                  <LocalizationConfigurationScreen />
                 </Suspense>
               }
             />
-            <Route path=":domainID">
+            <Route path="custom-domains">
               <Route
                 index={true}
-                element={<Navigate to="verify" replace={true} />}
-              />
-              <Route
-                path="verify"
                 element={
                   <Suspense fallback={<ShowLoading />}>
-                    <VerifyDomainScreen />
+                    <CustomDomainListScreen />
                   </Suspense>
                 }
               />
+              <Route path=":domainID">
+                <Route
+                  index={true}
+                  element={<Navigate to="verify" replace={true} />}
+                />
+                <Route
+                  path="verify"
+                  element={
+                    <Suspense fallback={<ShowLoading />}>
+                      <VerifyDomainScreen />
+                    </Suspense>
+                  }
+                />
+              </Route>
             </Route>
+            <Route
+              path="custom-text"
+              element={
+                <Suspense fallback={<ShowLoading />}>
+                  <CustomTextConfigurationScreen />
+                </Suspense>
+              }
+            />
           </Route>
 
           <Route path="configuration">
@@ -544,30 +577,6 @@ const AppRoot: React.VFC = function AppRoot() {
                 />
               </Route>
             </Route>
-            <Route
-              path="smtp"
-              element={
-                <Suspense fallback={<ShowLoading />}>
-                  <SMTPConfigurationScreen />
-                </Suspense>
-              }
-            />
-            <Route
-              path="ui-settings"
-              element={
-                <Suspense fallback={<ShowLoading />}>
-                  <UISettingsScreen />
-                </Suspense>
-              }
-            />
-            <Route
-              path="localization"
-              element={
-                <Suspense fallback={<ShowLoading />}>
-                  <LocalizationConfigurationScreen />
-                </Suspense>
-              }
-            />
             <Route
               path="languages"
               element={
@@ -710,6 +719,14 @@ const AppRoot: React.VFC = function AppRoot() {
                 </Suspense>
               }
             />
+            <Route
+              path="smtp"
+              element={
+                <Suspense fallback={<ShowLoading />}>
+                  <SMTPConfigurationScreen />
+                </Suspense>
+              }
+            />
           </Route>
 
           <Route path="audit-log">

diff --git a/portal/src/ScreenNav.tsx b/portal/src/ScreenNav.tsx
@@ -251,24 +251,31 @@ const ScreenNav: React.VFC<ScreenNavProps> = function ScreenNav(props) {
         url: `/project/${appID}/configuration/apps`,
       },
       {
-        type: "link" as const,
-        textKey: "CustomDomainListScreen.title",
-        url: `/project/${appID}/custom-domains`,
-      },
-      {
-        type: "link" as const,
-        textKey: "ScreenNav.smtp",
-        url: `/project/${appID}/configuration/smtp`,
-      },
-      {
-        type: "link" as const,
-        textKey: "ScreenNav.ui-settings",
-        url: `/project/${appID}/configuration/ui-settings`,
-      },
-      {
-        type: "link" as const,
-        textKey: "ScreenNav.localization",
-        url: `/project/${appID}/configuration/localization`,
+        type: "group" as const,
+        textKey: "ScreenNav.branding",
+        urlPrefix: `/project/${appID}/branding`,
+        children: [
+          {
+            type: "link" as const,
+            textKey: "ScreenNav.ui-settings",
+            url: `/project/${appID}/branding/ui-settings`,
+          },
+          {
+            type: "link" as const,
+            textKey: "ScreenNav.localization",
+            url: `/project/${appID}/branding/localization`,
+          },
+          {
+            type: "link" as const,
+            textKey: "CustomDomainListScreen.title",
+            url: `/project/${appID}/branding/custom-domains`,
+          },
+          {
+            type: "link" as const,
+            textKey: "ScreenNav.customText",
+            url: `/project/${appID}/branding/custom-text`,
+          },
+        ],
       },
       {
         type: "link" as const,
@@ -336,6 +343,11 @@ const ScreenNav: React.VFC<ScreenNavProps> = function ScreenNav(props) {
             textKey: "ScreenNav.session",
             url: `/project/${appID}/advanced/session`,
           },
+          {
+            type: "link" as const,
+            textKey: "ScreenNav.smtp",
+            url: `/project/${appID}/advanced/smtp`,
+          },
         ],
       },
       ...(auditLogEnabled

diff --git a/portal/src/graphql/portal/CustomTextConfigurationScreen.module.css b/portal/src/graphql/portal/CustomTextConfigurationScreen.module.css
@@ -0,0 +1,7 @@
+.widget {
+  @apply col-span-8 tablet:col-span-full;
+}
+
+.translationEditorWidget {
+  margin-top: 0;
+}