refactor: page constants

packages/constants/src/index.ts

@@ -25,3 +25,4 @@ export * from "./inbox";
 export * from "./profile";
 export * from "./workspace-drafts";
 export * from "./label";
+export * from "./page";

packages/constants/src/page.ts

@@ -0,0 +1,14 @@
+export enum EPageAccess {
+  PUBLIC = 0,
+  PRIVATE = 1,
+}
+
+export type TCreatePageModal = {
+  isOpen: boolean;
+  pageAccess?: EPageAccess;
+};
+
+export const DEFAULT_CREATE_PAGE_MODAL_DATA: TCreatePageModal = {
+  isOpen: false,
+  pageAccess: EPageAccess.PUBLIC,
+};

packages/constants/src/views.ts

@@ -7,8 +7,8 @@ export const VIEW_ACCESS_SPECIFIERS: {
   key: EViewAccess;
   i18n_label: string;
 }[] = [
-  { key: EViewAccess.PUBLIC, i18n_label: "project_view.access.public" },
-  { key: EViewAccess.PRIVATE, i18n_label: "project_view.access.private" },
+  { key: EViewAccess.PUBLIC, i18n_label: "common.access.public" },
+  { key: EViewAccess.PRIVATE, i18n_label: "common.access.private" },
 ];
 
 export const VIEW_SORTING_KEY_OPTIONS = [

packages/i18n/src/locales/en/translations.json

@@ -329,10 +329,6 @@
   "no_data_yet": "No Data yet",
 
   "project_view": {
-    "access": {
-      "public": "Public",
-      "private": "Private"
-    },
     "sort_by": {
       "created_at": "Created at",
       "updated_at": "Updated at",
@@ -490,6 +486,10 @@
     "cancel": "Cancel",
     "description": "Description",
     "title": "Title",
+    "access": {
+      "public": "Public",
+      "private": "Private"
+    },
     "order_by": {
       "label": "Order by",
       "manual": "Manual",

packages/i18n/src/locales/es/translations.json

@@ -328,10 +328,6 @@
   "no_data_yet": "Sin datos aún",
 
   "project_view": {
-    "access": {
-      "public": "Público",
-      "private": "Privado"
-    },
     "sort_by": {
       "created_at": "Fecha de creación",
       "updated_at": "Fecha de actualización",
@@ -492,6 +488,10 @@
     "cancel": "Cancelar",
     "description": "Descripción",
     "title": "Título",
+    "access": {
+      "public": "Público",
+      "private": "Privado"
+    },
     "order_by": {
       "label": "Ordenar por",
       "manual": "Manual",
@@ -887,7 +887,7 @@
       "days_left": "Días restantes",
       "completed": "Completado",
       "yet_to_start": "Por comenzar",
-      "in_progress": "En progreso", 
+      "in_progress": "En progreso",
       "draft": "Borrador"
     },
     "empty_state": {

packages/i18n/src/locales/fr/translations.json

@@ -330,10 +330,6 @@
   "no_data_yet": "Pas encore de données",
 
   "project_view": {
-    "access": {
-      "public": "Public",
-      "private": "Privé"
-    },
     "sort_by": {
       "created_at": "Date de création",
       "updated_at": "Date de modification",
@@ -493,6 +489,10 @@
     "cancel": "Annuler",
     "description": "Description",
     "title": "Titre",
+    "access": {
+      "public": "Public",
+      "private": "Privé"
+    },
     "order_by": {
       "label": "Trier par",
       "manual": "Manuel",

packages/i18n/src/locales/ja/translations.json

@@ -329,10 +329,6 @@
   "no_data_yet": "まだデータがありません",
 
   "project_view": {
-    "access": {
-      "public": "公開",
-      "private": "非公開"
-    },
     "sort_by": {
       "created_at": "作成日時",
       "updated_at": "更新日時",
@@ -492,6 +488,10 @@
     "cancel": "キャンセル",
     "description": "説明",
     "title": "タイトル",
+    "access": {
+      "public": "公開",
+      "private": "非公開"
+    },
     "order_by": {
       "label": "オーダー",
       "manual": "手動",

packages/i18n/src/locales/zh-CN/translations.json

@@ -359,10 +359,6 @@
   "no_data_yet": "暂无数据",
 
   "project_view": {
-    "access": {
-      "public": "公开",
-      "private": "私密"
-    },
     "sort_by": {
       "created_at": "创建时间",
       "updated_at": "更新时间",
@@ -515,6 +511,10 @@
     "cancel": "取消",
     "description": "描述",
     "title": "标题",
+    "access": {
+      "public": "公开",
+      "private": "私密"
+    },
     "order_by": {
       "label": "排序方式",
       "manual": "手动",

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -4,14 +4,14 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
+// constants
+import { EPageAccess } from "@plane/constants";
 // plane types
 import { TPage } from "@plane/types";
 // plane ui
 import { Breadcrumbs, Button, Header, setToast, TOAST_TYPE } from "@plane/ui";
 // helpers
 import { BreadcrumbLink } from "@/components/common";
-// constants
-import { EPageAccess } from "@/constants/page";
 // hooks
 import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
 // plane web

web/core/components/pages/dropdowns/actions.tsx

@@ -15,14 +15,14 @@ import {
   LockKeyholeOpen,
   Trash2,
 } from "lucide-react";
+// constants
+import { EPageAccess } from "@plane/constants";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // plane ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 // components
 import { DeletePageModal } from "@/components/pages";
-// constants
-import { EPageAccess } from "@/constants/page";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks

web/core/components/pages/list/order-by.tsx

@@ -5,8 +5,6 @@ import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "luci
 import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
-// constants
-import { PAGE_SORTING_KEY_OPTIONS } from "@/constants/page";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -16,6 +14,15 @@ type Props = {
   sortKey: TPageFiltersSortKey;
 };
 
+const PAGE_SORTING_KEY_OPTIONS: {
+  key: TPageFiltersSortKey;
+  label: string;
+}[] = [
+  { key: "name", label: "Name" },
+  { key: "created_at", label: "Date created" },
+  { key: "updated_at", label: "Date modified" },
+];
+
 export const PageOrderByDropdown: React.FC<Props> = (props) => {
   const { onChange, sortBy, sortKey } = props;
 

web/core/components/pages/modals/create-page-modal.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
-
+// constants
+import { EPageAccess } from "@plane/constants";
 // types
 import { TPage } from "@plane/types";
 // ui
@@ -8,7 +9,6 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { PageForm } from "@/components/pages";
 // constants
 import { PAGE_CREATED } from "@/constants/event-tracker";
-import { EPageAccess } from "@/constants/page";
 // hooks
 import { useProjectPages, useEventTracker } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";

web/core/components/pages/modals/page-form.tsx

@@ -2,16 +2,17 @@
 
 import { FormEvent, useState } from "react";
 // types
-import { FileText } from "lucide-react";
+import { FileText, Globe2, Lock, LucideIcon } from "lucide-react";
 // plane imports
-import { ETabIndices } from "@plane/constants";
+import { ETabIndices, EPageAccess } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { TPage } from "@plane/types";
 // ui
 import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
 import { Logo } from "@/components/common";
 // constants
 import { AccessField } from "@/components/common/access-field";
-import { EPageAccess, PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -25,14 +26,26 @@ type Props = {
   handleFormSubmit: () => Promise<void>;
 };
 
+const PAGE_ACCESS_SPECIFIERS: {
+  key: EPageAccess;
+  i18n_label: string;
+  icon: LucideIcon;
+}[] = [
+  { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: Globe2 },
+  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: Lock },
+];
+
 export const PageForm: React.FC<Props> = (props) => {
   const { formData, handleFormData, handleModalClose, handleFormSubmit } = props;
   // hooks
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
   // state
   const [isOpen, setIsOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const i18n_access_label = PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.i18n_label;
+
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_PAGE, isMobile);
 
   const handlePageFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
@@ -122,9 +135,7 @@ export const PageForm: React.FC<Props> = (props) => {
             accessSpecifiers={PAGE_ACCESS_SPECIFIERS}
             isMobile={isMobile}
           />
-          <h6 className="text-xs font-medium">
-            {PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.label}
-          </h6>
+          <h6 className="text-xs font-medium">{t(i18n_access_label || "")}</h6>
         </div>
         <div className="flex items-center justify-end gap-2">
           <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={getIndex("cancel")}>

web/core/components/pages/pages-list-main-content.tsx

@@ -1,14 +1,12 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // plane imports
-import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { DetailedEmptyState } from "@/components/empty-state";
 import { PageLoader } from "@/components/pages";
-// hooks
-import { EPageAccess } from "@/constants/page";
 import { useCommandPalette, useProjectPages, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // assets

web/core/store/base-command-palette.store.ts

@@ -1,8 +1,11 @@
 import { observable, action, makeObservable } from "mobx";
-import { EIssuesStoreType, TCreateModalStoreTypes } from "@plane/constants";
-// services
-// types / constants
-import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess, TCreatePageModal } from "@/constants/page";
+import {
+  EIssuesStoreType,
+  TCreateModalStoreTypes,
+  DEFAULT_CREATE_PAGE_MODAL_DATA,
+  EPageAccess,
+  TCreatePageModal,
+} from "@plane/constants";
 
 export interface ModalData {
   store: EIssuesStoreType;

web/core/store/pages/base-page.ts

@@ -1,9 +1,9 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
+// constants
+import { EPageAccess } from "@plane/constants";
 // types
 import { TDocumentPayload, TLogoProps, TNameDescriptionLoader, TPage } from "@plane/types";
-// constants
-import { EPageAccess } from "@/constants/page";
 // plane web store
 import { RootStore } from "@/plane-web/store/root.store";
 

web/core/store/pages/project-page.ts

@@ -1,9 +1,9 @@
 import { computed, makeObservable } from "mobx";
 import { computedFn } from "mobx-utils";
+// constants
+import { EPageAccess } from "@plane/constants";
 // types
 import { TPage } from "@plane/types";
-// constants
-import { EPageAccess } from "@/constants/page";
 import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // plane web store
 import { RootStore } from "@/plane-web/store/root.store";