From a7bb67f36b3bae40d898b7980184fc1fe2551b46 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 16 Aug 2021 14:54:50 +0200
Subject: [PATCH] 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.
---
 gradle/changelog/branch_selector.yaml         |  2 +
 scm-ui/ui-components/src/BranchSelector.tsx   |  1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 75 +++++++++++++++++++
 .../src/forms/Select.stories.tsx              | 74 +++++++++++++++---
 scm-ui/ui-components/src/forms/Select.tsx     | 10 ++-
 5 files changed, 152 insertions(+), 10 deletions(-)
 create mode 100644 gradle/changelog/branch_selector.yaml

diff --git a/gradle/changelog/branch_selector.yaml b/gradle/changelog/branch_selector.yaml
new file mode 100644
index 0000000000..89b6c9b1bb
--- /dev/null
+++ b/gradle/changelog/branch_selector.yaml
@@ -0,0 +1,2 @@
+- type: Fixed
+  description: Branch selector display revision if selected instead of first branch ([#1767](https://github.com/scm-manager/scm-manager/pull/1767))
diff --git a/scm-ui/ui-components/src/BranchSelector.tsx b/scm-ui/ui-components/src/BranchSelector.tsx
index 27cd0a414c..062221ce57 100644
--- a/scm-ui/ui-components/src/BranchSelector.tsx
+++ b/scm-ui/ui-components/src/BranchSelector.tsx
@@ -64,6 +64,7 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
                 onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
                 disabled={!!disabled}
                 value={selectedBranch}
+                addValueToOptions={true}
               />
             </MinWidthControl>
           </NoBottomMarginField>
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index d07a1eef3f..b7e41bfa8c 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -56524,6 +56524,41 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Select Add no existing value 1`] = `
+Array [
+  <fieldset
+    className="field"
+  >
+    
+    <div
+      className="control select"
+    >
+      <select
+        onBlur={[Function]}
+        onChange={[Function]}
+        value="uscss-prometheus"
+      >
+        <option
+          value="millennium-falcon"
+        >
+          Millennium Falcon
+        </option>
+        <option
+          value="razor-crest"
+        >
+          Razor Crest
+        </option>
+      </select>
+    </div>
+  </fieldset>,
+  <div
+    className="mt-3"
+  >
+    uscss-prometheus
+  </div>,
+]
+`;
+
 exports[`Storyshots Forms|Select Legacy Events 1`] = `
 Array [
   <fieldset
@@ -56556,6 +56591,46 @@ Array [
 ]
 `;
 
+exports[`Storyshots Forms|Select Preselect option 1`] = `
+Array [
+  <fieldset
+    className="field"
+  >
+    
+    <div
+      className="control select"
+    >
+      <select
+        onBlur={[Function]}
+        onChange={[Function]}
+        value="razor-crest"
+      >
+        <option
+          value="millennium-falcon"
+        >
+          Millennium Falcon
+        </option>
+        <option
+          value="razor-crest"
+        >
+          Razor Crest
+        </option>
+        <option
+          value="uscss-prometheus"
+        >
+          USCSS Prometheus
+        </option>
+      </select>
+    </div>
+  </fieldset>,
+  <div
+    className="mt-3"
+  >
+    razor-crest
+  </div>,
+]
+`;
+
 exports[`Storyshots Forms|Select ReactHookForm 1`] = `
 <form
   onSubmit={[Function]}
diff --git a/scm-ui/ui-components/src/forms/Select.stories.tsx b/scm-ui/ui-components/src/forms/Select.stories.tsx
index d3ce8b38ff..1a79a00fcb 100644
--- a/scm-ui/ui-components/src/forms/Select.stories.tsx
+++ b/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 />)
+;
diff --git a/scm-ui/ui-components/src/forms/Select.tsx b/scm-ui/ui-components/src/forms/Select.tsx
index 06d9a3cea1..dbf25b3b29 100644
--- a/scm-ui/ui-components/src/forms/Select.tsx
+++ b/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}