Merge pull request #1352 from phac-nml/display-id-for-project-drop-downs

Displaying identifiers for project drop downs

CHANGELOG.md

@@ -16,7 +16,8 @@
 * [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]: Updated OAuth2 implemention to use Spring Security 5 OAuth2 libraries. See [PR 1339](https://github.com/phac-nml/irida/pull/1339)
+* [Developer]: Updated OAuth2 implementation to use Spring Security 5 OAuth2 libraries. See [PR 1339](https://github.com/phac-nml/irida/pull/1339)
+* [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
 
+# SearchByNameAndIdSelect
+SearchByNameAndIdSelect.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/selects/SearchByNameAndIdSelect.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Select, SelectProps, Tag, Typography } from "antd";
+import { LabeledValue } from "antd/lib/select";
+import { IridaBase } from "../../types/irida";
+
+export type SelectListItem = Pick<IridaBase, "id" | "name">;
+export interface SelectListProps extends SelectProps {
+  selectList: SelectListItem[];
+}
+
+/**
+ * React component for displaying a drop-down menu.
+ * @param selectList - list that is to be displayed
+ * @param className - class name of the select list
+ * @param onChange - function that is called when select option has changed
+ * @param defaultValue - identifier of the select list item that is to be displayed by default
+ * @constructor
+ */
+export function SearchByNameAndIdSelect({
+  selectList,
+  onChange,
+  className,
+  defaultValue = null,
+}: SelectListProps): JSX.Element {
+  const [options, setOptions] = React.useState<LabeledValue[]>(() =>
+    formatOptions(selectList)
+  );
+
+  function formatOptions(values: SelectListItem[]) {
+    if (!values) return [];
+    return values.map((selectListItem) => ({
+      label: (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+          }}
+        >
+          <Typography.Text ellipsis={{ tooltip: true }}>
+            {selectListItem.name}
+          </Typography.Text>
+          <Tag>
+            {i18n("SearchByNameAndIdSelect.label.id", selectListItem.id)}
+          </Tag>
+        </div>
+      ),
+      value: selectListItem.id,
+    }));
+  }
+
+  React.useEffect(() => {
+    setOptions(formatOptions(selectList));
+  }, [selectList]);
+
+  const handleSearch = (value: string) => {
+    const lowerValue = value.toLowerCase();
+
+    const available = selectList.filter(
+      (selectItem: { name: string; id: { toString: () => string } }) =>
+        selectItem.name.toLowerCase().includes(lowerValue) ||
+        selectItem.id.toString() === value
+    );
+    const formatted = formatOptions(available);
+    setOptions(formatted);
+  };
+
+  return (
+    <Select
+      autoFocus
+      showSearch
+      size="large"
+      style={{ width: `100%` }}
+      options={options}
+      className={className}
+      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 { SearchByNameAndIdSelect } from "../../../components/selects/SearchByNameAndIdSelect";
 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,14 @@ 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}
+      <SearchByNameAndIdSelect
+        selectList={projects.map((project) => ({
+          id: project.identifier,
+          name: project.name,
+        }))}
         onChange={onChange}
-        defaultValue={targetProject ? targetProject.identifier : null}
+        defaultValue={targetProject?.identifier}
+        className="t-project-select"
       />
     </Space>
   );

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

@@ -11,7 +11,10 @@
 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 shareProjectSelectSearch;
+
+	@FindBy(css = ".t-project-select .ant-select-selection-item")
 	private WebElement shareProjectSelect;
 
 	@FindBy(className = "ant-select-dropdown")
@@ -76,10 +79,14 @@ public static ShareSamplesPage initPage(WebDriver driver) {
 	}
 
 	public void searchForProject(String name) {
-		shareProjectSelect.sendKeys(name);
+		shareProjectSelectSearch.sendKeys(name);
 		projectDropdown.click();
 	}
 
+	public String getProjectSelectText() {
+		return shareProjectSelect.getText();
+	}
+
 	public int getNumberOfSamplesDisplayed() {
 		return shareSampleListItem.size();
 	}
@@ -147,15 +154,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;
 		}
 	}

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

@@ -9,6 +9,7 @@
 
 import com.github.springtestdbunit.annotation.DatabaseSetup;
 
+import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.api.Assertions.*;
 
 @DatabaseSetup("/ca/corefacility/bioinformatics/irida/ria/web/projects/ProjectSamplesView.xml")
@@ -27,6 +28,9 @@ public void testShareSamplesAsManager() {
 		samplesPage.shareSamples();
 
 		assertFalse(shareSamplesPage.isNextButtonEnabled(), "");
+		shareSamplesPage.searchForProject("3");
+		assertThat(shareSamplesPage.getProjectSelectText()).contains("ID: 3");
+		assertTrue(shareSamplesPage.isNextButtonEnabled(), "Next button should be enabled");
 		shareSamplesPage.searchForProject("project2");
 		assertTrue(shareSamplesPage.isNextButtonEnabled(), "Next button should be enabled");
 		shareSamplesPage.gotToNextStep();
@@ -55,7 +59,8 @@ public void testShareSamplesAsManager() {
 		assertTrue(shareSamplesPage.isSomeSamplesSameIdsWarningDisplayed(),
 				"Should display an expandable warning which lists the samples that will not be copied over as the samples with the same identifiers already exist in the target project");
 		shareSamplesPage.expandSameSampleIdsWarning();
-		assertEquals(1, shareSamplesPage.numberOfSamplesWithSameIds(), "There should be one sample listed which exists in the target project with the same identifier");
+		assertEquals(1, shareSamplesPage.numberOfSamplesWithSameIds(),
+				"There should be one sample listed which exists in the target project with the same identifier");
 
 		assertFalse(shareSamplesPage.isSomeSamplesSameNamesWarningDisplayed(),
 				"Shouldn't display an expandable warning which lists the samples that will not be copied over as the samples with the same names but different identifiers exist in the target project");
@@ -112,6 +117,7 @@ public void testShareSamplesAsManager() {
 		assertTrue(shareSamplesPage.isSomeSamplesSameNamesWarningDisplayed(),
 				"Should display an expandable warning which lists the samples that will not be copied over as the samples with the same names but different identifiers exist in the target project");
 		shareSamplesPage.expandSameSampleNamesWarning();
-		assertEquals(1, shareSamplesPage.numberOfSamplesWithSameNames(), "There should be one sample listed which exists in the target project with the same name and different identifier");
+		assertEquals(1, shareSamplesPage.numberOfSamplesWithSameNames(),
+				"There should be one sample listed which exists in the target project with the same name and different identifier");
 	}
 }