Update workflow based on feedback

src-tauri/src/lib.rs

@@ -57,6 +57,7 @@ pub fn run() {
     }))
     // Persistent storage with file system
     .plugin(tauri_plugin_store::Builder::new().build())
+    .plugin(tauri_plugin_notification::init())
     .plugin(tauri_plugin_upload::init())
     // LocalHost REST Client (in v2, use http plugin instead of request_client)
     .plugin(tauri_plugin_http::init())

src/App.tsx

@@ -18,7 +18,6 @@ const App = () => {
 
     onMount(() => {
         get('settings').then((settings) => {
-            console.log('got settings', settings)
             if (settings) {
                 debug('loading settings')
                 setEnableNotifications(settings.enableNotifications)

src/components/Cards/Card/index.tsx

@@ -2,18 +2,20 @@ import Button from '@components/Buttons/Button'
 import DefaultButton from '@components/Buttons/DefaultButton'
 import PrimaryButton from '@components/Buttons/PrimaryButton'
 import Typography from '@components/Typography'
+import { classNames } from '@src/utils'
 import { IconTypes } from 'solid-icons'
 import { IoChevronBackSharp } from 'solid-icons/io'
-import { ParentComponent, Show } from 'solid-js'
 import { VsSettings } from 'solid-icons/vs'
-import { classNames } from '@src/utils'
+import { ParentComponent, Show } from 'solid-js'
 
 export interface IProps {
     onClickSettings?: () => void
     onClickBack?: () => void
     onClickSecondary?: () => void
     onClickPrimary?: () => void
     onClickOption?: () => void
+    onClickAdvanced?: () => void
+    advancedButtonLabel?: string
     onClickOptionLabel?: string
     label: string
     icon: IconTypes
@@ -96,25 +98,34 @@ const Card: ParentComponent<IProps> = (props) => {
                 </Show>
                 {props.children}
             </div>
-            <div class="flex flex-row gap-12 w-full">
-                <Show when={typeof props.onClickSecondary !== 'undefined'}>
-                    <Button
-                        label={props.secondaryButtonLabel ?? '--'}
-                        onClick={props.onClickSecondary}
-                    />
-                </Show>
-                <Show when={typeof props.onClickOption !== 'undefined'}>
+            <div class="flex flex-col gap-12  w-full">
+                <div class="flex flex-row gap-12 w-full">
+                    <Show when={typeof props.onClickSecondary !== 'undefined'}>
+                        <Button
+                            label={props.secondaryButtonLabel ?? '--'}
+                            onClick={props.onClickSecondary}
+                        />
+                    </Show>
+
+                    <Show when={typeof props.onClickOption !== 'undefined'}>
+                        <Button
+                            label={props.onClickOptionLabel ?? '--'}
+                            onClick={props.onClickOption}
+                        />
+                    </Show>
+                    <Show when={typeof props.onClickPrimary !== 'undefined'}>
+                        <PrimaryButton
+                            label={props.primaryButtonLabel ?? '--'}
+                            onClick={props.onClickPrimary}
+                            isActive={props.isActive}
+                            disabled={!props.isActive}
+                        />
+                    </Show>
+                </div>
+                <Show when={typeof props.onClickAdvanced !== 'undefined'}>
                     <Button
-                        label={props.onClickOptionLabel ?? '--'}
-                        onClick={props.onClickOption}
-                    />
-                </Show>
-                <Show when={typeof props.onClickPrimary !== 'undefined'}>
-                    <PrimaryButton
-                        label={props.primaryButtonLabel ?? '--'}
-                        onClick={props.onClickPrimary}
-                        isActive={props.isActive}
-                        disabled={!props.isActive}
+                        label={props.advancedButtonLabel ?? '--'}
+                        onClick={props.onClickAdvanced}
                     />
                 </Show>
             </div>

src/containers/FlashWizard/SelectPortWizard/index.tsx

@@ -105,7 +105,7 @@ const SelectPortWizard = () => {
                             case STEP_ACTION.UPDATE_NETWORK:
                             case STEP_ACTION.SELECT_NETWORK: {
                                 batch(() => {
-                                    setStep(INIT_WIZARD_STEPS.SELECT_PROCESS, false)
+                                    setStep(INIT_WIZARD_STEPS.ADVANCED_BOARD_OPTIONS, false)
                                     setAction(ACTION.PREV)
                                 })
                                 break

src/containers/FlashWizard/SetupWizard/index.tsx

@@ -21,7 +21,7 @@ const SetupWizard = () => {
         <Switch>
             <Match when={activeStep() === INIT_WIZARD_STEPS.PROCESS_INIT}>
                 <Card
-                    primaryButtonLabel="Setup process"
+                    primaryButtonLabel="Install openiris"
                     secondaryButtonLabel="Show Logs"
                     isActive
                     icon={BiRegularChip}
@@ -31,7 +31,7 @@ const SetupWizard = () => {
                     onClickPrimary={() => {
                         batch(() => {
                             setAction(ACTION.NEXT)
-                            setStep(INIT_WIZARD_STEPS.SELECT_PROCESS)
+                            setStep(INIT_WIZARD_STEPS.SELECT_BOARD)
                         })
                     }}
                     onClickSecondary={() => {
@@ -40,11 +40,19 @@ const SetupWizard = () => {
                             setStep(TERMINAL_WIZARD_STEPS.TERMINAL_BEFORE_PROCEEDING)
                         })
                     }}
+                    onClickAdvanced={() => {
+                        batch(() => {
+                            setAction(ACTION.NEXT)
+                            setStep(INIT_WIZARD_STEPS.ADVANCED_BOARD_OPTIONS)
+                            setActiveAction(STEP_ACTION.ADVANCED_BOARD_OPTIONS)
+                        })
+                    }}
+                    advancedButtonLabel="Advanced board options"
                     label="Flash Your Board"
                     description="Click the button below to start the flashing process and follow the on-screen prompts to complete the setup."
                 />
             </Match>
-            <Match when={activeStep() === INIT_WIZARD_STEPS.SELECT_PROCESS}>
+            <Match when={activeStep() === INIT_WIZARD_STEPS.ADVANCED_BOARD_OPTIONS}>
                 <Card
                     icon={BiRegularChip}
                     onClickBack={() => {
@@ -54,15 +62,9 @@ const SetupWizard = () => {
                         })
                     }}
                     isActive
-                    primaryButtonLabel="Install openiris"
-                    onClickPrimary={() => {
-                        batch(() => {
-                            setAction(ACTION.NEXT)
-                            setStep(INIT_WIZARD_STEPS.SELECT_BOARD)
-                        })
-                    }}
-                    label="Select process">
-                    <div class="w-full flex-col flex gap-12 h-full ">
+                    label="Advanced board options"
+                    description="Additional utilities for updating your boards config after flashing">
+                    <div class="w-full flex-col flex gap-12 h-full">
                         <Button
                             label="Change device mode"
                             onClick={() => {
@@ -93,7 +95,7 @@ const SetupWizard = () => {
                     onClickBack={() => {
                         batch(() => {
                             setAction(ACTION.PREV)
-                            setStep(INIT_WIZARD_STEPS.SELECT_PROCESS)
+                            setStep(INIT_WIZARD_STEPS.PROCESS_INIT)
                         })
                     }}
                     onClickPrimary={() => {

src/containers/FlashWizard/WiredWizard/index.tsx

@@ -98,7 +98,7 @@ const WiredWizard = () => {
                                 let cleanedName = name.replace(/^\s+/, '').replace(/\s+/g, ' ')
                                 setTrackerName(cleanedName)
                             }}
-                            placeholder="Enter your wifi name"
+                            placeholder="Enter your tracker name"
                             value={trackerName()}
                         />
                     </div>

src/store/actions/animation/verifyPortConnection.ts

@@ -5,6 +5,7 @@ import {
     WIRED_WIZARD_STEPS,
     WIRELESS_WIZARD_STEPS,
 } from '@interfaces/animation/enums'
+import { NOTIFICATION_TYPE } from '@interfaces/notifications/enums'
 import { getApi } from '@src/esp'
 import { DeviceMode } from '@src/esp/interfaces/types'
 import { logger } from '@src/logger'
@@ -14,6 +15,7 @@ import { setActivePort } from '@store/esp/esp'
 import { activePort } from '@store/esp/selectors'
 import { setAvailableNetworks } from '@store/network/network'
 import { batch } from 'solid-js'
+import { addNotification } from '../notifications/addNotification'
 
 export const verifyPortConnection = async (isLocked: boolean = false, mode?: DeviceMode) => {
     batch(() => {
@@ -71,6 +73,11 @@ export const verifyPortConnection = async (isLocked: boolean = false, mode?: Dev
         }
     } catch (err) {
         batch(() => {
+            addNotification({
+                message: "Port verification failed. Make sure you've replugged the board",
+                title: 'Port verification failed',
+                type: NOTIFICATION_TYPE.ERROR,
+            })
             logger.errorStart('Verify Port connection ERROR')
             logger.add(err instanceof Error ? err.message : `${err}`)
             logger.errorEnd('Verify Port connection ERROR')

src/store/actions/notifications/addNotification.ts

@@ -25,7 +25,12 @@ export const addNotification = (notification: Notifications) => {
     const { message, type } = notification
 
     const toastOptions = {
-        style: { background: '#0D1B26', color: '#fff', border: '1px solid #192736' },
+        style: {
+            background: '#0D1B26',
+            color: '#fff',
+            border: '1px solid #192736',
+            textAlign: 'left',
+        },
         actionButtonStyle: {
             background: '#192736',
             border: '1px solid #192736',

src/styles/index.css

@@ -77,3 +77,7 @@ body {
         background-color 0.5s;
     color: #a8b1ff;
 }
+
+.my-custom-toast {
+    text-align: left;
+}

src/types/animation/enums.ts

@@ -30,6 +30,7 @@ export enum ACTION {
 }
 
 export enum STEP_ACTION {
+    ADVANCED_BOARD_OPTIONS = 'ADVANCED_BOARD_OPTIONS',
     CHANGE_DEVICE_MODE = 'CHANGE_DEVICE_MODE',
     INSTALL_OPENIRIS = 'INSTALL_OPENIRIS',
     SELECT_NETWORK = 'SELECT_NETWORK',
@@ -39,7 +40,7 @@ export enum STEP_ACTION {
 
 export enum INIT_WIZARD_STEPS {
     PROCESS_INIT = 'PROCESS_INIT',
-    SELECT_PROCESS = 'SELECT_PROCESS',
+    ADVANCED_BOARD_OPTIONS = 'ADVANCED_BOARD_OPTIONS',
     SELECT_BOARD = 'SELECT_BOARD',
 }