fix: Add preflight checks and improve error handling in the UI (#397)

* Add preflight checks to the plural install and improve error handling in the UI react app

* Fix grommet file input issue

* Fix grommet theming issues in prod

* Remove console log

* Fix configure OIDC

* Add tracking to the install command and wrap in rooted validator

Makefile

@@ -21,7 +21,7 @@ LDFLAGS ?= $(BASE_LDFLAGS) $\
 	-X "$(PACKAGE)/cmd/plural.Date=$(APP_DATE)" $\
 	-X "$(PACKAGE)/pkg/scm.GitlabClientSecret=${GITLAB_CLIENT_SECRET}" $\
 	-X "$(PACKAGE)/pkg/scm.BitbucketClientSecret=${BITBUCKET_CLIENT_SECRET}"
-WAILS_TAGS ?= desktop,production,ui
+WAILS_TAGS ?= desktop,production,ui,debug
 WAILS_BINDINGS_TAGS ?= bindings,generate
 WAILS_BINDINGS_BINARY_NAME ?= wailsbindings
 TAGS ?= $(WAILS_TAGS)

cmd/plural/ui.go

@@ -5,18 +5,35 @@ package plural
 import (
 	"github.com/urfave/cli"
 
+	"github.com/pluralsh/plural/pkg/manifest"
 	"github.com/pluralsh/plural/pkg/ui"
+	"github.com/pluralsh/plural/pkg/wkspace"
 )
 
 func (p *Plural) uiCommands() cli.Command {
 	return cli.Command{
 		Name:   "install",
 		Usage:  "opens installer UI that simplifies application configuration",
-		Action: p.run,
+		Action: tracked(rooted(p.run), "cli.install"),
 	}
 }
 
 func (p *Plural) run(c *cli.Context) error {
+	_, err := wkspace.Preflight()
+	if err != nil {
+		return err
+	}
+
+	_, err = manifest.FetchProject()
+	if err != nil {
+		return err
+	}
+
+	_, err = manifest.FetchContext()
+	if err != nil {
+		return err
+	}
+
 	p.InitPluralClient()
 	return ui.Run(p.Client, c)
 }

go.sum

@@ -920,10 +920,6 @@ github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINE
 github.com/pkg/sftp v1.10.1/go.mod h1:lYOWFsE0bwd1+KfKJaKeuokY15vzFx25BLbzYYoAxZI=
 github.com/pluralsh/controller-reconcile-helper v0.0.4 h1:1o+7qYSyoeqKFjx+WgQTxDz4Q2VMpzprJIIKShxqG0E=
 github.com/pluralsh/controller-reconcile-helper v0.0.4/go.mod h1:AfY0gtteD6veBjmB6jiRx/aR4yevEf6K0M13/pGan/s=
-github.com/pluralsh/gqlclient v1.3.11 h1:58vSsD4xur9isk4WncN9Q9CRENogSeUPv5sThRmpPQI=
-github.com/pluralsh/gqlclient v1.3.11/go.mod h1:z1qHnvPeqIN/a+5OzFs40e6HI6tDxzh1+yJuEpvqGy4=
-github.com/pluralsh/gqlclient v1.3.14 h1:MX3odnIfPSYT9PysegKkC31w/Vn8PZhrT/rZXZck/yU=
-github.com/pluralsh/gqlclient v1.3.14/go.mod h1:z1qHnvPeqIN/a+5OzFs40e6HI6tDxzh1+yJuEpvqGy4=
 github.com/pluralsh/gqlclient v1.3.15 h1:QA6VEMDxeG0/e+qXvr7xgorHl45o4/Qg9CwsPyVn2gE=
 github.com/pluralsh/gqlclient v1.3.15/go.mod h1:z1qHnvPeqIN/a+5OzFs40e6HI6tDxzh1+yJuEpvqGy4=
 github.com/pluralsh/oauth v0.9.2 h1:tM9hBK4tCnJUeCOgX0ctxBBCS3hiCDPoxkJLODtedmQ=

pkg/bundle/oidc.go

@@ -116,6 +116,10 @@ func formatRedirectUris(settings *api.OIDCSettings, ctx map[string]interface{})
 }
 
 func confirmOidc(confirm *bool) (bool, error) {
+	if confirm != nil && *confirm {
+		oidcConfirmed = true
+	}
+
 	if oidcConfirmed {
 		return true, nil
 	}
@@ -132,8 +136,5 @@ func confirmOidc(confirm *bool) (bool, error) {
 		}
 	}
 
-	if *confirm {
-		oidcConfirmed = true
-	}
 	return *confirm, nil
 }

pkg/ui/client.go

@@ -86,6 +86,15 @@ func (this *Client) Context() *manifest.Context {
 	return context
 }
 
+func (this *Client) Provider() string {
+	project, err := manifest.FetchProject()
+	if err != nil {
+		return ""
+	}
+
+	return api.NormalizeProvider(project.Provider)
+}
+
 func (this *Client) Install(applications []Application, domains, buckets []string) error {
 	path := manifest.ContextPath()
 	context, err := manifest.ReadContext(path)
@@ -104,14 +113,14 @@ func (this *Client) Install(applications []Application, domains, buckets []strin
 		return app.IsDependency
 	})
 
-	for _, dep := range dependencies {
-		if err = this.doInstall(dep, context); err != nil {
+	for _, app := range installableApplications {
+		if err = this.doInstall(app, context); err != nil {
 			return err
 		}
 	}
 
-	for _, app := range installableApplications {
-		if err = this.doInstall(app, context); err != nil {
+	for _, dep := range dependencies {
+		if err = this.doInstall(dep, context); err != nil {
 			return err
 		}
 	}
@@ -153,7 +162,7 @@ func (this *Client) doInstall(application Application, context *manifest.Context
 
 	// Configure OIDC if enabled
 	if oidc {
-		confirm := false
+		confirm := true
 		err = bundle.ConfigureOidc(repoName, this.client, recipe, configuration, &confirm)
 		if err != nil {
 			return err

pkg/ui/web/package.json

@@ -22,7 +22,8 @@
     "@apollo/client": "3.7.10",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@pluralsh/design-system": "1.330.1",
+    "@pluralsh/design-system": "1.334.0",
+    "grommet": "2.31.0",
     "honorable": "0.194.0",
     "honorable-theme-default": "0.77.0",
     "lodash": "4.17.21",

pkg/ui/web/package.json.md5

@@ -1 +1 @@
-c6011e947047bb5121351cb21621b0c0
+97ea82012b5185fffbbfdf3e3f33f8f9

pkg/ui/web/src/Plural.tsx

@@ -1,44 +1,52 @@
-import { theme } from '@pluralsh/design-system'
-import { HonorableTheme, ThemeProvider as HonorableThemeProvider } from 'honorable'
-import React, { useCallback, useMemo } from 'react'
+import { theme as honorableTheme } from '@pluralsh/design-system'
+import { Grommet } from 'grommet'
+import { ThemeProvider as HonorableThemeProvider } from 'honorable'
+import React, { useMemo } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 
 import Loader from './components/loader/Loader'
 import { WailsContext, WailsContextProps } from './context/wails'
+import { Provider } from './graphql/generated/graphql'
+import { grommetTheme } from './grommet/theme'
 import { useWailsQuery } from './hooks/useWails'
 import { router } from './routes/router'
 import { Binding } from './services/wails'
 import { FontStyles } from './styled/fonts'
 import { GlobalStyles } from './styled/global'
 import { ScrollbarStyles } from './styled/scrollbar'
-import { theme as styledTheme } from './styled/theme'
+import { styledTheme } from './styled/theme'
 import { PluralProject } from './types/client'
 
 function Plural(): React.ReactElement {
   const { data: context } = useWailsQuery(Binding.Context)
   const { data: project = {} as PluralProject } = useWailsQuery<PluralProject>(Binding.Project)
+  const { data: provider } = useWailsQuery<Provider>(Binding.Provider)
   const { data: token } = useWailsQuery(Binding.Token)
 
   const isReady = useMemo(() => !!context && !!project && !!token, [context, project, token])
-  const fixProjectProvider = useCallback((project: PluralProject) => ({ ...project, provider: project.provider?.toUpperCase() }), [])
   const wailsContext = useMemo(() => ({
     context,
-    project: fixProjectProvider(project),
+    project: { ...project, provider },
     token,
-  } as WailsContextProps), [context, fixProjectProvider, project, token])
+  } as WailsContextProps), [context, project, provider, token])
 
   return (
-    <HonorableThemeProvider theme={theme as HonorableTheme}>
-      <ThemeProvider theme={styledTheme}>
-        <WailsContext.Provider value={wailsContext}>
-          <GlobalStyles />
-          <FontStyles />
-          <ScrollbarStyles />
-          {isReady && <RouterProvider router={router} />}
-          {!isReady && <Loader />}
-        </WailsContext.Provider>
-      </ThemeProvider>
+    <HonorableThemeProvider theme={honorableTheme}>
+      <Grommet
+        full
+        theme={grommetTheme}
+      >
+        <ThemeProvider theme={styledTheme}>
+          <WailsContext.Provider value={wailsContext}>
+            <GlobalStyles />
+            <FontStyles />
+            <ScrollbarStyles />
+            {isReady && <RouterProvider router={router} />}
+            {!isReady && <Loader />}
+          </WailsContext.Provider>
+        </ThemeProvider>
+      </Grommet>
     </HonorableThemeProvider>
   )
 }

pkg/ui/web/src/grommet/fileInputTheme.tsx

@@ -1,11 +1,12 @@
 import { CloseIcon } from '@pluralsh/design-system'
+import { DefaultTheme } from 'styled-components'
 
 export const fileInputTheme = ({
   selected = false, error = false, theme,
 }: {
   selected?: boolean;
   error?: boolean;
-  theme: any;
+  theme: DefaultTheme;
 }) => ({
   fileInput: {
     message: {