feat: retrofits DocumentDrawer into relationship multi-select

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);
+    }
+  }
+}

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>
+  );
+};

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);

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'