update app editor to view marketplace app

Author: raheeliftikhar5

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

@@ -238,11 +238,12 @@ export interface HomeRes {
   isEditable?: boolean;
   isManageable: boolean;
   isDeletable: boolean;
+  isMarketplace?: boolean;
 }
 
 export type HomeBreadcrumbType = { text: string; path: string };
 
-export type HomeLayoutMode = "view" | "trash" | "module" | "folder" | "folders";
+export type HomeLayoutMode = "view" | "trash" | "module" | "folder" | "folders" | "marketplace";
 
 export interface HomeLayoutProps {
   breadcrumb?: HomeBreadcrumbType[];
@@ -306,11 +307,12 @@ export function HomeLayout(props: HomeLayoutProps) {
             id: e.applicationId,
             name: e.name,
             type: HomeResTypeEnum[HomeResTypeEnum[e.applicationType] as HomeResKey],
-            creator: e.createBy,
+            creator: e?.creatorEmail ?? e.createBy,
             lastModifyTime: e.lastModifyTime,
-            isEditable: canEditApp(user, e),
-            isManageable: canManageApp(user, e),
-            isDeletable: canEditApp(user, e),
+            isEditable: mode !== 'marketplace' && canEditApp(user, e),
+            isManageable: mode !== 'marketplace' && canManageApp(user, e),
+            isDeletable: mode !== 'marketplace' && canEditApp(user, e),
+            isMarketplace: mode === 'marketplace',
           }
     );
 
@@ -387,7 +389,7 @@ export function HomeLayout(props: HomeLayoutProps) {
             onChange={(e) => setSearchValue(e.target.value)}
             style={{ width: "192px", height: "32px", margin: "0" }}
           />
-          {mode !== "trash" && user.orgDev && (
+          {mode !== "trash" && mode !== "marketplace" && user.orgDev && (
             <CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} />
           )}
         </OperationRightWrapper>
@@ -421,11 +423,13 @@ export function HomeLayout(props: HomeLayoutProps) {
                 <div style={{ marginBottom: "16px" }}>
                   {mode === "trash"
                     ? trans("home.trashEmpty")
+                    : mode === "marketplace"
+                    ? "No apps in marketplace yet"
                     : user.orgDev
                     ? trans("home.projectEmptyCanAdd")
                     : trans("home.projectEmpty")}
                 </div>
-                {mode !== "trash" && user.orgDev && <CreateDropdown mode={mode} />}
+                {mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} />}
               </EmptyView>
             )}
           </>

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

@@ -11,6 +11,7 @@ import {
   handleAppEditClick,
   handleAppViewClick,
   handleFolderViewClick,
+  handleMarketplaceAppViewClick,
   HomeResInfo,
 } from "../../util/homeResUtils";
 import { HomeResOptions } from "./HomeResOptions";
@@ -167,6 +168,7 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
         )}
         <CardInfo
           onClick={(e) => {
+            console.log(res.isMarketplace);
             if (appNameEditing) {
               return;
             }
@@ -177,6 +179,10 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
                 history.push(APPLICATION_VIEW_URL(res.id, "view"));
                 return;
               }
+              if(res.isMarketplace) {
+                handleMarketplaceAppViewClick(res.id);
+                return;
+              }
               res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
             }
           }}
@@ -211,6 +217,8 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
             onClick={() =>
               res.type === HomeResTypeEnum.Folder
                 ? handleFolderViewClick(res.id)
+                : res.isMarketplace
+                ? handleMarketplaceAppViewClick(res.id)
                 : handleAppViewClick(res.id)
             }
           >

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

@@ -7,6 +7,7 @@ import {
   handleAppEditClick,
   handleAppViewClick,
   handleFolderViewClick,
+  handleMarketplaceAppViewClick,
   HomeResInfo,
 } from "../../util/homeResUtils";
 import { HomeResTypeEnum } from "../../types/homeRes";
@@ -75,6 +76,8 @@ export const HomeTableView = (props: { resources: HomeRes[] }) => {
             }
             if (item.type === HomeResTypeEnum.Folder) {
               handleFolderViewClick(item.id);
+            } else if(item.isMarketplace) {
+              handleMarketplaceAppViewClick(item.id);
             } else {
               item.isEditable ? handleAppEditClick(e, item.id) : handleAppViewClick(item.id);
             }
@@ -209,6 +212,8 @@ export const HomeTableView = (props: { resources: HomeRes[] }) => {
                       e.stopPropagation();
                       return item.type === HomeResTypeEnum.Folder
                         ? handleFolderViewClick(item.id)
+                        : item.isMarketplace
+                        ? handleMarketplaceAppViewClick(item.id)
                         : handleAppViewClick(item.id);
                     }}
                     style={{ marginRight: "52px" }}

client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx

@@ -11,7 +11,7 @@ import {
 } from "lowcoder-design";
 import { trans, transToNode } from "i18n";
 import { exportApplicationAsJSONFile } from "pages/ApplicationV2/components/AppImport";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { currentApplication } from "redux/selectors/applicationSelector";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
@@ -23,6 +23,8 @@ import { recycleApplication } from "redux/reduxActions/applicationActions";
 import { CopyModal } from "./copyModal";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { messageInstance } from "lowcoder-design";
+import { getUser } from "redux/selectors/usersSelectors";
+import { canEditApp } from "util/permissionUtils";
 
 const PackUpIconStyled = styled(PackUpIcon)`
   transform: rotate(180deg);
@@ -68,6 +70,7 @@ export const TypeName = {
 };
 
 export function HeaderStartDropdown(props: { setEdit: () => void }) {
+  const user = useSelector(getUser);
   const showAppSnapshot = useSelector(showAppSnapshotSelector);
   const applicationId = useApplicationId();
   const application = useSelector(currentApplication);
@@ -76,6 +79,37 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
   const { appType } = useContext(ExternalEditorContext);
   const isModule = appType === AppTypeEnum.Module;
 
+  const isEditable = canEditApp(user, application);
+
+  const menuItems = useMemo(() => ([
+    {
+      key: "edit",
+      label: <CommonTextLabel>{trans("header.editName")}</CommonTextLabel>,
+      visible: isEditable,
+    },
+    {
+      key: "export",
+      label: <CommonTextLabel>{trans("header.export")}</CommonTextLabel>,
+      visible: true,
+    },
+    {
+      key: "duplicate",
+      label: (
+        <CommonTextLabel>
+          {trans("header.duplicate", {
+            type: TypeName[application?.applicationType!]?.toLowerCase(),
+          })}
+        </CommonTextLabel>
+      ),
+      visible: true,
+    },
+    {
+      key: "delete",
+      label: <CommonTextLabelDelete>{trans("home.moveToTrash")}</CommonTextLabelDelete>,
+      visible: isEditable,
+    },
+  ]), [isEditable]);
+
   return (
     <>
       <DropdownStyled
@@ -115,30 +149,7 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
                 });
               }
             }}
-            items={[
-              {
-                key: "edit",
-                label: <CommonTextLabel>{trans("header.editName")}</CommonTextLabel>,
-              },
-              {
-                key: "export",
-                label: <CommonTextLabel>{trans("header.export")}</CommonTextLabel>,
-              },
-              {
-                key: "duplicate",
-                label: (
-                  <CommonTextLabel>
-                    {trans("header.duplicate", {
-                      type: TypeName[application?.applicationType!]?.toLowerCase(),
-                    })}
-                  </CommonTextLabel>
-                ),
-              },
-              {
-                key: "delete",
-                label: <CommonTextLabelDelete>{trans("home.moveToTrash")}</CommonTextLabelDelete>,
-              },
-            ]}
+            items={menuItems.filter(item => item.visible)}
           />
         )}
       >

client/packages/lowcoder/src/pages/common/previewHeader.tsx

@@ -17,6 +17,9 @@ import { Logo } from "@lowcoder-ee/assets/images";
 import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog";
 import { useState } from "react";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
+import { HeaderStartDropdown } from "./headerStartDropdown";
+import { useParams } from "react-router";
+import { AppPathParams } from "constants/applicationConstants";
 
 const HeaderFont = styled.div<{ $bgColor: string }>`
   font-weight: 500;
@@ -125,21 +128,32 @@ export function HeaderProfile(props: { user: User }) {
 }
 
 export const PreviewHeader = () => {
+  const params = useParams<AppPathParams>();
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
   const applicationId = useApplicationId();
   const templateId = useSelector(getTemplateId);
   const brandingConfig = useSelector(getBrandingConfig);
   const [permissionDialogVisible, setPermissionDialogVisible] = useState(false);
+  const isViewMarketplaceMode = params.viewMode === 'view_marketplace';
 
   const headerStart = (
     <>
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
         <LogoIcon branding={true} />
       </StyledLink>
-      <HeaderFont $bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
-        {application && application.name}
-      </HeaderFont>
+      {isViewMarketplaceMode && (
+        <HeaderStartDropdown
+          setEdit={() => {
+            
+          }}
+        />
+      )}
+      {!isViewMarketplaceMode && (
+        <HeaderFont $bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
+          {application && application.name}
+        </HeaderFont>
+      )}
     </>
   );
 

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -33,7 +33,7 @@ export default function AppEditor() {
   const isUserViewMode = useUserViewMode();
   const params = useParams<AppPathParams>();
   const applicationId = params.applicationId;
-  const viewMode = params.viewMode === "view" ? "published" : "editing";
+  const viewMode = params.viewMode === "view" ? "published" : params.viewMode === "view_marketplace" ? "view_marketplace" : "editing";
   const currentUser = useSelector(getUser);
   const dispatch = useDispatch();
   const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished);

client/packages/lowcoder/src/util/homeResUtils.tsx

@@ -58,4 +58,6 @@ export const handleAppEditClick = (e: any, id: string): void => {
 
 export const handleAppViewClick = (id: string) => window.open(APPLICATION_VIEW_URL(id, "view"));
 
+export const handleMarketplaceAppViewClick = (id: string) => window.open(APPLICATION_VIEW_URL(id, "view_marketplace"));
+
 export const handleFolderViewClick = (id: string) => history.push(buildFolderUrl(id));

client/packages/lowcoder/src/util/hooks.ts

@@ -25,7 +25,7 @@ export function isUserViewMode(params?: AppPathParams) {
     return false;
   }
   const { viewMode } = params;
-  return viewMode === "preview" || viewMode === "view";
+  return viewMode === "preview" || viewMode === "view" || viewMode === "view_marketplace";
 }
 
 /**