feat: adjust editor position

frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css

@@ -55,5 +55,6 @@
 .sf-metadata-delete-collaborator .collaborator .collaborator-remove {
   height: 14px;
   width: 14px;
-  margin-left: 2px;
+  position: relative;
+  left: 2px;
 }

frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js

@@ -11,9 +11,11 @@ import DeleteCollaborator from './delete-collaborator';
 import './index.css';
 
 const CollaboratorEditor = forwardRef(({
+  height,
   saveImmediately = false,
   column,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   onClose,
@@ -178,7 +180,8 @@ const CollaboratorEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = `${window.innerHeight - bottom}px`;
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && collaboratorItemRef.current) {
@@ -238,8 +241,10 @@ const CollaboratorEditor = forwardRef(({
 
   }, [displayCollaborators, searchValue, value, highlightIndex, onMenuMouseEnter, onMenuMouseLeave, onSelectCollaborator]);
 
+  const isBeyondScreen = editorPosition.left + 300 > window.innerWidth;
+
   return (
-    <div className="sf-metadata-collaborator-editor" style={{ top: -38 }} ref={editorRef}>
+    <div className="sf-metadata-collaborator-editor" style={{ top: -38, left: isBeyondScreen ? 'unset' : 0, right: isBeyondScreen ? -column.width : 'unset' }} ref={editorRef}>
       <DeleteCollaborator value={value} onDelete={onDeleteCollaborator} />
       <div className="sf-metadata-search-collaborator-options">
         <SearchInput placeholder={gettext('Search collaborators')} onKeyDown={onKeyDown} onChange={onChangeSearch} autoFocus={true} className="sf-metadata-search-collaborators" />
@@ -253,8 +258,10 @@ const CollaboratorEditor = forwardRef(({
 
 CollaboratorEditor.propTypes = {
   saveImmediately: PropTypes.bool,
+  height: PropTypes.number,
   column: PropTypes.object,
   value: PropTypes.array,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onClose: PropTypes.func,
   onPressTab: PropTypes.func,

frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js

@@ -22,7 +22,7 @@ class PopupEditorContainer extends React.Component {
     super(props);
     const { column, width, height, left, top } = this.props;
     let additionalStyles = {};
-    if (column.type === CellType.SINGLE_SELECT) {
+    if (column.type === CellType.SINGLE_SELECT || column.type === CellType.MULTIPLE_SELECT) {
       additionalStyles = { width, height };
     }
     this.state = {

frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css

@@ -10,13 +10,17 @@
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
   margin-top: 5px;
   margin-bottom: 5px;
+  margin-right: 10px;
   align-items: center;
+  max-width: 100% !important;
+  overflow: hidden
 }
 
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-delete-select-remove {
   height: 14px;
   width: 14px;
-  margin-left: 2px;
+  position: relative;
+  left: 2px;
 }
 
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-icon-x-01 {

frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js

@@ -20,8 +20,6 @@ const DeleteOption = ({ value, options, onDelete }) => {
     return [...selectedOptions, ...invalidOptions];
   }, [options, value]);
 
-  if (displayOptions.length === 0) return null;
-
   return (
     <div className="sf-metadata-delete-select-options">
       {displayOptions.map(option => {

frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js

@@ -11,9 +11,11 @@ import DeleteOption from './delete-options';
 import './index.css';
 
 const MultipleSelectEditor = forwardRef(({
+  height,
   saveImmediately,
   column,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   modifyColumnData,
@@ -179,7 +181,8 @@ const MultipleSelectEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && selectItemRef.current) {
@@ -269,8 +272,10 @@ const MultipleSelectEditor = forwardRef(({
 });
 
 MultipleSelectEditor.propTypes = {
+  height: PropTypes.number,
   column: PropTypes.object,
   value: PropTypes.array,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onPressTab: PropTypes.func,
 };

frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js

@@ -15,6 +15,7 @@ const SingleSelectEditor = forwardRef(({
   columns,
   record,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   modifyColumnData,
@@ -175,7 +176,8 @@ const SingleSelectEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && selectItemRef.current) {
@@ -269,6 +271,7 @@ SingleSelectEditor.propTypes = {
   columns: PropTypes.array,
   record: PropTypes.object,
   value: PropTypes.string,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onPressTab: PropTypes.func,
 };

frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css

@@ -12,10 +12,6 @@
   padding: 2px 6px;
 }
 
-.sf-metadata-multiple-select-property-detail-editor .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
-  margin-right: 10px;
-}
-
 .sf-metadata-multiple-select-property-editor-popover .sf-metadata-delete-select-options {
   display: none;
 }

frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js

@@ -84,6 +84,13 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
     );
   }, [showEditor, onCommit, record, value, modifyColumnData, fields, field]);
 
+  const isEmpty = useMemo(() => {
+    if (!Array.isArray(value) || value.length === 0) return true;
+    const selectedOptions = options.filter((option) => value.includes(option.id) || value.includes(option.name));
+    const invalidOptionIds = value.filter(optionId => optionId && !options.find(o => o.id === optionId || o.name === optionId));
+    return selectedOptions.length + invalidOptionIds.length === 0;
+  }, [options, value]);
+
   return (
     <div
       className="sf-metadata-property-detail-editor sf-metadata-single-select-property-detail-editor sf-metadata-multiple-select-property-detail-editor"
@@ -91,7 +98,7 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
       ref={ref}
       onClick={openEditor}
     >
-      <DeleteOptions value={value} options={options} onDelete={deleteOption} />
+      {!isEmpty && (<DeleteOptions value={value} options={options} onDelete={deleteOption} />)}
       {renderEditor()}
     </div>
   );