Merge branch 'main' into merx-1181-update-add-tracking-button

.changeset/flat-owls-sniff.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now use custom auth headers in graphiql dev mode panel.

.changeset/popular-actors-talk.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Posthog no longer collect the events from the staging environments. This means we track the data only in production environments.

.changeset/tender-boxes-bow.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Playwright tests raport is generated even test failed

.github/actions/run-pw-tests/action.yml

@@ -88,8 +88,8 @@ runs:
         for PROJECT in "${PROJECTS[@]}"; do
           PROJECT_PARAMS+="--project=${PROJECT} "
         done
-        npx playwright test --grep @e2e $PROJECT_PARAMS --shard "$SHARD_NUMBER"
         echo "reportName=all-blob-reports-${SHARD_NUMBER%%/*}" >> $GITHUB_ENV
+        npx playwright test --grep @e2e $PROJECT_PARAMS --shard "$SHARD_NUMBER"
 
     - name: Upload blob report to GitHub Actions Artifacts
       uses: actions/upload-artifact@v4

.github/workflows/deploy-cloud.yaml

@@ -24,8 +24,6 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       APPS_MARKETPLACE_API_URL: "https://apps.saleor.io/api/v2/saleor-apps"
       IS_CLOUD_INSTANCE: true
-      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
-      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.CLOUD_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - name: Check region

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

@@ -24,8 +24,6 @@ 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
-      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
-      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
       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

@@ -61,6 +61,7 @@ jobs:
       IS_CLOUD_INSTANCE: true
       POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
       POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
+      POSTHOG_EXCLUDED_DOMAINS: ${{ vars.EXCLUDED_DOMAINS }}
       ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
     steps:
       - uses: actions/checkout@v4

package.json

@@ -260,7 +260,6 @@
     "serve:lhci": "cross-env NODE_ENV=production npm run server",
     "prestart": "npm run build-types",
     "test": "jest src/",
-    "posttest": "node scripts/pika.js",
     "test:watch": "jest --watch src/",
     "lint": "eslint \"{src,playwright}/**/*.@(tsx|ts|jsx|js)\" --fix",
     "lint:check-progress": "eslint-nibble \"src/**/*.@(tsx|ts|jsx|js)\"",

src/components/DevModePanel/DevModePanel.tsx

@@ -2,8 +2,7 @@
 import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { useOnboarding } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
-import { createGraphiQLFetcher, FetcherOpts, FetcherParams } from "@graphiql/toolkit";
-import { createFetch } from "@saleor/sdk";
+import { FetcherOpts, FetcherParams } from "@graphiql/toolkit";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -12,24 +11,21 @@ import { useContextualLink } from "../AppLayout/ContextualLinks/useContextualLin
 import PlainGraphiQL from "../GraphiQLPlain";
 import { useDevModeContext } from "./hooks";
 import { messages } from "./messages";
-
-const authorizedFetch = createFetch();
+import { getFetcher } from "./utils";
 
 export const DevModePanel: React.FC = () => {
   const intl = useIntl();
   const subtitle = useContextualLink("dev_panel");
   const { rootStyle } = useDashboardTheme();
   const { markOnboardingStepAsCompleted } = useOnboarding();
   const { isDevModeVisible, variables, devModeContent, setDevModeVisibility } = useDevModeContext();
-  const baseFetcher = createGraphiQLFetcher({
-    url: process.env.API_URL,
-    fetch: authorizedFetch,
-  });
   const fetcher = async (graphQLParams: FetcherParams, opts: FetcherOpts) => {
     if (graphQLParams.operationName !== "IntrospectionQuery") {
       markOnboardingStepAsCompleted("graphql-playground");
     }
 
+    const baseFetcher = getFetcher(opts);
+
     const result = await baseFetcher(graphQLParams, opts); // Call the base fetcher
 
     return result;

src/components/DevModePanel/utils.test.ts

@@ -0,0 +1,95 @@
+import { createGraphiQLFetcher, FetcherOpts } from "@graphiql/toolkit";
+import { createFetch } from "@saleor/sdk";
+
+import { getFetcher } from "./utils";
+
+jest.mock("@graphiql/toolkit", () => ({
+  createGraphiQLFetcher: jest.fn(),
+}));
+
+jest.mock("@saleor/sdk", () => ({
+  createFetch: jest.fn().mockReturnValue(jest.fn()),
+}));
+
+const mockCreateGraphiQLFetcher = createGraphiQLFetcher as jest.Mock;
+const authorizedFetch = createFetch as jest.Mock;
+
+describe("getFetcher", () => {
+  const mockApiUrl = "http://test-api.com";
+  let originalFetch: typeof fetch;
+
+  beforeEach(() => {
+    process.env.API_URL = mockApiUrl;
+    originalFetch = global.fetch;
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    global.fetch = originalFetch;
+  });
+
+  it("should return fetcher with authorizedFetch when no auth headers", () => {
+    // Arrange
+    const opts: FetcherOpts = { headers: {} };
+
+    // Act
+    getFetcher(opts);
+
+    // Assert
+    expect(authorizedFetch).toHaveBeenCalled();
+    // 'toHaveBeenCalledWith' can't properly compare mock functions
+    expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: mockApiUrl,
+      }),
+    );
+  });
+
+  it("should return fetcher with fetch when Authorization header present", () => {
+    // Arrange
+    const opts: FetcherOpts = {
+      headers: { Authorization: "Bearer token" },
+    };
+
+    // Act
+    getFetcher(opts);
+
+    // Assert
+    expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
+      url: mockApiUrl,
+      fetch: fetch,
+    });
+  });
+
+  it("should return fetcher with fetch when Authorization-Bearer header present", () => {
+    // Arrange
+    const opts: FetcherOpts = {
+      headers: { "Authorization-Bearer": "token" },
+    };
+
+    // Act
+    getFetcher(opts);
+
+    // Assert
+    expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
+      url: mockApiUrl,
+      fetch: fetch,
+    });
+  });
+
+  it("should return fetcher with fetch when lowercase header present", () => {
+    // Arrange
+    const opts: FetcherOpts = {
+      headers: { "authorization-bearer": "token" },
+    };
+
+    // Act
+    getFetcher(opts);
+
+    // Assert
+    expect(mockCreateGraphiQLFetcher).toHaveBeenCalledWith({
+      url: mockApiUrl,
+      fetch: fetch,
+    });
+  });
+});

src/components/DevModePanel/utils.ts

@@ -0,0 +1,23 @@
+import { createGraphiQLFetcher, FetcherOpts } from "@graphiql/toolkit";
+import { createFetch } from "@saleor/sdk";
+
+const authHeaders = ["Authorization", "Authorization-Bearer"];
+
+const authorizedFetch = createFetch();
+
+export const getFetcher = (opts: FetcherOpts) => {
+  let httpFetch = authorizedFetch;
+
+  const hasAuthorizationHeaders =
+    opts.headers &&
+    authHeaders.some(header => opts.headers![header] || opts.headers![header.toLowerCase()]);
+
+  if (hasAuthorizationHeaders) {
+    httpFetch = fetch;
+  }
+
+  return createGraphiQLFetcher({
+    url: process.env.API_URL as string,
+    fetch: httpFetch as typeof fetch,
+  });
+};

src/components/ProductAnalytics/index.tsx

@@ -2,6 +2,18 @@ import { PostHogConfig } from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import React from "react";
 
+const isDomainExcluded = () => {
+  const domainsString = process.env.POSTHOG_EXCLUDED_DOMAINS;
+
+  if (!domainsString) {
+    return false;
+  }
+
+  const excludedDomains = domainsString.split(",");
+
+  return excludedDomains.some(domain => window.location.hostname.includes(domain));
+};
+
 const useConfig = () => {
   const options = {
     api_host: process.env.POSTHOG_HOST,
@@ -14,11 +26,16 @@ const useConfig = () => {
   } satisfies Partial<PostHogConfig>;
   const apiKey = process.env.POSTHOG_KEY;
   const isCloudInstance = process.env.IS_CLOUD_INSTANCE;
+
   const canRenderAnalytics = () => {
     if (!isCloudInstance) {
       return false;
     }
 
+    if (isDomainExcluded()) {
+      return false;
+    }
+
     if (!options.api_host || !apiKey) {
       return false;
     }

vite.config.js

@@ -51,6 +51,7 @@ export default defineConfig(({ command, mode }) => {
     FLAGS_SERVICE_ENABLED,
     LOCALE_CODE,
     POSTHOG_KEY,
+    POSTHOG_EXCLUDED_DOMAINS,
     POSTHOG_HOST,
     SENTRY_AUTH_TOKEN,
     SENTRY_ORG,
@@ -84,6 +85,7 @@ export default defineConfig(({ command, mode }) => {
           IS_CLOUD_INSTANCE,
           LOCALE_CODE,
           POSTHOG_KEY,
+          POSTHOG_EXCLUDED_DOMAINS,
           POSTHOG_HOST,
           ONBOARDING_USER_JOINED_DATE_THRESHOLD,
           injectOgTags:
@@ -161,6 +163,7 @@ export default defineConfig(({ command, mode }) => {
         SENTRY_RELEASE,
         STATIC_URL,
         POSTHOG_KEY,
+        POSTHOG_EXCLUDED_DOMAINS,
         POSTHOG_HOST,
         ONBOARDING_USER_JOINED_DATE_THRESHOLD,
         // eslint-disable-next-line camelcase