Pull legacy @saleor/sdk into dashboard

.changeset/neat-carpets-eat.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Pull @saleor/sdk dependency into Dashboard codebase, to restore control of external dependencies like Apollo

codegen-main.ts

@@ -1,4 +1,4 @@
-import { CodegenConfig } from "@graphql-codegen/cli";
+import { type CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
   schema: "./schema-main.graphql",
@@ -12,6 +12,8 @@ const config: CodegenConfig = {
     "!./src/**/mutations.staging.ts",
     "!./src/**/fragments/*.staging.ts",
     "!./src/searches/*.staging.ts",
+    // legacy SDK has its own internal GraphQL operations
+    "!./src/legacy-sdk/**",
   ],
   generates: {
     "./src/graphql/fragmentTypes.generated.ts": {

package.json

@@ -86,7 +86,6 @@
     "@react-editor-js/core": "2.1.0",
     "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4",
     "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.4.2",
-    "@saleor/sdk": "0.6.0",
     "@sentry/react": "^8.55.0",
     "@sentry/vite-plugin": "^2.23.1",
     "@types/faker": "^5.5.9",

pnpm-workspace.yaml

@@ -3,7 +3,6 @@ blockExoticSubdeps: true
 minimumReleaseAge: 720 # 12h
 minimumReleaseAgeExclude:
   - "@saleor/app-sdk"
-  - "@saleor/sdk"
   - "@saleor/macaw-ui"
 
 trustPolicy: no-downgrade

src/auth/AuthProvider.test.tsx

@@ -1,7 +1,7 @@
 import { useApolloClient } from "@apollo/client";
 import { useUserDetailsQuery } from "@dashboard/graphql";
 import { useNotifier } from "@dashboard/hooks/useNotifier";
-import { useAuth, useAuthState } from "@saleor/sdk";
+import { useAuth, useAuthState } from "@dashboard/legacy-sdk";
 import { act, renderHook } from "@testing-library/react-hooks";
 import { useIntl } from "react-intl";
 
@@ -38,7 +38,7 @@ afterAll(() => {
     value: originalWindowNavigator,
   });
 });
-jest.mock("@saleor/sdk", () => ({
+jest.mock("@dashboard/legacy-sdk", () => ({
   useAuth: jest.fn(() => ({
     login: jest.fn(() => ({
       data: {

src/auth/hooks/useAuthProvider.test.ts

@@ -1,13 +1,13 @@
 import { ApolloError } from "@apollo/client";
 import { AccountErrorCode } from "@dashboard/graphql";
-import { useAuth, useAuthState } from "@saleor/sdk";
+import { useAuth, useAuthState } from "@dashboard/legacy-sdk";
 import { waitFor } from "@testing-library/react";
 import { act, renderHook } from "@testing-library/react-hooks";
 
 import { useAuthProvider } from "./useAuthProvider";
 
 // Mock dependencies
-jest.mock("@saleor/sdk");
+jest.mock("@dashboard/legacy-sdk");
 
 const useAuthStateMock = {
   authenticated: false,

src/auth/hooks/useAuthProvider.ts

@@ -4,19 +4,19 @@ import { AccountErrorCode, useUserDetailsQuery } from "@dashboard/graphql";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { commonMessages } from "@dashboard/intl";
+import {
+  type GetExternalAccessTokenData,
+  type LoginData,
+  useAuth,
+  useAuthState,
+} from "@dashboard/legacy-sdk";
 import {
   checkIfCredentialsExist,
   isSupported as isCredentialsManagementAPISupported,
   login as loginWithCredentialsManagementAPI,
   saveCredentials,
 } from "@dashboard/utils/credentialsManagement";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
-import {
-  type GetExternalAccessTokenData,
-  type LoginData,
-  useAuth,
-  useAuthState,
-} from "@saleor/sdk";
 import isEmpty from "lodash/isEmpty";
 import { useEffect, useRef, useState } from "react";
 import { type IntlShape } from "react-intl";

src/auth/types.ts

@@ -4,7 +4,7 @@ import {
   type GetExternalAccessTokenData,
   type GetExternalAuthUrlData,
   type LoginData,
-} from "@saleor/sdk";
+} from "@dashboard/legacy-sdk";
 
 export interface RequestExternalLoginInput {
   redirectUri: string;

src/auth/views/NewPassword.tsx

@@ -1,7 +1,7 @@
 import { type AccountErrorFragment } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
+import { useAuth } from "@dashboard/legacy-sdk";
 import { parseQs } from "@dashboard/url-utils";
-import { useAuth } from "@saleor/sdk";
 import { useState } from "react";
 import { type RouteComponentProps } from "react-router";
 

src/components/AddressEdit/useAddressValidation.ts

@@ -4,7 +4,7 @@ import {
   CountryCode,
   useAddressValidationRulesQuery,
 } from "@dashboard/graphql";
-import { type ChoiceValue } from "@saleor/sdk/dist/apollo/types";
+import { type ChoiceValue } from "@dashboard/legacy-sdk/apollo/types";
 
 interface AreaChoices {
   label: string;

src/components/AppLayout/AppChannelContext.tsx

@@ -2,8 +2,8 @@
 import { useUser } from "@dashboard/auth/useUser";
 import { type ChannelFragment, useBaseChannelsQuery } from "@dashboard/graphql";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
+import { useSaleorConfig } from "@dashboard/legacy-sdk";
 import { getById } from "@dashboard/misc";
-import { useSaleorConfig } from "@saleor/sdk";
 import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
 
 interface UseAppChannel {

src/components/DevModePanel/utils.test.ts

@@ -1,14 +1,14 @@
 import { getApiUrl } from "@dashboard/config";
+import { createFetch } from "@dashboard/legacy-sdk";
 import { createGraphiQLFetcher, type FetcherOpts } from "@graphiql/toolkit";
-import { createFetch } from "@saleor/sdk";
 
 import { getFetcher } from "./utils";
 
 jest.mock("@graphiql/toolkit", () => ({
   createGraphiQLFetcher: jest.fn(),
 }));
 
-jest.mock("@saleor/sdk", () => ({
+jest.mock("@dashboard/legacy-sdk", () => ({
   createFetch: jest.fn().mockReturnValue(jest.fn()),
 }));
 

src/components/DevModePanel/utils.ts

@@ -1,6 +1,6 @@
 import { ENABLED_SERVICE_NAME_HEADER, getApiUrl } from "@dashboard/config";
+import { createFetch } from "@dashboard/legacy-sdk";
 import { createGraphiQLFetcher, type FetcherOpts } from "@graphiql/toolkit";
-import { createFetch } from "@saleor/sdk";
 
 const authHeaders = ["Authorization", "Authorization-Bearer"];
 

src/graphql/client.ts

@@ -2,7 +2,7 @@
 // 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 { createFetch, createSaleorClient } from "@dashboard/legacy-sdk";
 import { createUploadLink } from "apollo-upload-client";
 
 import introspectionQueryResultData from "./fragmentTypes.generated";
@@ -41,7 +41,6 @@ const link = attachVariablesLink.concat(
   createUploadLink({
     credentials: "include",
     uri: getApiUrl(),
-    // TODO: Remove once @saleor/sdk is removed in favor of local implementation for auth
     // Note this has to be as typeof fetch: ts-expect-error breaks TS in non-strict mode, without it strict mode breaks
     fetch: createFetch() as typeof fetch,
   }) as unknown as ApolloLink, // type mismatch between apollo-upload-client and @apollo/cient

src/index.tsx

@@ -7,14 +7,14 @@ import { AppExtensionPopupProvider } from "@dashboard/extensions/components/AppE
 import { ExtensionsPaths, extensionsSection } from "@dashboard/extensions/urls";
 import { PermissionEnum } from "@dashboard/graphql";
 import useAppState from "@dashboard/hooks/useAppState";
+import { SaleorProvider } from "@dashboard/legacy-sdk";
 import { pageListPath } from "@dashboard/modeling/urls";
 import { modelTypesPath } from "@dashboard/modelTypes/urls";
 import { refundsSettingsPath } from "@dashboard/refundsSettings/urls";
 import { structuresListPath } from "@dashboard/structures/urls";
 import { ThemeProvider } from "@dashboard/theme";
 import { OnboardingProvider } from "@dashboard/welcomePage/WelcomePageOnboarding/onboardingContext";
 import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
-import { SaleorProvider } from "@saleor/sdk";
 import { lazy, StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { ErrorBoundary } from "react-error-boundary";
@@ -114,7 +114,6 @@ const handleLegacyTheming = (): void => {
 handleLegacyTheming();
 
 const App = (): JSX.Element => (
-  // @ts-expect-error legacy types
   <SaleorProvider client={saleorClient}>
     <ApolloProvider client={apolloClient}>
       <Router>