fix: Handle upgrading apps

Apps can have an "upgrading" state and not just an
"installing" one. In that case, we want to display
the "Loading" tile, but then once the process is
done, we want to display the real tile and remove
the loading one.

src/components/AppTile.jsx

@@ -25,7 +25,11 @@ const AppTileWrapper = ({ app }) => {
       setAppInfo(fetchedAppInfo)
     }
 
-    if (prevState.current === 'installing' && app.state === 'ready') {
+    if (
+      (prevState.current === 'installing' ||
+        prevState.current === 'upgrading') &&
+      app.state === 'ready'
+    ) {
       prevState.current = app.state
       loadAppInfo()
     }

src/components/AppTile.spec.jsx

@@ -32,6 +32,13 @@ const mockAppInstalling = {
   state: 'installing'
 }
 
+const mockAppUpgrading = {
+  _id: 'mock-app-id',
+  name: 'mock-app-name',
+  slug: 'mock-app-slug',
+  state: 'upgrading'
+}
+
 describe('<AppTile />', () => {
   it('renders loading icon when app is in installing state', () => {
     const { getByText } = render(
@@ -47,6 +54,20 @@ describe('<AppTile />', () => {
     expect(getByText('Installing…')).toBeInTheDocument()
   })
 
+  it('renders loading icon when app is in upgrading state', () => {
+    const { getByText } = render(
+      <AppLike>
+        <MuiCozyTheme>
+          <I18n dictRequire={() => enLocale} lang="en">
+            <AppTileWrapper app={mockAppUpgrading} lang="en" />
+          </I18n>
+        </MuiCozyTheme>
+      </AppLike>
+    )
+
+    expect(getByText('Installing…')).toBeInTheDocument()
+  })
+
   it('renders AppTile when app is in ready state', async () => {
     const { queryByText } = render(
       <AppLike client={mockClient}>
@@ -84,6 +105,31 @@ describe('<AppTile />', () => {
     expect(appReadyElement).toBeInTheDocument()
   })
 
+  it('updates app state from upgrading to ready and fetches app info', async () => {
+    const { rerender } = render(
+      <AppLike client={mockClient}>
+        <MuiCozyTheme>
+          <AppTileWrapper app={mockAppUpgrading} lang="en" />
+        </MuiCozyTheme>
+      </AppLike>
+    )
+
+    await act(async () => {
+      rerender(
+        <AppLike client={mockClient}>
+          <MuiCozyTheme>
+            <AppTileWrapper app={mockAppReady} lang="en" />
+          </MuiCozyTheme>
+        </AppLike>
+      )
+    })
+
+    const appReadyElement = await screen.findByText(
+      `${mockAppReady.name_prefix} ${mockAppReady.name}`
+    )
+    expect(appReadyElement).toBeInTheDocument()
+  })
+
   it('does not update app state from installing to ready if app state is not ready', async () => {
     const { rerender } = render(
       <AppLike client={mockClient}>