From dd217750d7481f07b7487eecb4b7c643ec0d178d Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Thu, 1 Dec 2022 18:01:10 -0500
Subject: [PATCH] feat: retrofits DocumentDrawer into relationship multi-select

---
 .../Relationship/MultiValueLabel/index.scss   | 20 ++++++++
 .../Relationship/MultiValueLabel/index.tsx    | 46 +++++++++++++++++++
 .../forms/field-types/Relationship/index.tsx  |  4 ++
 .../forms/field-types/Relationship/types.ts   |  6 ++-
 4 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss
 create mode 100644 src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx

diff --git a/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss
new file mode 100644
index 0000000000..0e1341ede9
--- /dev/null
+++ b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss
@@ -0,0 +1,20 @@
+@import '../../../../../scss/styles.scss';
+
+.multi-value-label {
+  display: flex;
+
+  &__drawer-toggler {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: base(0.25);
+
+    &:hover {
+      background-color: var(--theme-error-150);
+    }
+  }
+}
diff --git a/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx
new file mode 100644
index 0000000000..90dd41f731
--- /dev/null
+++ b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx
@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react';
+import { components, MultiValueProps } from 'react-select';
+import { useDocumentDrawer } from '../../../../elements/DocumentDrawer';
+import Edit from '../../../../icons/Edit';
+import { Value, ValueAsObject } from '../types';
+import './index.scss';
+
+const baseClass = 'multi-value-label';
+
+export const CustomEditButton: React.FC<{
+  data: ValueAsObject;
+}> = ({ data }) => {
+  const { DocumentDrawer, DocumentDrawerToggler } = useDocumentDrawer();
+  return (
+    <Fragment>
+      <DocumentDrawerToggler
+        collection={data.relationTo}
+        id={data.value.toString()}
+        className={`${baseClass}__drawer-toggler`}
+      >
+        <Edit />
+      </DocumentDrawerToggler>
+      <DocumentDrawer
+        collection={data.relationTo}
+        id={data.value.toString()}
+      />
+    </Fragment>
+  );
+};
+
+export const MultiValueLabel: React.FC<MultiValueProps<{
+  data: Value
+}>> = (props) => {
+  const {
+    data,
+  } = props;
+
+  return (
+    <div className={baseClass}>
+      <components.MultiValueLabel {...props} />
+      {typeof data === 'object' && (
+        <CustomEditButton data={data as unknown as ValueAsObject} />
+      )}
+    </div>
+  );
+};
diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx
index fc04cb1134..0b73feeeec 100644
--- a/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -23,6 +23,7 @@ import wordBoundariesRegex from '../../../../../utilities/wordBoundariesRegex';
 import { AddNewRelation } from './AddNew';
 import { findOptionsByValue } from './findOptionsByValue';
 import { GetFilterOptions } from './GetFilterOptions';
+import { MultiValueLabel } from './MultiValueLabel';
 
 import './index.scss';
 
@@ -368,6 +369,9 @@ const Relationship: React.FC<Props> = (props) => {
             isMulti={hasMany}
             isSortable={isSortable}
             isLoading={isLoading}
+            components={{
+              MultiValueLabel,
+            }}
             onMenuOpen={() => {
               if (!hasLoadedFirstPage) {
                 setIsLoading(true);
diff --git a/src/admin/components/forms/field-types/Relationship/types.ts b/src/admin/components/forms/field-types/Relationship/types.ts
index 24f46113ce..ff4e18b89e 100644
--- a/src/admin/components/forms/field-types/Relationship/types.ts
+++ b/src/admin/components/forms/field-types/Relationship/types.ts
@@ -19,10 +19,12 @@ export type OptionGroup = {
   options: Option[]
 }
 
-export type Value = {
+export type ValueAsObject = {
   relationTo: string
   value: string | number
-} | string | number
+}
+
+export type Value = ValueAsObject | string | number
 
 type CLEAR = {
   type: 'CLEAR'