Fix required permissions in subscription query editor (#5064)

* wrong permissions displayed fix

* fix mock

* changesets

* show permission origin and optional

* add test

* json messages

* small fixes

* qa fixes

* strict mode

* cr fixes

.changeset/shaggy-spoons-explode.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Subscription query editor no longer shows incorrect required permissions for inserted query.

locale/defaultMessages.json

@@ -422,6 +422,10 @@
     "context": "column header",
     "string": "Title"
   },
+  "0YjGFG": {
+    "context": "alert message",
+    "string": "For subscription"
+  },
   "0a0fLZ": {
     "context": "countries list menu label when no countries are assigned",
     "string": "There are no countries assigned"
@@ -2064,6 +2068,10 @@
   "ByYtFB": {
     "string": "Invalid or expired token. Please check your token in URL"
   },
+  "C+WD8j": {
+    "context": "alert message",
+    "string": "all of"
+  },
   "C035fF": {
     "context": "grant refund, refund card explanation next to submit button",
     "string": "Funds will be returned in a separate step"
@@ -3044,6 +3052,10 @@
     "context": "is filter range or value",
     "string": "equal to"
   },
+  "I/y4IU": {
+    "context": "alert message",
+    "string": "one of"
+  },
   "I1Mz7h": {
     "string": "Manage Collection Channel Availability"
   },

src/custom-apps/components/PermissionAlert/PermissionAlert.tsx

@@ -1,27 +1,28 @@
-import { useQuery } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { Alert } from "@saleor/macaw-ui";
 import { Box, Chip, Text } from "@saleor/macaw-ui-next";
+import { getIntrospectionQuery } from "graphql";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { buildPermissionMap, getPermissions, IntrospectionQuery } from "./utils";
+import { getPermissions } from "./utils";
 
 export interface PermissionAlertProps {
   query: string;
 }
 
 const PermissionAlert: React.FC<PermissionAlertProps> = ({ query }) => {
   const intl = useIntl();
-  const { data } = useQuery(IntrospectionQuery, {
+  const introQuery = getIntrospectionQuery();
+  const { data } = useQuery(gql(introQuery), {
     fetchPolicy: "network-only",
   });
-  const elements = data?.__schema?.types || [];
-  const permissionMapping = buildPermissionMap(elements);
-  const permissions = getPermissions(query, permissionMapping);
+  const permissionInfo = getPermissions(query, data);
+  const hasPermissions = permissionInfo && Object.entries(permissionInfo).length > 0;
 
   return (
     <div data-test-id="permission-alert">
-      {permissions.length > 0 && (
+      {hasPermissions && (
         <Alert
           title={intl.formatMessage({
             id: "ngSJ7N",
@@ -32,12 +33,44 @@ const PermissionAlert: React.FC<PermissionAlertProps> = ({ query }) => {
           close={false}
           className="remove-icon-background"
         >
-          <Box display="flex" gap={2}>
-            {permissions.map(permission => (
-              <Chip size="small" key={permission}>
-                <Text size={1}>{permission}</Text>
-              </Chip>
-            ))}
+          <Box display="flex" flexDirection="column" gap={2}>
+            {Object.entries(permissionInfo).map(
+              ([subscription, { isOneOfRequired, permissions }]) => (
+                <Box key={subscription} display="flex" gap={1}>
+                  <Text>
+                    {intl.formatMessage({
+                      id: "0YjGFG",
+                      defaultMessage: "For subscription",
+                      description: "alert message",
+                    })}
+                  </Text>
+                  <Chip color="info1" backgroundColor="info1">
+                    {subscription}
+                  </Chip>
+                  <Text>
+                    {isOneOfRequired
+                      ? intl.formatMessage({
+                          id: "I/y4IU",
+                          defaultMessage: "one of",
+                          description: "alert message",
+                        })
+                      : intl.formatMessage({
+                          defaultMessage: "all of",
+                          id: "C+WD8j",
+                          description: "alert message",
+                        })}
+                  </Text>
+                  {permissions.map(permission => (
+                    <Chip
+                      key={permission}
+                      backgroundColor={isOneOfRequired ? "warning1" : "critical1"}
+                    >
+                      {permission}
+                    </Chip>
+                  ))}
+                </Box>
+              ),
+            )}
           </Box>
         </Alert>
       )}

src/custom-apps/components/PermissionAlert/utils.test.ts

@@ -4,10 +4,10 @@ describe("Permission Parsing", () => {
   it("should extract permissions from the meta `description` if available", () => {
     // Arrange
     // -> Order.invoices
-    //    https://docs.saleor.io/docs/3.x/api-reference/objects/order
+    //    https://docs.saleor.io/api-reference/orders/objects/order
     const description = `List of order invoices. Can be fetched for orders created in Saleor 3.2 and later, for other orders requires one of the following permissions: MANAGE_ORDERS, OWNER.`;
     // Act
-    const permissions = extractPermissions(description);
+    const { permissions } = extractPermissions(description);
 
     // Assert
     expect(permissions).toHaveLength(2);
@@ -16,12 +16,25 @@ describe("Permission Parsing", () => {
   it("should return empty list if the `description` doesn't mention permissions", () => {
     // Arrange
     // -> Order.number
-    //    https://docs.saleor.io/docs/3.x/api-reference/objects/order
+    //    https://docs.saleor.io/api-reference/orders/objects/order
     const description = `User-friendly number of an order.`;
     // Act
-    const permissions = extractPermissions(description);
+    const { permissions } = extractPermissions(description);
 
     // Assert
     expect(permissions).toHaveLength(0);
   });
+  it("should correctly asses if the permissions are optional", () => {
+    // Arrange
+    // -> Order.invoices
+    //    https://docs.saleor.io/api-reference/orders/objects/order
+    const description = `List of order invoices. Can be fetched for orders created in Saleor 3.2 and later, for other orders requires one of the following permissions: MANAGE_ORDERS, OWNER.`;
+    // Act
+    const { permissions, isOneOfRequired } = extractPermissions(description);
+
+    // Assert
+    expect(isOneOfRequired).toBe(true);
+    expect(permissions).toHaveLength(2);
+    expect(permissions[1]).toEqual("OWNER");
+  });
 });