Hide Set as Authenticated Item/Add Authenticated Item button if t…

…he if the relationship field already has the authed item (#6948)
keystonejs · Nov 17, 2021 · 7a74500 · 7a74500
1 parent 7485386
commit 7a74500
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/.changeset/witty-fishes-mix.md b/.changeset/witty-fishes-mix.md
@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': patch
+---
+
+The `Set as Authenticated Item`/`Add Authenticated Item` button is now hidden if the relationship field already has the authenticated item.
diff --git a/packages/keystone/src/fields/types/relationship/views/index.tsx b/packages/keystone/src/fields/types/relationship/views/index.tsx
@@ -156,6 +156,8 @@ export const Field = ({
     );
   }
 
+  const authenticatedItem = keystone.authenticatedItem;
+
   return (
     <FieldContainer as="fieldset">
       <FieldLabel as="legend">{field.label}</FieldLabel>
@@ -206,33 +208,34 @@ export const Field = ({
                   Create related {foreignList.singular}
                 </Button>
               )}
-              {keystone.authenticatedItem.state === 'authenticated' &&
-                keystone.authenticatedItem.listKey === field.refListKey && (
+              {authenticatedItem.state === 'authenticated' &&
+                authenticatedItem.listKey === field.refListKey &&
+                (value.kind === 'many'
+                  ? value.value.find(x => x.id === authenticatedItem.id) === undefined
+                  : value.value?.id !== authenticatedItem.id) && (
                   <Button
                     size="small"
                     isDisabled={onChange === undefined}
                     onClick={() => {
-                      if (keystone.authenticatedItem.state === 'authenticated') {
-                        const val = {
-                          label: keystone.authenticatedItem.label,
-                          id: keystone.authenticatedItem.id,
-                        };
-                        if (value.kind === 'many') {
-                          onChange({
-                            ...value,
-                            value: [...value.value, val],
-                          });
-                        } else {
-                          onChange({
-                            ...value,
-                            value: val,
-                          });
-                        }
+                      const val = {
+                        label: authenticatedItem.label,
+                        id: authenticatedItem.id,
+                      };
+                      if (value.kind === 'many') {
+                        onChange({
+                          ...value,
+                          value: [...value.value, val],
+                        });
+                      } else {
+                        onChange({
+                          ...value,
+                          value: val,
+                        });
                       }
                     }}
                   >
                     {value.kind === 'many' ? 'Add ' : 'Set as '}
-                    {keystone.authenticatedItem.label}
+                    {authenticatedItem.label}
                   </Button>
                 )}
               {!!(value.kind === 'many'