From a44e96a278955f5c24a96623d5397683dd8da865 Mon Sep 17 00:00:00 2001
From: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
Date: Mon, 27 Apr 2020 09:53:34 +0200
Subject: [PATCH] Update chosen pills

---
 .../AccountPermissionGroups.stories.tsx       |  71 ++++
 .../AccountPermissionGroups.tsx               |   4 +-
 .../MultiAutocompleteSelectField.tsx          |  20 +-
 .../__snapshots__/Stories.test.ts.snap        | 307 ++++++++++++++++++
 4 files changed, 391 insertions(+), 11 deletions(-)
 create mode 100644 src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx

diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx
new file mode 100644
index 000000000..65bb2ffe8
--- /dev/null
+++ b/src/components/AccountPermissionGroups/AccountPermissionGroups.stories.tsx
@@ -0,0 +1,71 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import Decorator from "@saleor/storybook/Decorator";
+import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups";
+import { AccountErrorCode } from "@saleor/types/globalTypes";
+import { StaffErrorFragment } from "@saleor/staff/types/StaffErrorFragment";
+import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
+import AccountPermissionGroups, { AccountPermissionGroupsProps } from ".";
+
+const availablePermissionGroups: SearchPermissionGroups_search_edges_node[] = [
+  {
+    __typename: "Group",
+    id: "R3JvdXA6MQ==",
+    name: "Unmanagable by user",
+    userCanManage: false
+  },
+  {
+    __typename: "Group",
+    id: "R3JvdXA6Mg==",
+    name: "Default group",
+    userCanManage: true
+  },
+  {
+    __typename: "Group",
+    id: "R3JvdXA6Mz==",
+    name: "Translators",
+    userCanManage: false
+  },
+  {
+    __typename: "Group",
+    id: "R3JvdXA6My==",
+    name: "CMS",
+    userCanManage: true
+  }
+];
+
+const displayValues: MultiAutocompleteChoiceType[] = [
+  { disabled: true, label: "Unmanagable by user", value: "R3JvdXA6MQ==" },
+  { disabled: false, label: "Default group", value: "R3JvdXA6Mg==" }
+];
+
+const formData = {
+  permissionGroups: ["R3JvdXA6MQ==", "R3JvdXA6Mg=="]
+};
+
+const errors: StaffErrorFragment[] = [
+  {
+    __typename: "StaffError",
+    code: AccountErrorCode.OUT_OF_SCOPE_GROUP,
+    field: "addGroups"
+  }
+];
+
+const props: AccountPermissionGroupsProps = {
+  availablePermissionGroups,
+  disabled: false,
+  displayValues,
+  errors: [],
+  formData,
+  hasMore: false,
+  initialSearch: "",
+  loading: false,
+  onChange: () => undefined,
+  onFetchMore: () => undefined,
+  onSearchChange: () => undefined
+};
+
+storiesOf("Generics / Account Permission Groups Widget", module)
+  .addDecorator(Decorator)
+  .add("default", () => <AccountPermissionGroups {...props} />)
+  .add("error", () => <AccountPermissionGroups {...props} errors={errors} />);
diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
index 2123b5cf7..812daa4fb 100644
--- a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
+++ b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
@@ -12,7 +12,9 @@ import MultiAutocompleteSelectField, {
   MultiAutocompleteChoiceType
 } from "../MultiAutocompleteSelectField";
 
-interface AccountPermissionGroupsProps extends FetchMoreProps, SearchPageProps {
+export interface AccountPermissionGroupsProps
+  extends FetchMoreProps,
+    SearchPageProps {
   formData: {
     permissionGroups: string[];
   };
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index e7fdbf33a..31f07ccd6 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -53,10 +53,10 @@ const useStyles = makeStyles(
     },
     disabledChipInner: {
       "& svg": {
-        color: theme.palette.secondary.contrastText
+        color: theme.palette.grey[200]
       },
       alignItems: "center",
-      background: fade(theme.palette.secondary.main, 0.8),
+      background: fade(theme.palette.grey[400], 0.8),
       borderRadius: 18,
       color: theme.palette.primary.contrastText,
       display: "flex",
@@ -194,14 +194,14 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
               <Typography className={classes.chipLabel}>
                 {value.label}
               </Typography>
-              {!value.disabled && (
-                <IconButton
-                  className={classes.chipClose}
-                  onClick={() => handleSelect(value.value)}
-                >
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-              )}
+
+              <IconButton
+                className={classes.chipClose}
+                disabled={value.disabled}
+                onClick={() => handleSelect(value.value)}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
             </div>
           </div>
         ))}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 2fc6dce8d..256772bbf 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -48,6 +48,291 @@ exports[`Storyshots Discounts / Select countries default 1`] = `
 />
 `;
 
+exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MultiAutocompleteSelectField-container-id"
+    data-tc="permissionGroups"
+  >
+    <div
+      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+    >
+      <label
+        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+        data-shrink="false"
+      >
+        Permission groups
+      </label>
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+        role="combobox"
+      >
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+          type="text"
+          value=""
+        />
+        <div>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <g
+              style="fill-rule:evenodd"
+            >
+              <path
+                d="M7 10l5 5 5-5z"
+              />
+            </g>
+          </svg>
+        </div>
+        <fieldset
+          aria-hidden="true"
+          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+          style="padding-left:8px"
+        >
+          <legend
+            class="PrivateNotchedOutline-legend-id"
+            style="width:0.01px"
+          >
+            <span>
+              ​
+            </span>
+          </legend>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <div
+    class="MultiAutocompleteSelectField-chipContainer-id"
+  >
+    <div
+      class="MultiAutocompleteSelectField-chip-id"
+    >
+      <div
+        class="MultiAutocompleteSelectField-disabledChipInner-id"
+      >
+        <div
+          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
+        >
+          Unmanagable by user
+        </div>
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MultiAutocompleteSelectField-chip-id"
+    >
+      <div
+        class="MultiAutocompleteSelectField-chipInner-id"
+      >
+        <div
+          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
+        >
+          Default group
+        </div>
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MultiAutocompleteSelectField-container-id"
+    data-tc="permissionGroups"
+  >
+    <div
+      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+    >
+      <label
+        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+        data-shrink="false"
+      >
+        Permission groups
+      </label>
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+        role="combobox"
+      >
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+          type="text"
+          value=""
+        />
+        <div>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <g
+              style="fill-rule:evenodd"
+            >
+              <path
+                d="M7 10l5 5 5-5z"
+              />
+            </g>
+          </svg>
+        </div>
+        <fieldset
+          aria-hidden="true"
+          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+          style="padding-left:8px"
+        >
+          <legend
+            class="PrivateNotchedOutline-legend-id"
+            style="width:0.01px"
+          >
+            <span>
+              ​
+            </span>
+          </legend>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <div
+    class="MultiAutocompleteSelectField-chipContainer-id"
+  >
+    <div
+      class="MultiAutocompleteSelectField-chip-id"
+    >
+      <div
+        class="MultiAutocompleteSelectField-disabledChipInner-id"
+      >
+        <div
+          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
+        >
+          Unmanagable by user
+        </div>
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MultiAutocompleteSelectField-chip-id"
+    >
+      <div
+        class="MultiAutocompleteSelectField-chipInner-id"
+      >
+        <div
+          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
+        >
+          Default group
+        </div>
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
+  >
+    Group is out of your permission scope
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / ActionDialog default 1`] = `
 <div
   style="padding:24px"
@@ -137183,6 +137468,28 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
                     >
                       Full Access
                     </div>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
                   </div>
                 </div>
                 <div