Merge pull request #712 from lowcoder-org/dev

Display Fix for Marketplaces

Author: FalkWolsky

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

@@ -34,7 +34,7 @@ import { isFetchingFolderElements } from "../../redux/selectors/folderSelector";
 import { checkIsMobile } from "util/commonUtils";
 import MarketplaceHeaderImage from "assets/images/marketplaceHeaderImage.jpg";
 import { Divider } from "antd";
-import { Margin } from "../setting/theme/styledComponents";
+import { Margin } from "../setting/theme/styledComponents"; 
 
 const Wrapper = styled.div`
   display: flex;
@@ -239,6 +239,7 @@ const LayoutSwitcher = styled.div`
   }
 `;
 
+
 function showNewUserGuide(user: User) {
   return (
     user.orgDev &&
@@ -278,7 +279,7 @@ export function HomeLayout(props: HomeLayoutProps) {
   const { breadcrumb = [], elements = [], localMarketplaceApps = [], globalMarketplaceApps = [],mode } = props;
   const user = useSelector(getUser);
   const isFetching = useSelector(isFetchingFolderElements);
-
+  const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
   const [filterBy, setFilterBy] = useState<HomeResKey>("All");
   const [searchValue, setSearchValue] = useState("");
   const [layout, setLayout] = useState<HomeLayoutType>(
@@ -294,14 +295,16 @@ export function HomeLayout(props: HomeLayoutProps) {
   }
 
   var displayElements = elements;
-  if (mode === "marketplace") {
+  if (mode === "marketplace" && isSelfHost) {
     const markedLocalApps = localMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: true }));
     const markedGlobalApps = globalMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: false }));
     // Merge local and global apps into the elements array
     displayElements = [...markedLocalApps, ...markedGlobalApps];
   }
-
-  console.log("HomeLayout: displayElements", displayElements);
+  else if (mode === "marketplace") {
+    const markedLocalApps = localMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: true }));
+    displayElements = [...markedLocalApps];
+  }
 
   const resList: HomeRes[] = displayElements
     .filter((e) =>
@@ -454,19 +457,37 @@ export function HomeLayout(props: HomeLayoutProps) {
                       <>
                         {layout === "list" ? (
                           <>
-                            <h2 style={{padding: "0 36px"}}>{trans("home.localMarketplaceTitle")}</h2>
-                            <HomeTableView resources={resList.filter(app => app.isLocalMarketplace)} />
-                            <Divider style={{padding: "0 36px", margin: "0 36px", width: "calc(100% - 72px) !important"}}/>
-                            <h2 style={{padding: "0 36px"}}>{trans("home.globalMarketplaceTitle")}</h2>
-                            <HomeTableView resources={resList.filter(app => !app.isLocalMarketplace)} />
+                            {isSelfHost ? (
+                              <>
+                                <h2 style={{ padding: "0 36px" }}>{trans("home.localMarketplaceTitle")}</h2>
+                                <HomeTableView resources={resList.filter(app => app.isLocalMarketplace)} />
+                                <Divider style={{ padding: "0 36px", margin: "0 36px", width: "calc(100% - 72px) !important" }} />
+                                <h2 style={{ padding: "0 36px" }}>{trans("home.globalMarketplaceTitle")}</h2>
+                                <HomeTableView resources={resList.filter(app => !app.isLocalMarketplace)} />
+                              </>
+                            ) : (
+                              <>
+                                <h2 style={{padding: "0 36px"}}>{trans("home.globalMarketplaceTitle")}</h2>
+                                <HomeTableView resources={resList.filter(app => app.isLocalMarketplace)} />
+                              </> 
+                            )}
                           </>
                         ) : (
-                          <>
-                            <h2 style={{padding: "0 36px"}}>{trans("home.localMarketplaceTitle")}</h2>
-                            <HomeCardView resources={resList.filter(app => app.isLocalMarketplace)} />
-                            <Divider style={{padding: "0 36px", margin: "12px 36px", width: "calc(100% - 72px) !important"}}/>
-                            <h2 style={{padding: "0 36px"}}>{trans("home.globalMarketplaceTitle")}</h2>
-                            <HomeCardView resources={resList.filter(app => !app.isLocalMarketplace)} />
+                            <>
+                            {isSelfHost ? (
+                              <>
+                                <h2 style={{padding: "0 36px"}}>{trans("home.localMarketplaceTitle")}</h2>
+                                <HomeCardView resources={resList.filter(app => app.isLocalMarketplace)} />
+                                <Divider style={{padding: "0 36px", margin: "12px 36px", width: "calc(100% - 72px) !important"}}/>
+                                <h2 style={{padding: "0 36px"}}>{trans("home.globalMarketplaceTitle")}</h2>
+                                <HomeCardView resources={resList.filter(app => !app.isLocalMarketplace)} />
+                              </>
+                            ) : (
+                              <>
+                                <h2 style={{padding: "0 36px"}}>{trans("home.globalMarketplaceTitle")}</h2>
+                                <HomeCardView resources={resList.filter(app => app.isLocalMarketplace)} />
+                              </>
+                            )}
                           </>
                         )}
                       </>