add all pages

Signed-off-by: Sidharth Mohanty <[email protected]>

system-apps/app-store/pluginDefinition.json

@@ -3,7 +3,6 @@
     "apiVersion": "1.0.0",
     "pluginVersion": "1.0.0",
     "pluginType": "application",
-    "isSystemPlugin":true,
     "webContent": {
       "framework": "react",
       "launchDefinition": {

system-apps/app-store/webClient/src/components/AppStore/LeftPanel/NavigationButtons.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 const options = [
   {
@@ -35,6 +35,7 @@ const options = [
 ];
 
 const NavigationButtons = () => {
+  const location = useLocation();
   return (
     <div
       style={{
@@ -43,7 +44,13 @@ const NavigationButtons = () => {
       }}
     >
       {options.map((opt) => (
-        <Link key={opt.id} to={opt.href} className={"optionButton"}>
+        <Link
+          key={opt.id}
+          to={opt.href}
+          className={`optionButton ${
+            location.pathname === opt.href && "active"
+          }`}
+        >
           {opt.name}
         </Link>
       ))}

system-apps/app-store/webClient/src/components/AppStore/RightPanel/RightPanel.tsx

@@ -10,6 +10,7 @@ const RightPanel: React.FC = ({
             overflowY: "scroll",
             paddingBottom: "40px",
             minHeight: "100vh",
+            borderLeft: "1px solid #333",
         }}>
             {children}
         </div>

system-apps/app-store/webClient/src/components/UI/AppCard.tsx

@@ -1,36 +1,52 @@
-import React from 'react';
-import { trunc } from '../../utils';
-import { ASSETS_URL } from '../../constants';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { trunc } from "../../utils";
+import { ASSETS_URL } from "../../constants";
+import { Link } from "react-router-dom";
 
 type AppProps = {
-    name: string;
-    icon: string;
-    description: string;
-    publisher: string;
-    id: string;
+  name: string;
+  icon: string;
+  description: string;
+  publisher: string;
+  id: string;
+  installed: boolean;
 };
 
-const App: React.FC<AppProps> = ({ name, icon, description, publisher, id }) => {
-    return (
-        <Link to={`/app/${id}`} className={'appContainer'}>
-            <img className={'appIcon'} src={icon} alt={name} />
-            <div className={'appInfoContainer'}>
-                <div className={'appNameContainer'}>
-                    <span className={'appPublisher'}>
-                        {publisher}
-                    </span>
-                    <span className={'appName'}>{name}</span></div>
-                <span className={'appDescription'}>{trunc(description, 36)}</span>
-                <button className={'installButton'}>
-                    <img src={ASSETS_URL + '/download.svg'} width={12} height={12} style={{
-                        marginRight: '4px',
-                    }} />
-                    Install
-                </button>
-            </div>
-        </Link>
-    );
+const App: React.FC<AppProps> = ({
+  name,
+  icon,
+  description,
+  publisher,
+  id,
+  installed,
+}) => {
+  return (
+    <Link to={`/app/${id}`} className={"appContainer"}>
+      <img className={"appIcon"} src={icon} alt={name} />
+      <div className={"appInfoContainer"}>
+        <div className={"appNameContainer"}>
+          <span className={"appPublisher"}>{publisher}</span>
+          <span className={"appName"}>{name}</span>
+        </div>
+        <span className={"appDescription"}>{trunc(description, 36)}</span>
+        <button className={"installButton"} disabled={installed}>
+          <img
+            src={
+              installed
+                ? ASSETS_URL + "/installed.svg"
+                : ASSETS_URL + "/download.svg"
+            }
+            width={14}
+            height={14}
+            style={{
+              marginRight: "4px",
+            }}
+          />
+          {installed ? "Installed" : "Install"}
+        </button>
+      </div>
+    </Link>
+  );
 };
 
 export default App;

system-apps/app-store/webClient/src/components/UI/AppCarouselList.tsx

@@ -49,12 +49,13 @@ const AppCarouselList: React.FC<AppCarouselList> = ({ apps }) => {
       <Slider {...settings}>
         {apps.map((app) => (
           <AppCard
-            key={app.id}
-            id={app.id}
-            name={app.name}
-            description={app.description}
-            icon={app.icon}
-            publisher={app.publisher}
+            key={app.identifier}
+            id={app.identifier}
+            name={app.webContent.launchDefinition.pluginShortNameDefault}
+            description={app.webContent.descriptionDefault}
+            icon={app.webContent.launchDefinition.imageSrc}
+            publisher={app?.author || 'Zowe'}
+            installed={app.installed}
           />
         ))}
       </Slider>

system-apps/app-store/webClient/src/context/apps.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+type AppsContextType = {
+  apps: any[];
+};
+
+const AppsContext = createContext<AppsContextType | null>(null);
+
+export const useAppsCtx = () => useContext(AppsContext);
+
+const AppsProvider: React.FC = ({ children }) => {
+  const [apps, setApps] = useState([]);
+  const [installedApps, setInstalledApps] = useState([]);
+
+  // fetch default apps
+  useEffect(() => {
+    const fetchApps = async () => {
+      // TODO: using mock server, need to use nodeserver
+      const allAppsResponse = await fetch(
+        "http://localhost:8000/appstore/api/apps"
+      );
+      const data = await allAppsResponse.json();
+      const installedAppsResponse = await fetch("/plugins?type=all");
+      const { pluginDefinitions } = await installedAppsResponse.json();
+      const serializedApps = data.map((app) => {
+        const installedApp = pluginDefinitions.find(
+          (installedApp) => installedApp.identifier === app.identifier
+        );
+        if (installedApp) {
+          return {
+            ...app,
+            installed: true,
+          };
+        }
+        return {
+          ...app,
+          installed: false,
+        };
+      });
+      setInstalledApps(serializedApps.filter((app) => app.installed));
+      setApps(serializedApps);
+    };
+    fetchApps();
+  }, []);
+
+  return (
+    <AppsContext.Provider
+      value={{
+        apps,
+        installedApps,
+      }}
+    >
+      {children}
+    </AppsContext.Provider>
+  );
+};
+
+export default AppsProvider;

system-apps/app-store/webClient/src/index.tsx

@@ -5,6 +5,7 @@ import { MVDResources } from "./context/mvd-resources";
 import WindowSizeProvider from "./context/window-size";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes";
+import AppsProvider from "./context/apps";
 
 export function renderPlugin(
   domElement: HTMLElement,
@@ -13,7 +14,9 @@ export function renderPlugin(
   ReactDOM.render(
     <MVDResources.Provider value={resources}>
       <WindowSizeProvider mvdResources={resources}>
-        <RouterProvider router={router} />
+        <AppsProvider>
+          <RouterProvider router={router} />
+        </AppsProvider>
       </WindowSizeProvider>
     </MVDResources.Provider>,
     domElement