Appstore improvements for non-cloud dashboard (#3258)

* Add empty screen message if no apps are installed

* Add .env.template with Appstore and Demo set by default

* Change how section is resolved

* Add message that Saleor apps can be installed only in Cloud

* Add apps.saleor.io url be default Appstore url in Dockerfile

* Show cloud only message for apps with manifest

* Extract messages

* Fix test

* Change message to tooltip

* Update readme

.env.template

@@ -0,0 +1,3 @@
+API_URI=https://demo.saleor.io/graphql/
+APP_MOUNT_URI=/
+APPS_MARKETPLACE_API_URI=https://apps.saleor.io/api/v2/saleor-apps

.gitignore

@@ -48,3 +48,5 @@ cypress/reports
 
 # Exported results file
 django-queries-results.html
+
+!.env.template

Dockerfile

@@ -28,7 +28,7 @@ ARG SKIP_SOURCEMAPS
 
 ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
 ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
-ENV APPS_MARKETPLACE_API_URI ${APPS_MARKETPLACE_API_URI}
+ENV APPS_MARKETPLACE_API_URI ${APPS_MARKETPLACE_API_URI:-https://apps.saleor.io/api/v2/saleor-apps}
 ENV APPS_TUNNEL_URL_KEYWORDS ${APPS_TUNNEL_URL_KEYWORDS}
 ENV SALEOR_APPS_ENDPOINT=${SALEOR_APPS_ENDPOINT}
 ENV STATIC_URL ${STATIC_URL:-/dashboard/}

docs/configuration.md

@@ -1,6 +1,12 @@
 # Configuration
 
-Create `.env` file in a root directory or set environment variables with the following values:
+## Quick start
+
+Run `cp .env.template .env` to create default configuration that will be connected to [Saleor Demo shop](https://demo.saleor.io/dashboard/)
+
+## All environment variables
+
+Create or edit `.env` file in a root directory or set environment variables with the following values:
 
 - `API_URI` (required) - URI of Saleor GraphQL API instance.
   If you are running Saleor locally with the default settings, set `API_URI` to: "http://localhost:8000/graphql/".
@@ -12,12 +18,6 @@ Create `.env` file in a root directory or set environment variables with the fol
 - `STATIC_URL` - URL where the static files are located.
   E.g., if you use an S3 bucket, you should set it to the bucket's URL. By default, Saleor assumes you serve static files from the root of your site at "http://localhost:9000/".
 
-- `SALEOR_APPS_PAGE_PATH` - Path appended to `MARKETPLACE_URL` to render Saleor Apps page (deprecated).
-
-- `SALEOR_APPS_JSON_PATH` - Path appended to `MARKETPLACE_URL` to fetch a list of Saleor Apps as JSON (deprecated in favor of `APPS_MARKETPLACE_API_URI`).
-
-- `APP_TEMPLATE_GALLERY_PATH` - Path appended to `MARKETPLACE_URL` to render App Template Gallery page (deprecated).
-
 - `APPS_MARKETPLACE_API_URI` - URI of Marketplace API to fetch list of Apps in JSON.
 
 - `APPS_TUNNEL_URL_KEYWORDS` - Custom apps tunnel URL keywords.

locale/defaultMessages.json

@@ -1455,6 +1455,10 @@
     "context": "collection",
     "string": "Hidden"
   },
+  "9g6Y7a": {
+    "context": "placeholder",
+    "string": "Nothing installed yet."
+  },
   "9gb9b4": {
     "context": "address type",
     "string": "Add new address"
@@ -2624,6 +2628,10 @@
     "context": "switch button",
     "string": "Is this product shippable?"
   },
+  "IEpmGQ": {
+    "context": "description",
+    "string": "Use Saleor Cloud to access Saleor Apps"
+  },
   "IFWHn0": {
     "context": "error message",
     "string": "Billing address is not set"

src/config.ts

@@ -7,7 +7,8 @@ export const getAppMountUri = () =>
   window.__SALEOR_CONFIG__.APP_MOUNT_URI || getAppDefaultUri();
 export const getApiUrl = () => window.__SALEOR_CONFIG__.API_URL;
 export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL, 10) || 300;
-export const IS_CLOUD_INSTANCE = process.env.IS_CLOUD_INSTANCE === "true";
+export const IS_CLOUD_INSTANCE =
+  window.__SALEOR_CONFIG__.IS_CLOUD_INSTANCE === "true";
 /**
  * @deprecated
  */

src/new-apps/components/AppListCard/AppListCard.test.tsx

@@ -22,6 +22,16 @@ jest.mock("@dashboard/new-apps/context", () => ({
   })),
 }));
 
+jest.mock("@dashboard/config", () => {
+  const original = jest.requireActual("@dashboard/config");
+
+  return {
+    __esModule: true,
+    ...original,
+    IS_CLOUD_INSTANCE: true,
+  };
+});
+
 describe("Apps AppListCard", () => {
   it("displays released app details when released app data passed", () => {
     // Arrange

src/new-apps/components/AppListCard/AppListCardActions.tsx

@@ -1,9 +1,11 @@
+import { IS_CLOUD_INSTANCE } from "@dashboard/config";
 import { AppInstallationFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { appInstallationStatusMessages } from "@dashboard/new-apps/messages";
+import { Tooltip } from "@material-ui/core";
 import { Box, Button, Text } from "@saleor/macaw-ui/next";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import InstallErrorAction from "./ErrorInstallAction";
 import { messages } from "./messages";
@@ -27,6 +29,8 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
   retryInstallHandler,
   removeInstallHandler,
 }) => {
+  const intl = useIntl();
+
   if (
     !installHandler &&
     !githubForkHandler &&
@@ -49,7 +53,7 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
           <FormattedMessage {...messages.forkOnGithub} />
         </Button>
       )}
-      {installHandler && (
+      {installHandler && IS_CLOUD_INSTANCE && (
         <Button
           variant="primary"
           onClick={installHandler}
@@ -58,6 +62,23 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
           <FormattedMessage {...buttonMessages.install} />
         </Button>
       )}
+      {installHandler && !IS_CLOUD_INSTANCE && (
+        <Tooltip
+          placement="top"
+          title={intl.formatMessage(messages.installationCloudOnly)}
+        >
+          <div>
+            <Button
+              variant="primary"
+              onClick={installHandler}
+              data-test-id="app-install-button"
+              disabled
+            >
+              <FormattedMessage {...buttonMessages.install} />
+            </Button>
+          </div>
+        </Tooltip>
+      )}
       {installationPending && (
         <Text
           color="textNeutralSubdued"

src/new-apps/components/AppListCard/messages.ts

@@ -16,4 +16,9 @@ export const messages = defineMessages({
     defaultMessage: "Coming soon ({releaseDate})",
     description: "information",
   },
+  installationCloudOnly: {
+    defaultMessage: "Use Saleor Cloud to access Saleor Apps",
+    description: "description",
+    id: "IEpmGQ",
+  },
 });

src/new-apps/components/AppListPage/AppListPage.tsx

@@ -57,6 +57,9 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
   });
   const navigate = useNavigator();
 
+  const nothingInstalled =
+    appsInstallations?.length === 0 && installedApps?.length === 0;
+
   const navigateToAppInstallPage = useCallback(
     (manifestUrl: string) => {
       navigate(AppUrls.resolveAppInstallUrl(manifestUrl));
@@ -80,6 +83,18 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
         marginY={8}
       >
         <Box className={classes.appContent} marginY={8}>
+          {nothingInstalled && (
+            <Box paddingY={6}>
+              <Text as="h3" variant="heading" color="textNeutralSubdued">
+                {intl.formatMessage(messages.installedApps)}
+              </Text>
+              <Box marginTop={6}>
+                <Text variant="caption">
+                  {intl.formatMessage(messages.nothingInstalledPlaceholder)}
+                </Text>
+              </Box>
+            </Box>
+          )}
           {sectionsAvailability.installed && (
             <>
               <Box paddingX={8} paddingY={6}>

src/new-apps/components/AppListPage/messages.ts

@@ -27,4 +27,9 @@ export const messages = defineMessages({
     defaultMessage: "Coming Soon",
     description: "section header",
   },
+  nothingInstalledPlaceholder: {
+    defaultMessage: "Nothing installed yet.",
+    description: "placeholder",
+    id: "9g6Y7a",
+  },
 });

types.d.ts

@@ -20,5 +20,6 @@ declare interface Window {
     APP_TEMPLATE_GALLERY_PATH: string;
     APPS_MARKETPLACE_API_URI?: string;
     APPS_TUNNEL_URL_KEYWORDS?: string;
+    IS_CLOUD_INSTANCE?: string;
   };
 }

vite.config.js

@@ -66,6 +66,7 @@ export default defineConfig(({ command, mode }) => {
           MARKETPLACE_URL,
           APPS_MARKETPLACE_API_URI,
           APPS_TUNNEL_URL_KEYWORDS,
+          IS_CLOUD_INSTANCE,
         },
       },
     }),