Align the release selector design to match other components (#59)

* improve release selector design * Add a tooltip and align dropdown menu design
nrfconnect · Dec 17, 2024 · 2f23be9 · 2f23be9
1 parent 344b3b8
commit 2f23be9
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 10 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/src/app/AppBlock.tsx b/site/src/app/AppBlock.tsx
@@ -98,17 +98,20 @@ function AppBlock({ app, setShowingAppDetails }: Props): JSX.Element {
 
             <div className="flex flex-wrap items-center gap-2">
                 <ReleasesDropDownList app={app}
-                    onReleaseChosen={(branch) => {
+                    onReleaseChosen={
+                    (branch) => {
                         const newQueryParams = new VSCodeQueryParams(app);
-                        newQueryParams.branch = branch;
+                        newQueryParams.branch = branch!;
                         setQueryParams(newQueryParams);
-                    }} />
+                    }}
+                />
 
                 <VSCodeButton queryParams={queryParams} />
 
                 <button
                     className="button bg-[#768692] text-white"
                     onClick={() => setShowingAppDetails({ id: app.id, sha: queryParams.branch })}
+                    title={`Open a guide for the '${app.name}'`}
                 >
                     Instructions <TerminalIcon size={20} />
                 </button>

diff --git a/site/src/app/ReleasesDropDownList.tsx b/site/src/app/ReleasesDropDownList.tsx
@@ -4,26 +4,78 @@
  */
 
 import { NormalisedApp } from '../schema';
-import Select from 'react-select';
+import Select, {components, ControlProps, CSSObjectWithLabel, DropdownIndicatorProps, MenuProps } from 'react-select';
+import { GitBranchIcon } from '@primer/octicons-react';
+import { useState } from 'react';
 
 interface Props {
   app: NormalisedApp;
-  onReleaseChosen: (tag: string) => void;
+  onReleaseChosen: (tag: string | null | undefined) => void;
 };
 
+type ReleaseOption = {
+  readonly label: string,
+  readonly value: string
+};
+
+const Control = ({children, ...props}: ControlProps<ReleaseOption, false>) => {
+  return (
+    <>
+      <components.Control {...props}>
+        <GitBranchIcon size={18}/> {children}
+      </components.Control>
+    </>
+  )
+};
+
+const HiddenComponent = () => null;
+
 function ReleasesDropDownList({ app, onReleaseChosen }: Props): JSX.Element {
-  const releases = [{ label: app.defaultBranch, value: app.defaultBranch }, ...app.releases.map((release) => ({ label: release.tag, value: release.tag ?? '' })),];
+
+  const releases: ReleaseOption[] = [{ label: app.defaultBranch, value: app.defaultBranch },
+          ...app.releases.map((release) => ({ label: release.tag, value: release.tag ?? '' }))];
+  const selectStyles = {
+    control: (base: CSSObjectWithLabel, state: ControlProps<ReleaseOption>) => ({
+      ...base,
+      cursor: 'pointer',
+      borderRadius: 0,
+      minHeight: '30px',
+      height: '33px',
+      paddingLeft: 8,
+      alignContent: 'center',
+    }),
+    dropdownIndicator: (base: CSSObjectWithLabel, state: DropdownIndicatorProps<ReleaseOption, false>) => ({
+      ...base,
+      paddingTop: 0,
+      paddingBottom: 4,
+      display: !state.isFocused ? 'block' : 'none',
+      scale: '0.7'
+    }),
+    menu: (base: CSSObjectWithLabel, state: MenuProps<ReleaseOption, false>) => ({
+      ...base,
+      marginTop: 2,
+      marginBottom: 2,
+      borderRadius: 0
+    })
+  };
+
+  const [selectedRelease, setSelectedRelease] = useState(releases[0]?.label);
 
   return (
-    <div className="font-thin max-w-[20%] min-w-[15%]">
+    <div className="font-thin max-w-[15%] min-w-[15%]" title={`Release '${selectedRelease}' selected`}>
       <Select
+        styles={selectStyles}
         instanceId={`${app.id}-release-select`}
+        noOptionsMessage={() => 'No more releases'}
+        isMulti={false}
+        menuPlacement="auto"
         defaultValue={releases[0]}
         options={releases}
-        menuPlacement="auto"
-        onChange={(option) => { onReleaseChosen(option ? option.value : ""); }}
+        onChange={(newValue) => { onReleaseChosen(newValue?.label); setSelectedRelease(newValue?.label); }}
         hideSelectedOptions
-        />
+        components={{ Control: Control, IndicatorSeparator: HiddenComponent }}
+        isSearchable={false}
+      />
     </div>
   )
 }