Displaying identifiers for project drop downs

CHANGELOG.md

@@ -16,6 +16,7 @@
 * [REST]: Updated synchronizing of sample data to remove sequencing objects and assemblies that no longer exist on the remote sample. See [PR 1345](https://github.com/phac-nml/irida/pull/1345)
 * [UI]: Fixed issue with filtering samples by files using a windows encoded text file causing sample name truncation. See [PR 1346](https://github.com/phac-nml/irida/pull/1346)
 * [Developer]: Fixed deleting a project with project subscriptions. See [PR 1348](https://github.com/phac-nml/irida/pull/1348)
+* [Developer]: Add identifier to project drop-downs. See [PR 1352](https://github.com/phac-nml/irida/pull/1352)
 
 ## [22.05.5] - 2022/06/28
 * [UI]: Fixed bug preventing export of project samples table due to invalid url. [PR 1331](https://github.com/phac-nml/irida/pull/1331)

src/main/resources/i18n/messages.properties

@@ -692,6 +692,9 @@ project.nav.details=Recent Activity
 project.nav.settings=Settings
 project.nav.samples.import-metadata=Import Sample Metadata
 
+# Project select
+ProjectSelect.label.id=id: {0}
+
 # KEPT FOR LEGACY PURPOSES (still used on user_details.html and groups.html)
 project.table.collaborator.name=Name
 project.table.collaborator.role=Project Role

src/main/webapp/resources/js/components/project/ProjectSelect.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Select, SelectProps, Tag, Typography } from "antd";
+
+export type Project = { identifier: number; name: string };
+
+export interface ProjectSelectProps extends SelectProps {
+  projects: Project[];
+}
+
+/**
+ * React component for displaying a project drop-down menu.
+ * @param {list} projects - list of projects that is to be displayed
+ * @param {function} onChange - function that is called when select option has changed
+ * @param {number} defaultValue - project identifier of the project that is to be displayed by default
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function ProjectSelect({
+  projects,
+  onChange = undefined,
+  defaultValue = null,
+}: ProjectSelectProps): JSX.Element {
+  const [options, setOptions] = React.useState(() => formatOptions(projects));
+
+  function formatOptions(values: Project[]) {
+    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>{i18n("ProjectSelect.label.id", project.identifier)}</Tag>
+        </div>
+      ),
+      value: project.identifier,
+      selected: project.name,
+    }));
+  }
+
+  React.useEffect(() => {
+    setOptions(formatOptions(projects));
+  }, [projects]);
+
+  const handleSearch = (value: string) => {
+    const lowerValue = value.toLowerCase();
+
+    const available = projects.filter(
+      (project) =>
+        project.name.toLowerCase().includes(lowerValue) ||
+        project.identifier.toString() === value
+    );
+    const formatted = formatOptions(available);
+    setOptions(formatted);
+  };
+
+  return (
+    <Select
+      optionLabelProp="selected"
+      autoFocus
+      showSearch
+      size="large"
+      style={{ width: `100%` }}
+      options={options}
+      className="t-project-select"
+      filterOption={false}
+      onSearch={handleSearch}
+      onChange={onChange}
+      defaultValue={defaultValue}
+    />
+  );
+}

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

@@ -1,7 +1,8 @@
-import { Select, Space, Typography } from "antd";
+import { Space, Typography } from "antd";
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { ProjectSelect } from "../../../components/project/ProjectSelect";
 import { setProject } from "./shareSlice";
+import { useDispatch, useSelector } from "react-redux";
 
 /**
  * React component for selecting the project to share a sample with.
@@ -12,33 +13,6 @@ import { setProject } from "./shareSlice";
 export function ShareProject({ projects }) {
   const dispatch = useDispatch();
   const { targetProject } = useSelector((state) => state.shareReducer);
-  const [options, setOptions] = React.useState(() => formatOptions(projects));
-
-  function formatOptions(values) {
-    if (!values) return [];
-    return values.map((project) => ({
-      label: project.name,
-      value: project.identifier,
-    }));
-  }
-
-  React.useEffect(() => {
-    setOptions(
-      projects.map((project) => ({
-        label: project.name,
-        value: project.identifier,
-      }))
-    );
-  }, [projects]);
-
-  const handleSearch = (value) => {
-    const lowerValue = value.toLowerCase();
-    const available = projects.filter((project) =>
-      project.name.toLowerCase().includes(lowerValue)
-    );
-    const formatted = formatOptions(available);
-    setOptions(formatted);
-  };
 
   function onChange(projectId) {
     const project = projects.find((p) => p.identifier === projectId);
@@ -50,17 +24,10 @@ export function ShareProject({ projects }) {
       <Typography.Title level={5}>
         {i18n("ShareSamples.projects")}
       </Typography.Title>
-      <Select
-        autoFocus
-        showSearch
-        size="large"
-        style={{ width: `100%` }}
-        options={options}
-        className="t-share-project"
-        filterOption={false}
-        onSearch={handleSearch}
+      <ProjectSelect
+        projects={projects}
         onChange={onChange}
-        defaultValue={targetProject ? targetProject.identifier : null}
+        defaultValue={targetProject?.identifier}
       />
     </Space>
   );

src/test/java/ca/corefacility/bioinformatics/irida/ria/integration/pages/projects/ShareSamplesPage.java

@@ -11,7 +11,7 @@
 import static ca.corefacility.bioinformatics.irida.ria.integration.pages.AbstractPage.waitForTime;
 
 public class ShareSamplesPage {
-	@FindBy(css = ".t-share-project .ant-select-selection-search-input")
+	@FindBy(css = ".t-project-select .ant-select-selection-search-input")
 	private WebElement shareProjectSelect;
 
 	@FindBy(className = "ant-select-dropdown")
@@ -147,15 +147,15 @@ public boolean isShareSingleSuccessDisplayed() {
 	public boolean isSomeSamplesSameIdsWarningDisplayed() {
 		try {
 			return someSamplesSameIdsWarning.isDisplayed();
-		} catch(Exception e) {
+		} catch (Exception e) {
 			return false;
 		}
 	}
 
 	public boolean isSomeSamplesSameNamesWarningDisplayed() {
 		try {
 			return someSamplesSameNamesWarning.isDisplayed();
-		} catch(Exception e) {
+		} catch (Exception e) {
 			return false;
 		}
 	}