change it to a controlled component

bitovi · Feb 6, 2025 · a849b4e · a849b4e
1 parent aca54e7
commit a849b4e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/public/react/SettingsSidebar/components/IssueSource/IssueSource.tsx b/public/react/SettingsSidebar/components/IssueSource/IssueSource.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState, FC, useId } from "react";
+import React, { useCallback, useEffect, useMemo, useState, FC } from "react";
 import Button from "@atlaskit/button/new";
 import { useCanObservable, CanPromise } from "../../../hooks/useCanObservable/useCanObservable";
 import type { JiraIssue } from "../../../../jira/shared/types";
@@ -44,7 +44,6 @@ const useRawIssuesRequestData = () => {
 
 const IssueSource: FC<IssueSourceProps> = () => {
   const jiraHelpers = useJira();
-  const statusFilterId = useId();
   const {
     issuesPromise,
     issuesPromisePending,
@@ -70,6 +69,20 @@ const IssueSource: FC<IssueSourceProps> = () => {
     statusesToExcludeFromRouteData
   );
 
+  const statusesToExcludeOptions = useMemo(
+    () =>
+      statusesToExclude.map((status) => ({
+        label: status,
+        value: status,
+      })),
+    [statusesToExclude]
+  );
+  console.log(
+    "statusesToExclude: ",
+    statusesToExclude,
+    "statusesToExcludeFromRouteData: ",
+    statusesToExcludeFromRouteData
+  );
   const applyJql = useCallback(() => {
     routeData.assign({
       jql,
@@ -184,6 +197,7 @@ const IssueSource: FC<IssueSourceProps> = () => {
       <ExcludedStatusSelect
         label="Statuses to exclude from all issue types"
         placeholder="Select statuses"
+        value={statusesToExcludeOptions}
         onChange={handleExcludedStatusChange}
       />
 

diff --git a/...t/SettingsSidebar/components/IssueSource/components/StatusSelect/ExcludedStatusSelect.tsx b/...t/SettingsSidebar/components/IssueSource/components/StatusSelect/ExcludedStatusSelect.tsx
@@ -4,7 +4,12 @@ import { Label } from "@atlaskit/form";
 import { ExcludedStatusSelectProps } from "./types";
 import useExcludedStatusSelect from "./hooks/useExcludedStatusSelect";
 
-const ExcludedStatusSelect: FC<ExcludedStatusSelectProps> = ({ label, placeholder, onChange }) => {
+const ExcludedStatusSelect: FC<ExcludedStatusSelectProps> = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+}) => {
   const id = useId();
 
   const { allStatusesOptions } = useExcludedStatusSelect();
@@ -15,6 +20,7 @@ const ExcludedStatusSelect: FC<ExcludedStatusSelectProps> = ({ label, placeholde
       <Select
         id={id}
         options={allStatusesOptions}
+        value={value}
         isMulti
         isSearchable
         placeholder={placeholder}

diff --git a/public/react/SettingsSidebar/components/IssueSource/components/StatusSelect/types.ts b/public/react/SettingsSidebar/components/IssueSource/components/StatusSelect/types.ts
@@ -8,5 +8,6 @@ export interface ExcludedStatusSelectOption {
 export interface ExcludedStatusSelectProps {
   label: string;
   placeholder: string;
+  value: MultiValue<ExcludedStatusSelectOption>;
   onChange?: (value: MultiValue<ExcludedStatusSelectOption>) => void;
 }