enhanched onboarding experience (#32)

* Added option to skip the selecting phase

* Added warning for docker desktop settings

* changed the filter for error toast

* changed default os/user if previously selected

* applied review suggestions

Author: Pive01

Makefile

@@ -1,5 +1,5 @@
 IMAGE?=localstack/localstack-docker-desktop
-TAG?=0.3.2
+TAG?=0.4.1
 
 BUILDER=buildx-multi-arch
 

ui/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState } from 'react';
 import { createStyles, makeStyles } from '@mui/styles';
-import { ControlledTabPanels, Header, LogsPage, MountPointForm, ConfigPage, StatusPage } from './components';
-import { useDDClient, useMountPoint } from './services/hooks';
+import { ControlledTabPanels, Header, LogsPage, ConfigPage, StatusPage, SettingsForm } from './components';
+import { useMountPoint } from './services/hooks';
 
 const useStyles = makeStyles(() => createStyles({
   sticky: {
@@ -13,15 +13,12 @@ const useStyles = makeStyles(() => createStyles({
 
 export const App = (): ReactElement => {
   const [selected, setSelected] = useState<number>(0);
-  const { user, os } = useMountPoint();
+  const { showForm, showSetupWarning } = useMountPoint();
   const classes = useStyles();
-  const ddClient = useDDClient();
-  const userMissing = !user;
-  const shouldDialogOpen = ddClient.host.platform === 'win32' ? !os || userMissing : userMissing;
 
   return (
     <>
-      {shouldDialogOpen && <MountPointForm />}
+      {showForm && <SettingsForm initialState={showSetupWarning ? 0 : 1} />}
       <div className={classes.sticky}>
         <Header />
       </div>

ui/src/components/Header/Controller.tsx

@@ -8,26 +8,24 @@ import {
   LATEST_IMAGE,
   START_ARGS,
   FLAGS,
-  ERROR_USER,
 } from '../../constants';
 import { LongMenu } from './Menu';
 import { DockerContainer, DockerImage } from '../../types';
 import { DownloadProgressDialog } from '../Feedback/DownloadProgressDialog';
 import { ProgressButton } from '../Feedback';
 
-const EXCLUDED_ERROR_TOAST = ['Successfully activated API key', 'Execution of "prepare_host"', 'DEBUG'];
+const EXCLUDED_ERROR_TOAST = ['INFO', 'WARN', 'DEBUG'];
 
 export const Controller = (): ReactElement => {
-  const ddClient = useDDClient();
   const { runConfig, isLoading, createConfig } = useRunConfig();
   const { data, mutate } = useLocalStack();
+  const { user, os, hasSkippedConfiguration } = useMountPoint();
   const [runningConfig, setRunningConfig] = useState<string>('Default');
-  const isRunning = data && data.State === 'running';
-  const { user, os } = useMountPoint();
   const [downloadProps, setDownloadProps] = useState({ open: false, image: LATEST_IMAGE });
   const [isStarting, setIsStarting] = useState<boolean>(false);
   const [isStopping, setIsStopping] = useState<boolean>(false);
-
+  const ddClient = useDDClient();
+  const isRunning = data && data.State === 'running';
   const isUnhealthy = data && data.Status.includes('unhealthy');
   const tooltipLabel = isUnhealthy ? 'Unhealthy' : 'Healthy';
 
@@ -43,7 +41,7 @@ export const Controller = (): ReactElement => {
   const buildMountArg = () => {
     let location = 'LOCALSTACK_VOLUME_DIR=/tmp/localstack/volume';
 
-    if (user !== ERROR_USER) {
+    if (!hasSkippedConfiguration) {
       switch (ddClient.host.platform) {
         case 'win32':
           location = `LOCALSTACK_VOLUME_DIR=\\\\wsl$\\${os}\\home\\${user}\\.cache\\localstack\\volume`;

ui/src/components/Views/Configs/ConfigPage.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 export const ConfigPage = (): ReactElement => {
 
   const { runConfig, deleteConfig } = useRunConfig();
-  const { deleteMountPointData } = useMountPoint();
+  const mountPoint = useMountPoint();
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [targetConfig, setTargetConfig] = useState<RunConfig | null>(null);
 
@@ -82,7 +82,7 @@ export const ConfigPage = (): ReactElement => {
         >
           New
         </Button>
-        <Button onClick={deleteMountPointData}>
+        <Button onClick={() => mountPoint.setMountPointData({ ...mountPoint, showForm: true })}>
           Change mount point
         </Button>
       </ButtonGroup>