feat: Add dismissible readme panel before flashing

Steps to follow before uploading the software

src/components/Buttons/CheckboxButton/Index.tsx

@@ -0,0 +1,25 @@
+import { Component } from 'solid-js'
+import Checkbox from '@components/Checkbox/Index'
+
+export interface IProps {
+    onClick: () => void
+    checked: boolean
+    label: string
+}
+
+const CheckboxButton: Component<IProps> = (props) => {
+    return (
+        <div
+            class="flex flex-row justify-center items-center gap-[6px] cursor-pointer"
+            onClick={() => {
+                props.onClick()
+            }}>
+            <Checkbox checked={props.checked} />
+            <p class="text-left text-[14px] text-[#9793FD] font-normal leading-[26px] not-italic">
+                Don’t show this again
+            </p>
+        </div>
+    )
+}
+
+export default CheckboxButton

src/components/Checkbox/Index.tsx

@@ -0,0 +1,18 @@
+import { Component } from 'solid-js'
+
+export interface IProps {
+    checked: boolean
+}
+
+const Checkbox: Component<IProps> = (props) => {
+    return (
+        <div
+            classList={{
+                'bg-[#9793FD]': props.checked,
+            }}
+            class="w-[14px] h-[14px] border border-solid border-[#9793FD] rounded-[4px] "
+        />
+    )
+}
+
+export default Checkbox

src/containers/FlashFirmware/FlashFirmware.tsx

@@ -27,9 +27,10 @@ import {
 
 export const ManageFlashFirmware = () => {
     const [manifestPath, setManifestPath] = createSignal<string>('----')
-    const { getFirmwareVersion, activeBoard, downloadAsset, getFirmwareType } = useAppAPIContext()
+    const { getFirmwareVersion, activeBoard, downloadAsset, getFirmwareType, saveManifestPath } =
+        useAppAPIContext()
     const { addNotification } = useAppNotificationsContext()
-    const { setOpenModal } = useAppUIContext()
+    const { setOpenModal, hideModal } = useAppUIContext()
     const navigate = useNavigate()
 
     onMount(() => {
@@ -45,6 +46,9 @@ export const ManageFlashFirmware = () => {
                     debug(`[WebSerial]: manifestfilePath ${manifestfilePath}`)
                     const url = convertFileSrc(manifestfilePath)
                     debug(`[WebSerial]: url ${url}`)
+                    if (!hideModal()) {
+                        saveManifestPath(url)
+                    }
                     setManifestPath(url)
                 })
             })
@@ -89,6 +93,10 @@ export const ManageFlashFirmware = () => {
                     addNotification(notification())
                     return true
                 }
+                if (!hideModal()) {
+                    setOpenModal({ open: true, type: MODAL_TYPE.BEFORE_FLASHING })
+                    return true
+                }
                 setAbortController('openiris')
                 setProcessStatus(true)
                 restartFirmwareState()

src/containers/Modals/BeforeFlashingContainer.tsx

@@ -0,0 +1,79 @@
+import { appWindow } from '@tauri-apps/api/window'
+import { createMemo } from 'solid-js'
+import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums'
+import BeforeFlashingModal from '@pages/Modals/BeforeFlashingModal'
+import { usb } from '@src/static'
+import { useAppAPIContext } from '@store/context/api'
+import { useAppNotificationsContext } from '@store/context/notifications'
+import { useAppUIContext } from '@store/context/ui'
+import { installOpenIris } from '@store/terminal/actions'
+import { isActiveProcess } from '@store/terminal/selectors'
+import {
+    restartFirmwareState,
+    setAbortController,
+    setProcessStatus,
+} from '@store/terminal/terminal'
+
+const BeforeFlashingContainer = () => {
+    const { downloadAsset, getFirmwareType, activeBoard, manifestPath } = useAppAPIContext()
+    const { modal, setOpenModal, hideModal, setHideModal } = useAppUIContext()
+    const { addNotification } = useAppNotificationsContext()
+
+    const isUSBBoard = createMemo(() => {
+        return activeBoard().includes(usb)
+    })
+
+    return (
+        <BeforeFlashingModal
+            checked={hideModal()}
+            isActive={modal().type === MODAL_TYPE.BEFORE_FLASHING}
+            onClickHeader={(action: TITLEBAR_ACTION) => {
+                switch (action) {
+                    case TITLEBAR_ACTION.MINIMIZE:
+                        appWindow.minimize()
+                        break
+                    case TITLEBAR_ACTION.MAXIMIZE:
+                        appWindow.toggleMaximize()
+                        break
+                    case TITLEBAR_ACTION.CLOSE:
+                        appWindow.close()
+                        break
+                    default:
+                        return
+                }
+            }}
+            onClickClose={() => {
+                setOpenModal({ open: false, type: MODAL_TYPE.NONE })
+            }}
+            onClickCheckbox={() => {
+                setHideModal()
+            }}
+            onClickInstallOpeniris={() => {
+                setOpenModal({ open: false, type: MODAL_TYPE.NONE })
+                if (isActiveProcess()) {
+                    addNotification({
+                        title: 'There is an active installation. Please wait.',
+                        message: 'There is an active installation. Please wait.',
+                        type: ENotificationType.INFO,
+                    })
+                    return true
+                }
+                setAbortController('openiris')
+                setProcessStatus(true)
+                restartFirmwareState()
+                installOpenIris(
+                    isUSBBoard(),
+                    manifestPath(),
+                    async () => {
+                        await downloadAsset(getFirmwareType())
+                    },
+                    () => {
+                        setOpenModal({ open: true, type: MODAL_TYPE.UPDATE_NETWORK })
+                    },
+                ).catch(() => ({}))
+            }}
+        />
+    )
+}
+
+export default BeforeFlashingContainer

src/containers/Modals/Index.tsx

@@ -1,5 +1,6 @@
-import { Show } from 'solid-js'
+import { Match, Show, Switch } from 'solid-js'
 import ApModeContainer from './ApModeModalContainer'
+import BeforeFlashingModal from './BeforeFlashingContainer'
 import WifiModal from './WifiModalcontainer'
 import { MODAL_TYPE } from '@interfaces/enums'
 import { useAppUIContext } from '@store/context/ui'
@@ -10,12 +11,17 @@ export const ModalRoot = () => {
     return (
         <Show when={modal().open}>
             <div class="absolute top-0 left-0">
-                <Show when={modal().type === MODAL_TYPE.AP_MODE}>
-                    <ApModeContainer />
-                </Show>
-                <Show when={modal().type === MODAL_TYPE.UPDATE_NETWORK}>
-                    <WifiModal />
-                </Show>
+                <Switch>
+                    <Match when={modal().type === MODAL_TYPE.AP_MODE}>
+                        <ApModeContainer />
+                    </Match>
+                    <Match when={modal().type === MODAL_TYPE.UPDATE_NETWORK}>
+                        <WifiModal />
+                    </Match>
+                    <Match when={modal().type === MODAL_TYPE.BEFORE_FLASHING}>
+                        <BeforeFlashingModal />
+                    </Match>
+                </Switch>
             </div>
         </Show>
     )

src/pages/Modals/BeforeFlashingModal.tsx

@@ -0,0 +1,72 @@
+import { Component } from 'solid-js'
+import CheckboxButton from '@components/Buttons/CheckboxButton/Index'
+import { Button } from '@components/Buttons/DefaultButton'
+import { Modal } from '@components/Modal/Index'
+import ModalHeader from '@components/ModalHeader/Index'
+import { TITLEBAR_ACTION } from '@interfaces/enums'
+import { beforeFlashingModalID } from '@src/static'
+
+export interface IProps {
+    onClickHeader: (action: TITLEBAR_ACTION) => void
+    onClickClose: () => void
+    onClickInstallOpeniris: () => void
+    onClickCheckbox: () => void
+    isActive: boolean
+    checked: boolean
+}
+
+const BeforeFlashingModal: Component<IProps> = (props) => {
+    return (
+        <Modal
+            id={beforeFlashingModalID}
+            isActive={props.isActive}
+            onClickCloseModal={props.onClickClose}
+            onClickHeader={props.onClickHeader}>
+            <div class="flex flex-col gap-[14px]">
+                <ModalHeader label="Reminder!" onClick={props.onClickClose} />
+                <div class="flex flex-col gap-[14px]">
+                    <div>
+                        <p class="text-left text-[18px] text-[#9793FD] font-medium leading-[20px] not-italic">
+                            Before flashing
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-left text-[14px] text-white font-normal leading-[26px] not-italic">
+                            Make sure to follow the steps below 👇
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-left text-[14px] text-white font-normal leading-[26px] not-italic">
+                            &#x2022; hold B button while plugging the board in
+                        </p>
+                        <p class="text-left text-[14px] text-white font-normal leading-[26px] not-italic py-[10px]">
+                            &#x2022; Make sure you have the antenna and camera plugged into the
+                            board if you plan on using them wirelessly
+                        </p>
+                        <p class="text-left text-[14px] text-white font-normal leading-[26px] not-italic">
+                            &#x2022; Make sure your password and ssid do not have special characters
+                        </p>
+                        <p class="text-left text-[14px] text-white font-normal leading-[26px] not-italic">
+                            &#x2022; Make sure you have a stable internet connection
+                        </p>
+                    </div>
+                </div>
+                <div class="flex gap-[10px] justify-between">
+                    <CheckboxButton
+                        onClick={props.onClickCheckbox}
+                        checked={props.checked}
+                        label="Don’t show this again"
+                    />
+                    <Button
+                        type={'button'}
+                        isActive={true}
+                        label="Install Openiris"
+                        onClick={props.onClickInstallOpeniris}
+                    />
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default BeforeFlashingModal

src/static/index.ts

@@ -12,6 +12,7 @@ export const questionModalId = 'questionModal'
 export const apModalID = 'apMode'
 export const logsModalID = 'logs'
 export const wifiModalID = 'wifiMode'
+export const beforeFlashingModalID = 'beforeFlashingMode'
 export const debugModalId = 'debugModal'
 export const operatingSystemModal = 'operatingSystem'
 export const staticMdns = 'openiristracker'

src/static/types/enums.ts

@@ -140,6 +140,7 @@ export const enum FLASH_STATUS {
 
 export enum MODAL_TYPE {
     UPDATE_NETWORK = 'UPDATE_NETWORK',
+    BEFORE_FLASHING = 'BEFORE_FLASHING',
     AP_MODE = 'AP_MODE',
     NONE = 'NONE',
 }

src/static/types/interfaces.ts

@@ -154,6 +154,7 @@ export interface AppStoreAPI {
     apModeStatus: boolean
     mdns: string
     channelMode: CHANNEL_TYPE
+    manifestPath: string
 }
 
 export interface IOpenModal {
@@ -166,6 +167,7 @@ export interface UiStore {
     showNotifications?: boolean
     menuOpen?: MenuOpen | null
     contextAnchor?: HTMLElement | null
+    hideModal: boolean
 }
 
 export interface ISignal {

src/store/context/api.tsx

@@ -58,6 +58,8 @@ interface AppAPIContext {
     setNetwork: (ssid: string, password: string, mdns: string) => void
     setChannelMode: (channel: CHANNEL_TYPE) => void
     setAPModeStatus: (status: boolean) => void
+    saveManifestPath: (url: string) => void
+    manifestPath: Accessor<string>
 }
 
 const AppAPIContext = createContext<AppAPIContext>()
@@ -99,6 +101,7 @@ export const AppAPIProvider: Component<Context> = (props) => {
         loader: false,
         apModeStatus: false,
         mdns: '',
+        manifestPath: '',
     }
 
     const [state, setState] = createStore<AppStoreAPI>(defaultState)
@@ -189,6 +192,14 @@ export const AppAPIProvider: Component<Context> = (props) => {
         )
     }
 
+    const saveManifestPath = (url: string) => {
+        setState(
+            produce((s) => {
+                s.manifestPath = url
+            }),
+        )
+    }
+
     const getGHRestStatus = createMemo(() => apiState().ghAPI.status)
     const getFirmwareAssets = createMemo(() => apiState().ghAPI.assets)
     const getFirmwareVersion = createMemo(() => apiState().ghAPI.version)
@@ -197,7 +208,7 @@ export const AppAPIProvider: Component<Context> = (props) => {
     const mdns = createMemo(() => apiState().mdns)
     const channelMode = createMemo(() => apiState().channelMode)
     const apModeStatus = createMemo(() => apiState().apModeStatus)
-
+    const manifestPath = createMemo(() => apiState().manifestPath)
     //#endregion
     //********************************* rest *************************************/
     //#region rest
@@ -638,6 +649,8 @@ export const AppAPIProvider: Component<Context> = (props) => {
                 channelMode,
                 mdns,
                 setChannelMode,
+                saveManifestPath,
+                manifestPath,
             }}>
             {props.children}
         </AppAPIContext.Provider>

src/store/context/ui.tsx

@@ -9,9 +9,11 @@ interface AppUIContext {
     menuOpenStatus: Accessor<MenuOpen | null | undefined>
     getContextAnchor: Accessor<HTMLElement | null | undefined>
     showNotifications: Accessor<boolean | undefined>
+    hideModal: Accessor<boolean>
     setOpenModal: (data: IOpenModal) => void
     setMenu: (menuOpen: MenuOpen | null) => void
     setContextMenuAnchor: (id: string) => void
+    setHideModal: () => void
 }
 
 const AppUIContext = createContext<AppUIContext>()
@@ -23,6 +25,7 @@ export const AppUIProvider: Component<Context> = (props) => {
         },
         showNotifications: true,
         menuOpen: null,
+        hideModal: false,
     }
 
     const [state, setState] = createStore<UiStore>(defaultState)
@@ -54,12 +57,21 @@ export const AppUIProvider: Component<Context> = (props) => {
         )
     }
 
+    const setHideModal = () => {
+        setState(
+            produce((s) => {
+                s.hideModal = !s.hideModal
+            }),
+        )
+    }
+
     const uiState = createMemo(() => state)
 
     const modal = createMemo(() => uiState().openModal)
     const showNotifications = createMemo(() => uiState().showNotifications)
     const menuOpenStatus = createMemo(() => uiState().menuOpen)
     const getContextAnchor = createMemo(() => uiState().contextAnchor)
+    const hideModal = createMemo(() => uiState().hideModal)
 
     return (
         <AppUIContext.Provider
@@ -71,6 +83,8 @@ export const AppUIProvider: Component<Context> = (props) => {
                 setOpenModal,
                 setMenu,
                 setContextMenuAnchor,
+                hideModal,
+                setHideModal,
             }}>
             {props.children}
         </AppUIContext.Provider>