Fix branch selector display revision if selected instead of first branch (#1767)

The select component displays the first option if the value is not part of the options. This behaviour breaks the BranchSelector which uses Select since version 2.22.0 (before it used the deprecated DropDown component). The BranchSelector has to display the revision if one is selected, which is not part of the options.
This change will add a addValueToOptions property to the Select component and restore the old behaviour.

scm-ui/ui-components/src/forms/Select.stories.tsx

@@ -37,11 +37,11 @@ const Ref: FC = () => {
       <Select
         options={[
           { label: "foo", value: "true" },
-          { label: "bar", value: "false" }
+          { label: "bar", value: "false" },
         ]}
         value={selected}
         label={"Ref Radio Button"}
-        onChange={e => setSelected(e.target.value)}
+        onChange={(e) => setSelected(e.target.value)}
         ref={ref}
       />
       <Button
@@ -80,7 +80,7 @@ const ReactHookForm: FC = () => {
         <Select
           options={[
             { label: "Yes", value: "true" },
-            { label: "No", value: "false" }
+            { label: "No", value: "false" },
           ]}
           label="Remember Me"
           {...register("rememberMe")}
@@ -88,7 +88,7 @@ const ReactHookForm: FC = () => {
         <Select
           options={[
             { label: "Yes", value: "true" },
-            { label: "No", value: "false" }
+            { label: "No", value: "false" },
           ]}
           label="Scramble Password"
           {...register("scramblePassword")}
@@ -96,7 +96,7 @@ const ReactHookForm: FC = () => {
         <Select
           options={[
             { label: "Yes", value: "true" },
-            { label: "No", value: "false" }
+            { label: "No", value: "false" },
           ]}
           label="Disabled wont be submitted"
           defaultValue="false"
@@ -106,7 +106,7 @@ const ReactHookForm: FC = () => {
         <Select
           options={[
             { label: "Yes", value: "true" },
-            { label: "No", value: "false" }
+            { label: "No", value: "false" },
           ]}
           label="Readonly will be submitted"
           readOnly={true}
@@ -136,7 +136,7 @@ const LegacyEvents: FC = () => {
       <Select
         options={[
           { label: "Yes", value: "true" },
-          { label: "No", value: "false" }
+          { label: "No", value: "false" },
         ]}
         onChange={setValue}
       />
@@ -145,8 +145,64 @@ const LegacyEvents: FC = () => {
   );
 };
 
+const AddNoExistingValue: FC = () => {
+  const [value, setValue] = useState<string>("uscss-prometheus");
+
+  return (
+    <>
+      <Select
+        options={[
+          {
+            label: "Millennium Falcon",
+            value: "millennium-falcon",
+          },
+          {
+            label: "Razor Crest",
+            value: "razor-crest",
+          },
+        ]}
+        onChange={setValue}
+        addValueToOptions={true}
+        value={value}
+      />
+      <div className="mt-3">{value}</div>
+    </>
+  );
+};
+
+const PreselectOption: FC = () => {
+  const [value, setValue] = useState<string>("razor-crest");
+
+  return (
+    <>
+      <Select
+        options={[
+          {
+            label: "Millennium Falcon",
+            value: "millennium-falcon",
+          },
+          {
+            label: "Razor Crest",
+            value: "razor-crest",
+          },
+          {
+            label: "USCSS Prometheus",
+            value: "uscss-prometheus"
+          }
+        ]}
+        onChange={setValue}
+        value={value}
+      />
+      <div className="mt-3">{value}</div>
+    </>
+  );
+};
+
 storiesOf("Forms|Select", module)
-  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .add("Add no existing value", () => <AddNoExistingValue />)
   .add("Ref", () => <Ref />)
   .add("Legacy Events", () => <LegacyEvents />)
-  .add("ReactHookForm", () => <ReactHookForm />);
+  .add("ReactHookForm", () => <ReactHookForm />)
+  .add("Preselect option", () => <PreselectOption />)
+;

scm-ui/ui-components/src/forms/Select.tsx

@@ -45,6 +45,7 @@ type BaseProps = {
   defaultValue?: string;
   readOnly?: boolean;
   className?: string;
+  addValueToOptions?: boolean;
 };
 
 const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
@@ -58,10 +59,17 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   testId,
   readOnly,
   className,
+  options,
+  addValueToOptions,
   ...props
 }) => {
   const field = useInnerRef(props.innerRef);
 
+  let opts = options;
+  if (value && addValueToOptions && options.some((o) => o.value === value)) {
+    opts = [{ label: value, value }, ...options];
+  }
+
   const handleInput = (event: ChangeEvent<HTMLSelectElement>) => {
     if (props.onChange) {
       if (isUsingRef<BaseProps, HTMLSelectElement, string>(props)) {
@@ -113,7 +121,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           disabled={disabled}
           {...createAttributesForTesting(testId)}
         >
-          {props.options.map((opt) => {
+          {opts.map((opt) => {
             return (
               <option value={opt.value} key={"KEY_" + opt.value}>
                 {opt.label}