Show version selector when branch/tag not found

When a project is loaded but the URL contains an invalid branch/tag,
show the version selector in the toolbar so users can navigate to
a valid version instead of only showing an error message.

Author: ulrikandersen

src/features/projects/view/toolbar/MobileToolbar.tsx

@@ -14,7 +14,7 @@ const MobileToolbar = () => {
     selectVersion,
     selectSpecification
   } = useProjectSelection()
-  if (!project || !version || !specification) {
+  if (!project) {
     return <></>
   }
   return (
@@ -25,20 +25,23 @@ const MobileToolbar = () => {
     >
       <Selector
         items={project.versions}
-        selection={version.id}
+        selection={version?.id}
+        placeholder="Select version..."
         onSelect={selectVersion}
         sx={{ width: "100%" }}
       />
-      <Selector
-        items={version.specifications.map(spec => ({
-          id: spec.id,
-          name: spec.name,
-          hasChanges: isDiffFeatureEnabled && !!spec.diffURL
-        }))}
-        selection={specification.id}
-        onSelect={selectSpecification}
-        sx={{ width: "100%" }}
-      />
+      {version && (
+        <Selector
+          items={version.specifications.map(spec => ({
+            id: spec.id,
+            name: spec.name,
+            hasChanges: isDiffFeatureEnabled && !!spec.diffURL
+          }))}
+          selection={specification?.id}
+          onSelect={selectSpecification}
+          sx={{ width: "100%" }}
+        />
+      )}
     </Stack>
   )
 }

src/features/projects/view/toolbar/Selector.tsx

@@ -19,11 +19,13 @@ interface SelectorItem {
 const Selector = ({
   items,
   selection,
+  placeholder,
   onSelect,
   sx
 }: {
   items: SelectorItem[]
-  selection: string
+  selection?: string
+  placeholder?: string
   onSelect: (itemId: string) => void
   sx?: SxProps
 }) => {
@@ -33,7 +35,9 @@ const Selector = ({
   return (
     <FormControl sx={{ m: 1, margin: 0, ...sx }} size="small">
       <Select
-        defaultValue={selection}
+        value={selection || ""}
+        displayEmpty
+        renderValue={(value) => value || placeholder || "Select..."}
         onChange={handleChange}
         inputProps={{
           IconComponent: () => null,

src/features/projects/view/toolbar/TrailingToolbarItem.tsx

@@ -17,10 +17,10 @@ const TrailingToolbarItem = () => {
     selectVersion,
     selectSpecification
   } = useProjectSelection()
-  if (!project || !version || !specification) {
+  if (!project) {
     return <></>
   }
-  const projectNameURL = version.url || project.url
+  const projectNameURL = version?.url || project.url
   return (
     <>
       <Stack
@@ -55,25 +55,30 @@ const TrailingToolbarItem = () => {
         <Typography variant="h6" sx={{ marginRight: 1 }}>/</Typography>
         <Selector
           items={project.versions}
-          selection={version.id}
+          selection={version?.id}
+          placeholder="Select version..."
           onSelect={selectVersion}
           sx={{ marginRight: 1 }}
         />
-        <Typography variant="h6" sx={{ marginRight: 1 }}>/</Typography>
-        <Selector
-          items={version.specifications.map(spec => ({
-            id: spec.id,
-            name: spec.name,
-            hasChanges: isDiffFeatureEnabled && !!spec.diffURL
-          }))}
-          selection={specification.id}
-          onSelect={selectSpecification}
-          sx={{ marginRight: 0.5 }}
-        />
-        {specification.editURL &&
+        {version && (
+          <>
+            <Typography variant="h6" sx={{ marginRight: 1 }}>/</Typography>
+            <Selector
+              items={version.specifications.map(spec => ({
+                id: spec.id,
+                name: spec.name,
+                hasChanges: isDiffFeatureEnabled && !!spec.diffURL
+              }))}
+              selection={specification?.id}
+              onSelect={selectSpecification}
+              sx={{ marginRight: 0.5 }}
+            />
+          </>
+        )}
+        {specification?.editURL &&
           <Divider orientation="vertical" flexItem sx={{ marginLeft: 1, marginRight: 1 }} />
         }
-        {specification.editURL &&
+        {specification?.editURL &&
           <Tooltip title={`Edit ${specification.name}`} sx={{ marginLeft: 0.5, marginRight: 0.5 }}>
             <IconButton
               href={specification.editURL}