Extensions feature flag preview

.changeset/cyan-spoons-clap.md

@@ -0,0 +1,11 @@
+---
+"saleor-dashboard": patch
+---
+
+Replace an Apps section with a new Extensions section visible under a feature flag
+New Extensions section is split into two pages:
+1. Main Extensions page which presents a list of all installed apps
+2. Explore page which presents a list of available apps to install
+
+Currently, Extensions show only apps but in the future Extensions section will gather also plugins and webhooks (custom apps).
+

.env.template

@@ -1,7 +1,7 @@
 API_URL=http://localhost:8000/
 APP_MOUNT_URI=/
 APPS_MARKETPLACE_API_URL=https://apps.saleor.io/api/v2/saleor-apps
-EXTENSIONS_API_URL=https://apps.staging.saleor.io/api/v1/extensions
+EXTENSIONS_API_URL=https://apps.saleor.io/api/v1/extensions
 LOCALE_CODE="EN"
 DEMO_MODE=false
 

.featureFlags/extensions.md

@@ -1,7 +1,12 @@
 ---
 name: extensions
-displayName: Extensions
+displayName: New Explore view
 enabled: false
 payload: "default"
-visible: false
----
+visible: true
+---
+
+![Extensions](./images/extensions.png)
+
+Experience the new interface for browsing and installing extensions in the ‘Explore’ view
+

.featureFlags/generated.tsx

@@ -1,19 +1,22 @@
 // @ts-nocheck
 
-import Q50417 from "./images/app-alerts.jpg"
-import U69221 from "./images/discounts-list.png"
-import Z66097 from "./images/improved_refunds.png"
+import W36049 from "./images/app-alerts.jpg"
+import C58845 from "./images/discounts-list.png"
+import H95814 from "./images/extensions.png"
+import A56493 from "./images/improved_refunds.png"
 
-const app_alerts = () => (<><p><img src={Q50417} alt="new filters"/>
+const app_alerts = () => (<><p><img src={W36049} alt="new filters"/>
 Benefit from new notifications in your Dashboard that alert you to issues with webhooks for your apps, helping you stay informed about potential problems.
 We’re continuously working to expand this feature to provide more insights for your apps.</p>
 </>)
-const discounts_rules = () => (<><p><img src={U69221} alt="Discount rules"/></p>
+const discounts_rules = () => (<><p><img src={C58845} alt="Discount rules"/></p>
 <p>Apply the new discounts rules to narrow your promotions audience.
 Set up conditions and channels that must be fulfilled to apply defined reward.</p>
 </>)
-const extensions = () => (<></>)
-const improved_refunds = () => (<><p><img src={Z66097} alt="Improved refunds"/></p>
+const extensions = () => (<><p><img src={H95814} alt="Extensions"/></p>
+<p>Experience the new interface for browsing and installing extensions in the ‘Explore’ view</p>
+</>)
+const improved_refunds = () => (<><p><img src={A56493} alt="Improved refunds"/></p>
 <h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
 <ul>
 <li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>
@@ -58,9 +61,9 @@ export const AVAILABLE_FLAGS = [{
   }
 },{
   name: "extensions",
-  displayName: "Extensions",
+  displayName: "New Explore view",
   component: extensions,
-  visible: false,
+  visible: true,
   content: {
     enabled: false,
     payload: "default",

Dockerfile

@@ -22,6 +22,7 @@ COPY src/ src/
 ARG API_URL
 ARG APP_MOUNT_URI
 ARG APPS_MARKETPLACE_API_URL
+ARG EXTENSIONS_API_URL
 ARG APPS_TUNNEL_URL_KEYWORDS
 ARG STATIC_URL
 ARG SKIP_SOURCEMAPS
@@ -30,6 +31,7 @@ ARG LOCALE_CODE
 ENV API_URL ${API_URL:-http://localhost:8000/graphql/}
 ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
 ENV APPS_MARKETPLACE_API_URL ${APPS_MARKETPLACE_API_URL:-https://apps.saleor.io/api/v2/saleor-apps}
+ENV EXTENSIONS_API_URL ${EXTENSIONS_API_URL:-https://apps.saleor.io/api/v1/extensions}
 ENV APPS_TUNNEL_URL_KEYWORDS ${APPS_TUNNEL_URL_KEYWORDS}
 ENV STATIC_URL ${STATIC_URL:-/dashboard/}
 ENV SKIP_SOURCEMAPS ${SKIP_SOURCEMAPS:-true}

docs/configuration.md

@@ -20,4 +20,6 @@ Create or edit `.env` file in a root directory or set environment variables with
 
 - `APPS_MARKETPLACE_API_URL` - URI of Marketplace API to fetch list of Apps in JSON.
 
+- `EXTENSIONS_API_URL` - URI of Marketplace API to fetch list of Extensions in JSON.
+
 - `APPS_TUNNEL_URL_KEYWORDS` - Custom apps tunnel URL keywords.

docs/docker.md

@@ -27,6 +27,7 @@ docker exec -it \
   -e "API_URL=NEW_API_URL" \
   -e "APP_MOUNT_URI=NEW_APP_MOUNT_URI" \
   -e "APPS_MARKETPLACE_API_URL=NEW_APPS_MARKETPLACE_API_URL" \
+  -e "EXTENSIONS_API_URL=NEW_EXTENSIONS_API_URL" \
   -e "APPS_TUNNEL_URL_KEYWORDS=NEW_APPS_TUNNEL_URL_KEYWORDS" \
   -e "IS_CLOUD_INSTANCE=NEW_IS_CLOUD_INSTANCE" \
   -e "LOCALE_CODE=NEW_LOCALE_CODE" \
@@ -40,6 +41,7 @@ docker run --publish 8080:80 \
   -e "API_URL=NEW_API_URL" \
   -e "APP_MOUNT_URI=NEW_APP_MOUNT_URI" \
   -e "APPS_MARKETPLACE_API_URL=NEW_APPS_MARKETPLACE_API_URL" \
+  -e "EXTENSIONS_API_URL=NEW_EXTENSIONS_API_URL" \
   -e "APPS_TUNNEL_URL_KEYWORDS=NEW_APPS_TUNNEL_URL_KEYWORDS" \
   -e "IS_CLOUD_INSTANCE=NEW_IS_CLOUD_INSTANCE" \
   -e "LOCALE_CODE=NEW_LOCALE_CODE" \

nginx/replace-env-vars.sh

@@ -23,6 +23,7 @@ replace_env_var() {
 replace_env_var "API_URL"
 replace_env_var "APP_MOUNT_URI"
 replace_env_var "APPS_MARKETPLACE_API_URL"
+replace_env_var "EXTENSIONS_API_URL"
 replace_env_var "APPS_TUNNEL_URL_KEYWORDS"
 replace_env_var "IS_CLOUD_INSTANCE"
 replace_env_var "LOCALE_CODE"