fix: First open of the environment selector it can sometimes show a d…

…iff environment as selected (#448)

* Fix incorrect environment selection

* Add comment to contributing, update hooks

.pre-commit-config.yaml

@@ -28,13 +28,13 @@ repos:
   - repo: local
     hooks:
       - id: ui-tests
-        name: Run UI tests
+        name: Run dev-server UI tests
         entry: bash -c 'cd internal/dev_server/ui && npm test'
         language: system
         files: \.(jsx|tsx)$
         pass_filenames: false
       - id: ui-build
-        name: Build UI
+        name: Build dev-server UI
         entry: bash -c 'cd internal/dev_server/ui && npm run build'
         language: system
         files: \.(jsx|tsx)$

CONTRIBUTING.md

@@ -17,13 +17,16 @@ To install the repo's git hooks, run `make install-hooks`.
 The pre-commit hook checks that relevant project files are formatted with `go fmt`, and that
 the `go.mod/go.sum` files are tidy.
 
+In addition, pre-commit will run dev server UI tests and build the project to make sure an up-to-date build is being checked in. You will need to install npm.
+
 ## Adding a new command
 
 There are a few things you need to do in order to wire up a new top-level command.
 
 1. Add your command to the root command by calling `cmd.AddComand` in the `NewRootCommand` method of the `cmd` package.
 2. Update the root command's usage template by modifying the `getUsageTemplate` method in the `cmd` package.
 3. Instrument your command by setting a `PreRun` or `PersistentPreRun` on your command which calls `tracker.SendCommandRunEvent`. Example below.
+
 ```go
 cmd := &cobra.Command{
     Use:   "dev-server",

internal/dev_server/ui/src/EnvironmentSelector.tsx

@@ -42,7 +42,10 @@ export function EnvironmentSelector({
             if (sourceEnv) {
               setSelectedEnvironment(sourceEnv);
             } else if (envs.length > 0) {
-              setSelectedEnvironment(envs[0]);
+              setSelectedEnvironment({
+                name: '',
+                key: sourceEnvironmentKey || '',
+              });
             }
           }
         })
@@ -102,7 +105,11 @@ export function EnvironmentSelector({
             marginLeft: '0.5rem',
           }}
         >
-          {selectedEnvironment?.name || 'No environment selected'}
+          {selectedEnvironment?.name ? (
+            selectedEnvironment.name
+          ) : (
+            <code>{selectedEnvironment?.key}</code>
+          )}
         </span>
       </Box>