Add source header to API calls

.changeset/twenty-apples-talk.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Dashboard now sends source header to API, when ENABLED_SERVICE_NAME_HEADER=true. Requires core >=3.20.68.

.github/workflows/deploy-cloud.yaml

@@ -27,6 +27,7 @@ jobs:
       POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
       POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
       POSTHOG_EXCLUDED_DOMAINS: ${{ vars.POSTHOG_EXCLUDED_DOMAINS }}
+      ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.CLOUD_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - name: Check region

.github/workflows/deploy-dev.yaml

@@ -26,6 +26,7 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       APPS_MARKETPLACE_API_URL: "https://apps.staging.saleor.io/api/v2/saleor-apps"
+      ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.DEV_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
       IS_CLOUD_INSTANCE: true
     steps:

.github/workflows/deploy-master-staging.yaml

@@ -24,6 +24,7 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       APPS_MARKETPLACE_API_URL: "https://apps.staging.saleor.io/api/v2/saleor-apps"
       IS_CLOUD_INSTANCE: true
+      ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - uses: actions/checkout@v2

.github/workflows/deploy-staging-and-prepare-release.yaml

@@ -59,6 +59,7 @@ jobs:
       APPS_MARKETPLACE_API_URL: "https://apps.staging.saleor.io/api/v2/saleor-apps"
       VERSION: ${{ github.event.inputs.git_ref || github.ref_name }}
       IS_CLOUD_INSTANCE: true
+      ENABLED_SERVICE_NAME_HEADER: true
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - uses: actions/checkout@v4

.github/workflows/pr-automation.yml

@@ -122,6 +122,7 @@ jobs:
           APP_MOUNT_URI: /
           STATIC_URL: /
           IS_CLOUD_INSTANCE: true
+          ENABLED_SERVICE_NAME_HEADER: true
           ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
         run: npm run build
 

.github/workflows/run-test-manual.yml

@@ -121,6 +121,7 @@ jobs:
           MAILPITURL: ${{ secrets.MAILPITURL }}
           PW_WORKERS: ${{ vars.PW_WORKERS }}
           PW_RETRIES: ${{ vars.PW_RETRIES }}
+          ENABLED_SERVICE_NAME_HEADER: true
           URL_TO_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
           PROJECT: "e2e apps-e2e"
 

src/components/DevModePanel/utils.test.ts

@@ -11,6 +11,10 @@ jest.mock("@saleor/sdk", () => ({
   createFetch: jest.fn().mockReturnValue(jest.fn()),
 }));
 
+jest.mock("@dashboard/config", () => ({
+  ENABLED_SERVICE_NAME_HEADER: true,
+}));
+
 const mockCreateGraphiQLFetcher = createGraphiQLFetcher as jest.Mock;
 const authorizedFetch = createFetch as jest.Mock;
 
@@ -58,13 +62,18 @@ describe("getFetcher", () => {
     expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
       url: mockApiUrl,
       fetch: fetch,
+      headers: {
+        "source-service-name": "saleor.dashboard.playground",
+      },
     });
   });
 
   it("should return fetcher with fetch when Authorization-Bearer header present", () => {
     // Arrange
     const opts: FetcherOpts = {
-      headers: { "Authorization-Bearer": "token" },
+      headers: {
+        "Authorization-Bearer": "token",
+      },
     };
 
     // Act
@@ -74,13 +83,18 @@ describe("getFetcher", () => {
     expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
       url: mockApiUrl,
       fetch: fetch,
+      headers: {
+        "source-service-name": "saleor.dashboard.playground",
+      },
     });
   });
 
   it("should return fetcher with fetch when lowercase header present", () => {
     // Arrange
     const opts: FetcherOpts = {
-      headers: { "authorization-bearer": "token" },
+      headers: {
+        "authorization-bearer": "token",
+      },
     };
 
     // Act
@@ -90,6 +104,9 @@ describe("getFetcher", () => {
     expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
       url: mockApiUrl,
       fetch: fetch,
+      headers: {
+        "source-service-name": "saleor.dashboard.playground",
+      },
     });
   });
 });

src/components/DevModePanel/utils.ts

@@ -1,3 +1,4 @@
+import { ENABLED_SERVICE_NAME_HEADER } from "@dashboard/config";
 import { createGraphiQLFetcher, FetcherOpts } from "@graphiql/toolkit";
 import { createFetch } from "@saleor/sdk";
 
@@ -16,8 +17,15 @@ export const getFetcher = (opts: FetcherOpts) => {
     httpFetch = fetch;
   }
 
+  const headers: Record<string, string> = {};
+
+  if (ENABLED_SERVICE_NAME_HEADER) {
+    headers["source-service-name"] = "saleor.dashboard.playground";
+  }
+
   return createGraphiQLFetcher({
     url: process.env.API_URL as string,
     fetch: httpFetch as typeof fetch,
+    headers,
   });
 };

src/config.ts

@@ -199,3 +199,5 @@ export const DEMO_MODE = process.env.DEMO_MODE === "true";
 export const GTM_ID = process.env.GTM_ID;
 
 export const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;
+export const ENABLED_SERVICE_NAME_HEADER =
+  (process.env.ENABLED_SERVICE_NAME_HEADER as string) === "true";

src/graphql/client.ts

@@ -1,22 +1,34 @@
 // DON'T TOUCH THIS
 // These are separate clients and do not share configs between themselves
 import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
+import { ENABLED_SERVICE_NAME_HEADER, getApiUrl } from "@dashboard/config";
 import { createFetch, createSaleorClient } from "@saleor/sdk";
 import { createUploadLink } from "apollo-upload-client";
 
-import { getApiUrl } from "../config";
 import introspectionQueryResultData from "./fragmentTypes.generated";
 import { TypedTypePolicies } from "./typePolicies.generated";
 
-const attachVariablesLink = new ApolloLink((operation, forward) =>
-  forward(operation).map(data => ({
+const attachVariablesLink = new ApolloLink((operation, forward) => {
+  operation.setContext(({ headers = {} }) => {
+    const contextHeaders: Record<string, string> = { ...headers };
+
+    if (ENABLED_SERVICE_NAME_HEADER) {
+      contextHeaders["source-service-name"] = "saleor.dashboard";
+    }
+
+    return {
+      headers: contextHeaders,
+    };
+  });
+
+  return forward(operation).map(data => ({
     ...data,
     extensions: {
       ...data.extensions,
       variables: operation.variables,
     },
-  })),
-);
+  }));
+});
 
 export const link = attachVariablesLink.concat(
   createUploadLink({

vite.config.js

@@ -56,6 +56,7 @@ export default defineConfig(({ command, mode }) => {
     SENTRY_AUTH_TOKEN,
     SENTRY_ORG,
     SENTRY_PROJECT,
+    ENABLED_SERVICE_NAME_HEADER,
     ONBOARDING_USER_JOINED_DATE_THRESHOLD,
     // eslint-disable-next-line camelcase
     npm_package_version,
@@ -88,6 +89,7 @@ export default defineConfig(({ command, mode }) => {
           POSTHOG_EXCLUDED_DOMAINS,
           POSTHOG_HOST,
           ONBOARDING_USER_JOINED_DATE_THRESHOLD,
+          ENABLED_SERVICE_NAME_HEADER,
           injectOgTags:
             DEMO_MODE &&
             `
@@ -165,6 +167,7 @@ export default defineConfig(({ command, mode }) => {
         POSTHOG_KEY,
         POSTHOG_EXCLUDED_DOMAINS,
         POSTHOG_HOST,
+        ENABLED_SERVICE_NAME_HEADER,
         ONBOARDING_USER_JOINED_DATE_THRESHOLD,
         // eslint-disable-next-line camelcase
         RELEASE_NAME: npm_package_version,