feat: add language selector and indicator to page creation

extensions/customPageTypes/index.tsx

@@ -1,22 +1,35 @@
 import React from "react";
 import { PageListConfig } from "webiny/admin/website-builder/page/list";
-import { RetailPageForm } from "./RetailPageForm";
+
+const { PageType } = PageListConfig;
 
 export default () => {
     return (
         <PageListConfig>
             {/*<PageListConfig.PageType name={"static"} remove={true} />*/}
 
-            <PageListConfig.PageType
+            <PageType
                 name={"retailPage"}
                 label={"Retail Page"}
-                element={<RetailPageForm />}
+                element={
+                    <>
+                        <PageType.Language />
+                        <PageType.Title />
+                        <PageType.Path />
+                    </>
+                }
             />
 
             <PageListConfig.PageType
                 name={"restaurantPage"}
                 label={"Restaurant Page"}
-                element={<RetailPageForm />}
+                element={
+                    <>
+                        <PageType.Language />
+                        <PageType.Title />
+                        <PageType.Path />
+                    </>
+                }
             />
         </PageListConfig>
     );

packages/admin-ui/src/Tag/Tag.tsx

@@ -11,7 +11,8 @@ import { TagIcon } from "./TagIcon.js";
 const tagVariants = cva(
     [
         "inline-flex items-center gap-xxs rounded-sm text-sm text-regular transition-colors overflow-hidden",
-        "focus:outline-none"
+        "focus:outline-none",
+        "h-[20px]"
     ],
     {
         variants: {

packages/app-admin/src/components/Wcp.tsx

@@ -5,6 +5,11 @@ interface ChildrenProps {
     children: React.ReactNode;
 }
 
+function CanUseMultiTenancy({ children }: ChildrenProps) {
+    const wcp = useWcp();
+    return wcp.canUseFeature("multiTenancy") ? <>{children}</> : null;
+}
+
 function CanUseTeams({ children }: ChildrenProps) {
     const wcp = useWcp();
     return wcp.canUseTeams() ? <>{children}</> : null;
@@ -31,6 +36,7 @@ function CanUseHcmsFieldPermissions({ children }: ChildrenProps) {
 }
 
 export const Wcp = {
+    CanUseMultiTenancy,
     CanUseTeams,
     CanUsePrivateFiles,
     CanUseFileManagerThreatDetection,

packages/app-website-builder/src/Extension.tsx

@@ -19,6 +19,7 @@ import { WB_PERMISSIONS_SCHEMA } from "~/constants.js";
 import { WbPermissionsFeature } from "~/features/permissions/feature.js";
 import { HasPermission } from "~/presentation/security/HasPermission.js";
 import { TranslatePageFeature } from "~/features/pages/translatePage/index.js";
+import { CreatePageConfig } from "./presentation/pages/CreatePage/CreatePageConfig.js";
 import { TranslatePageConfig } from "./presentation/pages/TranslatePage/TranslatePageConfig.js";
 
 const { Security, Menu, Route, Dashboard } = AdminConfig;
@@ -102,6 +103,7 @@ export const Extension = () => {
             </AdminConfig>
             <PagesListConfig />
             <RedirectsListConfig />
+            <CreatePageConfig />
             <TranslatePageConfig />
         </>
     );

packages/app-website-builder/src/modules/pages/PageEditor/TopBar/Title.tsx

@@ -3,6 +3,7 @@ import { Input, Text } from "@webiny/admin-ui";
 import { useDocumentEditor } from "~/DocumentEditor/index.js";
 import { useSelectFromDocument } from "~/BaseEditor/hooks/useSelectFromDocument.js";
 import { useSelectFromEditor } from "~/BaseEditor/hooks/useSelectFromEditor.js";
+import { LanguageCodeTag } from "~/presentation/components/LanguageCodeTag.js";
 
 export function Title() {
     const [localValue, setLocalValue] = useState<string | undefined>();
@@ -11,9 +12,10 @@ export function Title() {
 
     const editor = useDocumentEditor();
 
-    const { title } = useSelectFromDocument(document => {
+    const { title, language } = useSelectFromDocument(document => {
         return {
-            title: document.properties.title ?? "Untitled"
+            title: document.properties.title ?? "Untitled",
+            language: document.properties.language ?? undefined
         };
     });
 
@@ -41,7 +43,8 @@ export function Title() {
     }
 
     return (
-        <div className={"flex flex-col min-w-0"}>
+        <div className={"flex flex-row min-w-0"}>
+            <LanguageCodeTag code={language} />
             {!isEditing ? (
                 <Text
                     onClick={() => setIsEditing(true)}
@@ -57,6 +60,7 @@ export function Title() {
                     autoSelect
                     size={"md"}
                     variant={"secondary"}
+                    className={"mx-sm"}
                     value={localValue ?? title}
                     onChange={setLocalValue}
                     onBlur={e => commitValue(e.currentTarget.value)}

packages/app-website-builder/src/modules/pages/PagesList/components/Main/Main.tsx

@@ -7,17 +7,21 @@ import { Header } from "~/modules/pages/PagesList/components/Header/index.js";
 import { BottomInfoBar } from "~/modules/pages/PagesList/components/BottomInfoBar/index.js";
 import { Table } from "~/modules/pages/PagesList/components/Table/index.js";
 import { Empty } from "~/modules/pages/PagesList/components/Empty/index.js";
-import { useCreatePageDialog } from "./CreatePage/CreatePage.js";
 import { useLoadMorePages } from "~/features/pages/index.js";
 import { BulkActions } from "../BulkActions/index.js";
 import { Filters } from "~/modules/pages/PagesList/components/Filters/index.js";
+import { useCreatePageDialog } from "~/presentation/pages/CreatePage/CreatePageDialog.js";
 
 const Main = () => {
     const { vm } = useDocumentList();
     const { loadMorePages } = useLoadMorePages();
     const { showDialog: showCreateFolderDialog } = useCreateDialog();
+    const openCreatePageDialog = useCreatePageDialog();
+
+    const showCreatePageDialog = useCallback(() => {
+        openCreatePageDialog(vm.folderId);
+    }, [openCreatePageDialog, vm.folderId]);
 
-    const { showCreatePageDialog } = useCreatePageDialog(vm.folderId);
     const { getFolderLevelPermission: canManageContent } =
         useGetFolderLevelPermission("canManageContent");
 

packages/app-website-builder/src/modules/pages/PagesList/components/Table/Cells/CellName.tsx

@@ -5,6 +5,7 @@ import { PageListConfig } from "~/modules/pages/configs/index.js";
 import { useEditPageUrl } from "~/modules/pages/PagesList/hooks/useEditPageUrl.js";
 import { FolderCellName } from "~/modules/shared/FolderCellName.js";
 import type { PageDto } from "~/domain/Page/index.js";
+import { LanguageCodeTag } from "~/presentation/components/LanguageCodeTag.js";
 
 interface PageCellRowTitleProps {
     page: PageDto;
@@ -21,6 +22,7 @@ const PageCellRowTitle = ({ page }: PageCellRowTitleProps) => {
                     icon={<File />}
                     label={`Page - ${page.properties.title}`}
                 />
+                <LanguageCodeTag code={page.properties.language} className={"mr-1"} />
                 <Text as={"div"} className={"truncate min-w-0 shrink"}>
                     {page.properties.title}
                 </Text>