Merge pull request #3 from zenoxs/feature-edit-bundled-app

Feature edit bundled app

Author: zenoxs

.github/workflows/test.yml

@@ -33,3 +33,5 @@ jobs:
       - uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}

README.md

@@ -23,7 +23,7 @@ A companion app written with **React** and **Tauri** to help you manage your app
 - [x] Light/dark theme
 - [ ] View the logs of your builds
 - [ ] View all the available builds
-- [ ] Edit / remove a bundled app
+- [x] Edit / remove a bundled app
 
 ## How to use it ?
 

package.json

@@ -2,14 +2,14 @@
   "name": "tauri-appcenter-companion",
   "private": false,
   "repository": "https://github.com/zenoxs/tauri-appcenter-companion",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "license": "GPL-3.0",
   "author": "Amaury CIVIER",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --max-warnings=0",
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
     "postinstall": "cd node_modules/tauri-plugin-websocket && yarn && yarn build"

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "tauri-appcenter-companion"
-version = "0.3.6"
+version = "0.4.0"
 description = "Companion app for Appcenter"
 authors = ["Amaury CIVIER"]
 license = "GPL-3.0"
@@ -18,7 +18,7 @@ tauri-build = { version = "1.0.0-rc.8", features = [] }
 serde_json = "1.0"
 window-vibrancy = "0.1.2"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0-rc.10", features = ["http-all", "macos-private-api", "os-all", "updater", "window-start-dragging"] }
+tauri = { version = "1.0.0-rc.10", features = ["http-all", "macos-private-api", "os-all", "shell-open", "updater", "window-start-dragging"] }
 
 [target."cfg(target_os = \"macos\")".dependencies]
 cocoa = "0.24"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "AC Companion",
-    "version": "0.3.6"
+    "version": "0.4.0"
   },
   "build": {
     "distDir": "../dist",
@@ -56,6 +56,9 @@
       "window": {
         "startDragging": true
       },
+      "shell": {
+        "open": true
+      },
       "http": {
         "all": true,
         "request": true,

src-tauri/tauri.conf.json

@@ -10,11 +10,12 @@ import {
   ThemeContext
 } from '@fluentui/react'
 import { os } from '@tauri-apps/api'
-import { ApplicationList } from '../screens/application-list/ApplicationList'
+import { ApplicationListScreen } from '../screens/application-list/ApplicationListScreen'
 import { Routes, Route, useNavigate, useLocation, Location } from 'react-router-dom'
 import './AppNavigator.css'
 import { APITokenListModal } from '../screens/api-token/APITokenListModal'
 import { AddBundledAppDialog } from '../screens/application-list/AddBundledAppDialog'
+import { useConst } from '@fluentui/react-hooks'
 
 const navStyles = (theme: Theme): Partial<INavStyles> => ({
   root: {
@@ -63,6 +64,7 @@ export const AppNavigator = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const state = location.state as { backgroundLocation?: Location }
+  const titleBarHeight = useConst('35px')
 
   // set non transparent background for linux systems
   const [background, setBackground] = useState<string | undefined>()
@@ -76,7 +78,7 @@ export const AppNavigator = () => {
 
   return (
     <Stack verticalFill styles={{ root: { height: '100vh', width: '100vw', background } }}>
-      <div className='titlebar' data-tauri-drag-region style={{ height: '35px' }}></div>
+      <div className='titlebar' data-tauri-drag-region style={{ height: titleBarHeight }}></div>
       <Stack className='container' grow horizontal styles={{ root: { display: 'flex' } }}>
         <Stack>
           <Stack.Item align='center'>
@@ -108,13 +110,15 @@ export const AppNavigator = () => {
             root: {
               backgroundColor: theme.semanticColors.bodyBackground,
               overflowX: 'hidden',
+              overflowY: 'auto',
+              height: `calc(100vh - ${titleBarHeight})`,
               borderRadius: '10px 0px 0px 0px'
             }
           }}
           tokens={{ padding: theme.spacing.m }}
         >
           <Routes location={state?.backgroundLocation ?? location}>
-            <Route path='/' element={<ApplicationList />} />
+            <Route path='/' element={<ApplicationListScreen />} />
           </Routes>
           {state?.backgroundLocation && (
             <Routes>

src/app/navigation/AppNavigator.tsx

@@ -1,51 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import {
   DefaultButton,
-  DetailsHeader,
   Dialog,
   DialogFooter,
   DialogType,
-  IColumn,
-  IDetailsHeaderProps,
-  IGroup,
   PrimaryButton,
   Stack,
   TextField,
-  Selection,
-  DetailsList,
-  Spinner,
-  SpinnerSize
+  Selection
 } from '@fluentui/react'
 import { useNavigate } from 'react-router-dom'
-import { observer } from 'mobx-react-lite'
 import { useForm } from 'react-hook-form'
 import { Branch, BundledApplicationSnapshotIn, useStores } from '../../../models'
+import { SelectApplicationList } from './SelectApplicationList'
 import { useConst } from '@fluentui/react-hooks'
 
-const columns: Array<IColumn> = [
-  {
-    key: 'name',
-    name: 'Name',
-    fieldName: 'name',
-    minWidth: 100,
-    maxWidth: 200,
-    isResizable: true
-  },
-  {
-    key: 'token',
-    name: 'token',
-    onRender: (item: Branch) => item.application?.token?.name,
-    minWidth: 100,
-    maxWidth: 200,
-    isResizable: true
-  }
-]
-
-export const AddBundledAppDialog = observer(() => {
+export const AddBundledAppDialog = () => {
   const {
-    applicationStore: { fetchApplications, applicationList },
-    bundledApplicationStore: { addBundledApplication },
-    tokenStore: { tokens }
+    bundledApplicationStore: { addBundledApplication }
   } = useStores()
 
   const navigate = useNavigate()
@@ -58,8 +30,6 @@ export const AddBundledAppDialog = observer(() => {
     formState: { errors }
   } = useForm<BundledApplicationSnapshotIn>()
 
-  const [isLoading, setIsLoading] = useState(true)
-
   // TODO: a rules to check that their is at least one branches
   React.useEffect(() => {
     register('branches')
@@ -68,42 +38,16 @@ export const AddBundledAppDialog = observer(() => {
 
   const selection = useConst(
     () =>
-      new Selection({
+      new Selection<Branch>({
         onSelectionChanged: () => {
           setValue(
             'branches',
-            (selection.getSelection() as Array<Branch>).map((b) => b.id)
+            selection.getSelection().map((branch) => branch.id)
           )
         }
       })
   )
 
-  useEffect(() => {
-    setIsLoading(true)
-    Promise.all(
-      tokens.map((token) => fetchApplications(token.token, { withBranches: true }))
-    ).finally(() => setIsLoading(false))
-  }, [])
-
-  const [items, groups] = (() => {
-    let items: Array<Branch> = []
-    const groups: Array<IGroup> = []
-    for (const application of applicationList) {
-      const branches = application.configuredBranches
-      groups.push({
-        key: application.id,
-        name: application.displayName,
-        startIndex: items.length,
-        count: branches.length,
-        level: 0,
-        isCollapsed: true
-      })
-      items = items.concat(branches)
-    }
-
-    return [items, groups]
-  })()
-
   const onDismiss = () => {
     navigate(-1)
   }
@@ -135,38 +79,7 @@ export const AddBundledAppDialog = observer(() => {
             {...register('name', { required: { value: true, message: 'Name is required' } })}
             errorMessage={errors.name?.message}
           />
-          {isLoading ? (
-            <Spinner size={SpinnerSize.large} label='Fetching applications...' />
-          ) : (
-            <DetailsList
-              styles={{ root: { flex: 1 } }}
-              selection={selection}
-              items={items}
-              groups={groups}
-              columns={columns}
-              ariaLabelForSelectAllCheckbox='Toggle selection for all items'
-              ariaLabelForSelectionColumn='Toggle selection'
-              checkButtonAriaLabel='select row'
-              checkButtonGroupAriaLabel='select section'
-              onRenderDetailsHeader={(props?: IDetailsHeaderProps) => (
-                <DetailsHeader
-                  {...props!}
-                  ariaLabelForToggleAllGroupsButton={'Expand collapse groups'}
-                />
-              )}
-              groupProps={{
-                showEmptyGroups: true
-              }}
-              onRenderItemColumn={(item?: Branch, index?: number, column?: IColumn) => {
-                const value =
-                  item && column && column.fieldName
-                    ? item[column.fieldName as keyof Branch] || ''
-                    : ''
-
-                return <div data-is-focusable={true}>{value}</div>
-              }}
-            />
-          )}
+          <SelectApplicationList selection={selection} />
         </Stack>
         <DialogFooter>
           <PrimaryButton type='submit' text='Save' />
@@ -175,4 +88,4 @@ export const AddBundledAppDialog = observer(() => {
       </form>
     </Dialog>
   )
-})
+}