redoing

src/main/resources/i18n/messages.properties

@@ -361,6 +361,7 @@ ShareLayout.previous=Previous
 ShareLayout.next=Next
 ShareNoSamples.description=You have no samples selected to share, please go back to the project samples page and select some samples
 ShareNoSamples.link=Go to Project Samples Page
+ShareProject.label.id=id: {0}
 ShareSamples.title=Share Samples with Another Project
 ShareSamples.projects=Select a project to share samples with
 ShareSamples.ready=These samples are ready to copy

src/main/webapp/resources/js/pages/projects/share/ShareProject.jsx

@@ -3,8 +3,6 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setProject } from "./shareSlice";
 
-const { Text } = Typography;
-
 /**
  * React component for selecting the project to share a sample with.
  * @param {list} projects - list of projects that the user is a manager on
@@ -14,48 +12,70 @@ const { Text } = Typography;
 export function ShareProject({ projects }) {
   const dispatch = useDispatch();
   const { targetProject } = useSelector((state) => state.shareReducer);
-  const [selectList, setSelectList] = React.useState(() => projects);
+  const [options, setOptions] = React.useState(() => formatOptions(projects));
+
+  function formatOptions(values) {
+    if (!values) return [];
+    return values.map((project) => ({
+      label: (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          <Typography.Text ellipsis={{ tooltip: true }}>
+            {project.name}
+          </Typography.Text>
+          <Tag style={{ lineHeight: "35px" }}>
+            {i18n("ShareProject.label.id", project.identifier)}
+          </Tag>
+        </div>
+      ),
+      value: project.identifier,
+      selected: project.name,
+    }));
+  }
+
+  React.useEffect(() => {
+    setOptions(formatOptions(projects));
+  }, [projects]);
 
   const handleSearch = (value) => {
     const lowerValue = value.toLowerCase();
-    const filteredProjects = projects.filter((project) =>
-      project.name.toLowerCase().includes(lowerValue)
+    const available = projects.filter(
+      (project) =>
+        project.name.toLowerCase().includes(lowerValue) ||
+        project.identifier === value
     );
-    setSelectList(filteredProjects);
+    const formatted = formatOptions(available);
+    setOptions(formatted);
   };
 
   function onChange(projectId) {
     const project = projects.find((p) => p.identifier === projectId);
     dispatch(setProject(project));
   }
 
-  const options = selectList.map((project) => (
-    <Select.Option key={project.identifier} value={project.identifier}>
-      <>
-        <Text>{project.name}</Text>
-        <Tag style={{ float: "right" }}>{project.identifier}</Tag>
-      </>
-    </Select.Option>
-  ));
-
   return (
     <Space direction="vertical" style={{ display: "block" }}>
       <Typography.Title level={5}>
         {i18n("ShareSamples.projects")}
       </Typography.Title>
       <Select
+        optionLabelProp="selected"
         autoFocus
         showSearch
         size="large"
         style={{ width: `100%` }}
+        options={options}
         className="t-share-project"
         filterOption={false}
         onSearch={handleSearch}
         onChange={onChange}
         defaultValue={targetProject ? targetProject.identifier : null}
-      >
-        {options}
-      </Select>
+      />
     </Space>
   );
 }