Fix errors when user has insufficient permissions (#5102)

* include private metadata when user has permissions * gift card only permission fix * changesets * fix crash * Add tests * fix ts errors * cr * improve tests * improve changeset * various gift card view improvements * json messages --------- Co-authored-by: Paweł Chyła <[email protected]>
saleor · Aug 12, 2024 · edaf42b · edaf42b
1 parent 5e3cc3f
commit edaf42b
Show file tree

Hide file tree

Showing 24 changed files with 424 additions and 97 deletions.
diff --git a/.changeset/nice-humans-add.md b/.changeset/nice-humans-add.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Gift card details page and customer details page no longer crash when you have only some required permissions. This means that you can now view gift card details page if you have only gift card permissions and customer details page if you have only customer permissions.
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -2605,6 +2605,10 @@
   "FTYkgw": {
     "string": "Delete collections"
   },
+  "FWaL+x": {
+    "context": "gift card history message",
+    "string": "Gift card balance was reset"
+  },
   "FWbv/u": {
     "context": "page header",
     "string": "Create Discount"

diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
@@ -1,4 +1,4 @@
-import { GiftCardEventFragment, OrderEventFragment } from "@dashboard/graphql";
+import { GiftCardEventsQuery, OrderEventFragment } from "@dashboard/graphql";
 import { getUserInitials, getUserName } from "@dashboard/misc";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
@@ -31,11 +31,15 @@ const useStyles = makeStyles(
   { name: "TimelineNote" },
 );
 
+type TimelineAppType =
+  | NonNullable<GiftCardEventsQuery["giftCard"]>["events"][0]["app"]
+  | OrderEventFragment["app"];
+
 interface TimelineNoteProps {
   date: string;
   message: string | null;
   user: OrderEventFragment["user"];
-  app: OrderEventFragment["app"] | GiftCardEventFragment["app"];
+  app: TimelineAppType;
   hasPlainDate?: boolean;
 }
 
@@ -61,7 +65,7 @@ const TimelineAvatar = ({
   className,
 }: {
   user: OrderEventFragment["user"];
-  app: OrderEventFragment["app"] | GiftCardEventFragment["app"];
+  app: TimelineAppType;
   className: string;
 }) => {
   if (user) {

diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -70,7 +70,9 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
     lastName: customer?.lastName || "",
     metadata: customer?.metadata.map(mapMetadataItemToInput),
     note: customer?.note || "",
-    privateMetadata: customer?.privateMetadata.map(mapMetadataItemToInput),
+    privateMetadata: customer?.privateMetadata
+      ? customer?.privateMetadata.map(mapMetadataItemToInput)
+      : [],
   };
   const { makeChangeHandler: makeMetadataChangeHandler } = useMetadataChangeTrigger();
   const { CUSTOMER_DETAILS_MORE_ACTIONS } = useExtensions(extensionMountPoints.CUSTOMER_DETAILS);

diff --git a/src/customers/queries.ts b/src/customers/queries.ts
@@ -37,9 +37,19 @@ export const customerList = gql`
 `;
 
 export const customerDetails = gql`
-  query CustomerDetails($id: ID!, $PERMISSION_MANAGE_ORDERS: Boolean!) {
+  query CustomerDetails(
+    $id: ID!
+    $PERMISSION_MANAGE_ORDERS: Boolean!
+    $PERMISSION_MANAGE_STAFF: Boolean!
+  ) {
     user(id: $id) {
       ...CustomerDetails
+      metadata {
+        ...MetadataItem
+      }
+      privateMetadata @include(if: $PERMISSION_MANAGE_STAFF) {
+        ...MetadataItem
+      }
       orders(last: 5) @include(if: $PERMISSION_MANAGE_ORDERS) {
         edges {
           node {

diff --git a/src/customers/views/CustomerDetails.tsx b/src/customers/views/CustomerDetails.tsx
@@ -87,7 +87,10 @@ const CustomerDetailsViewInner: React.FC<CustomerDetailsViewProps> = ({ id, para
     );
 
   const handleSubmit = createMetadataUpdateHandler(
-    user,
+    {
+      ...user,
+      privateMetadata: user?.privateMetadata || [],
+    },
     updateData,
     variables => updateMetadata({ variables }),
     variables => updatePrivateMetadata({ variables }),

diff --git a/src/fragments/customers.ts b/src/fragments/customers.ts
@@ -12,7 +12,6 @@ export const customerFragment = gql`
 export const customerDetailsFragment = gql`
   fragment CustomerDetails on User {
     ...Customer
-    ...Metadata
     dateJoined
     lastLogin
     defaultShippingAddress {

diff --git a/src/fragments/giftCards.ts b/src/fragments/giftCards.ts
@@ -17,22 +17,6 @@ export const giftCardEventsFragment = gql`
     id
     date
     type
-    user {
-      ...UserBase
-      email
-      avatar(size: 128) {
-        url
-      }
-    }
-    app {
-      id
-      name
-      brand {
-        logo {
-          default(size: 128)
-        }
-      }
-    }
     message
     email
     orderId
@@ -76,10 +60,6 @@ export const giftCardDataFragment = gql`
     }
     usedByEmail
     createdByEmail
-    app {
-      id
-      name
-    }
     created
     expiryDate
     lastUsedOn
@@ -90,7 +70,6 @@ export const giftCardDataFragment = gql`
     currentBalance {
       ...Money
     }
-
     id
     tags {
       name

diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardTimelineEvent.tsx b/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardTimelineEvent.tsx
@@ -3,15 +3,17 @@ import { AppPaths } from "@dashboard/apps/urls";
 import Link from "@dashboard/components/Link";
 import { TimelineEvent } from "@dashboard/components/Timeline";
 import { customerPath } from "@dashboard/customers/urls";
-import { GiftCardEventFragment, GiftCardEventsEnum } from "@dashboard/graphql";
+import { GiftCardEventsEnum, GiftCardEventsQuery } from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
 import React from "react";
 import { IntlShape, useIntl } from "react-intl";
 
 import { giftCardHistoryTimelineMessages as timelineMessages } from "./messages";
 
-const getUserOrApp = (event: GiftCardEventFragment): string | null => {
+type GiftCardEventType = GiftCardEventsQuery["giftCard"]["events"][0];
+
+const getUserOrApp = (event: GiftCardEventType): string | null => {
   if (event.user) {
     const { firstName, lastName, email } = event.user;
 
@@ -28,7 +30,7 @@ const getUserOrApp = (event: GiftCardEventFragment): string | null => {
 
   return null;
 };
-const getUserOrAppUrl = (event: GiftCardEventFragment): string => {
+const getUserOrAppUrl = (event: GiftCardEventType): string => {
   if (event.user) {
     return staffMemberDetailsUrl(event.user.id);
   }
@@ -39,7 +41,7 @@ const getUserOrAppUrl = (event: GiftCardEventFragment): string => {
 
   return null;
 };
-const getEventMessage = (event: GiftCardEventFragment, intl: IntlShape) => {
+const getEventMessage = (event: GiftCardEventType, intl: IntlShape) => {
   const user = getUserOrApp(event);
   const userUrl = getUserOrAppUrl(event);
 
@@ -107,7 +109,7 @@ const getEventMessage = (event: GiftCardEventFragment, intl: IntlShape) => {
 
 export interface GiftCardTimelineEventProps {
   date: string;
-  event: GiftCardEventFragment;
+  event: GiftCardEventType;
 }
 
 const GiftCardTimelineEvent: React.FC<GiftCardTimelineEventProps> = ({ date, event }) => {

diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/hooks/useGiftCardHistoryEvents.test.tsx b/src/giftCards/GiftCardUpdate/GiftCardHistory/hooks/useGiftCardHistoryEvents.test.tsx
@@ -0,0 +1,114 @@
+import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+
+import { giftCardsMocks } from "../../../../../testUtils/mocks/giftCards";
+import { useUser } from "../../../../auth";
+import { useGiftCardEventsQuery } from "../../../../graphql";
+import { GiftCardDetailsContext } from "../../providers/GiftCardDetailsProvider";
+import useGiftCardHistoryEvents from "./useGiftCardHistoryEvents";
+
+// Mock the dependencies
+jest.mock("@dashboard/auth");
+jest.mock("@dashboard/graphql");
+
+const mockUseUser = useUser as jest.Mock;
+const mockUseGiftCardEventsQuery = useGiftCardEventsQuery as jest.Mock;
+
+const mockGiftCard = {
+  ...giftCardsMocks[0],
+  id: "giftCardId",
+};
+const mockUser = {
+  userPermissions: [{ code: "MANAGE_USERS" }, { code: "MANAGE_APPS" }],
+};
+
+mockUseUser.mockReturnValue({ user: mockUser });
+
+describe("useGiftCardHistoryEvents", () => {
+  it("should return gift card events", () => {
+    // Arrange
+    mockUseGiftCardEventsQuery.mockImplementation(() => ({
+      data: {
+        giftCard: {
+          events: [
+            { id: "event1", app: {}, user: {} },
+            { id: "event2", app: {}, user: {} },
+          ],
+        },
+      },
+    }));
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <GiftCardDetailsContext.Provider value={{ giftCard: mockGiftCard, loading: false }}>
+        {children}
+      </GiftCardDetailsContext.Provider>
+    );
+
+    // Act
+    const { result } = renderHook(() => useGiftCardHistoryEvents(), { wrapper });
+
+    // Assert
+    expect(result.current.id).toBe("giftCardId");
+    expect(result.current.events).toEqual([
+      { id: "event1", app: {}, user: {} },
+      { id: "event2", app: {}, user: {} },
+    ]);
+    expect(mockUseGiftCardEventsQuery).toBeCalledWith({
+      variables: { id: "giftCardId", canSeeApp: true, canSeeUser: true },
+      skip: false,
+    });
+  });
+
+  it("should return undefined when there is no gift card", () => {
+    // Arrange
+    mockUseGiftCardEventsQuery.mockImplementation(() => ({
+      data: undefined,
+    }));
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <GiftCardDetailsContext.Provider value={{ giftCard: undefined, loading: false }}>
+        {children}
+      </GiftCardDetailsContext.Provider>
+    );
+
+    // Act
+    const { result } = renderHook(() => useGiftCardHistoryEvents(), { wrapper });
+
+    // Assert
+    expect(result.current.id).toBeUndefined();
+    expect(result.current.events).toBeUndefined();
+    expect(mockUseGiftCardEventsQuery).toBeCalledWith({
+      variables: undefined,
+      skip: true,
+    });
+  });
+
+  it("should not return app and user when user does not have permissions", () => {
+    // Arrange
+    mockUseUser.mockReturnValue({ user: { userPermissions: [] } });
+    mockUseGiftCardEventsQuery.mockImplementation(() => ({
+      data: {
+        giftCard: {
+          events: [{ id: "event1" }, { id: "event2" }],
+        },
+      },
+    }));
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <GiftCardDetailsContext.Provider value={{ giftCard: mockGiftCard, loading: false }}>
+        {children}
+      </GiftCardDetailsContext.Provider>
+    );
+
+    // Act
+    const { result } = renderHook(() => useGiftCardHistoryEvents(), { wrapper });
+
+    // Assert
+    expect(result.current.id).toBe("giftCardId");
+    expect(result.current.events).toEqual([{ id: "event1" }, { id: "event2" }]);
+    expect(mockUseGiftCardEventsQuery).toBeCalledWith({
+      variables: { id: "giftCardId", canSeeApp: false, canSeeUser: false },
+      skip: false,
+    });
+  });
+});
diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/hooks/useGiftCardHistoryEvents.ts b/src/giftCards/GiftCardUpdate/GiftCardHistory/hooks/useGiftCardHistoryEvents.ts
@@ -1,13 +1,32 @@
+import { useGiftCardPermissions } from "@dashboard/giftCards/hooks/useGiftCardPermissions";
+import { GiftCardEventsQuery, useGiftCardEventsQuery } from "@dashboard/graphql";
 import { useContext } from "react";
 
 import { GiftCardDetailsContext } from "../../providers/GiftCardDetailsProvider";
 
-const useGiftCardHistoryEvents = () => {
+interface GiftCardHistoryEvents {
+  id: string | undefined;
+  events: NonNullable<GiftCardEventsQuery["giftCard"]>["events"] | null | undefined;
+}
+
+const useGiftCardHistoryEvents = (): GiftCardHistoryEvents => {
+  const { canSeeApp, canSeeUser } = useGiftCardPermissions();
+
   const { giftCard } = useContext(GiftCardDetailsContext);
+  const { data } = useGiftCardEventsQuery({
+    variables: giftCard
+      ? {
+          canSeeApp,
+          canSeeUser,
+          id: giftCard.id,
+        }
+      : undefined,
+    skip: !giftCard?.id,
+  });
 
   return {
     id: giftCard?.id,
-    events: giftCard?.events,
+    events: data?.giftCard?.events,
   };
 };
 

diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts
@@ -34,8 +34,8 @@ const giftCardHistoryTimelineMessages = defineMessages({
     description: "gift card history message",
   },
   balanceResetAnonymous: {
-    id: "aEc9Ar",
-    defaultMessage: "Gift card balance was reset by {resetBy}",
+    id: "FWaL+x",
+    defaultMessage: "Gift card balance was reset",
     description: "gift card history message",
   },
   bought: {

diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/queries.ts b/src/giftCards/GiftCardUpdate/GiftCardHistory/queries.ts
@@ -0,0 +1,27 @@
+import { gql } from "@apollo/client";
+
+export const giftCardEvents = gql`
+  query GiftCardEvents($id: ID!, $canSeeApp: Boolean!, $canSeeUser: Boolean!) {
+    giftCard(id: $id) {
+      events {
+        ...GiftCardEvent
+        app @include(if: $canSeeApp) {
+          id
+          name
+          brand {
+            logo {
+              default(size: 128)
+            }
+          }
+        }
+        user @include(if: $canSeeUser) {
+          ...UserBase
+          email
+          avatar(size: 128) {
+            url
+          }
+        }
+      }
+    }
+  }
+`;