New Category switcher

app/common/tsconfig.json

@@ -17,13 +17,11 @@
     "./src/download.ts",
     "./src/options.ts",
     "./src/services/Backend.ts",
-    "./src/services/Backend/Category.ts",
     "./src/services/Backend/__test__/projectExecution.test.ts",
     "./src/services/Backend/ensoPath.ts",
     "./src/services/Backend/projectExecution.ts",
     "./src/services/Backend/remoteBackendPaths.ts",
     "./src/services/Backend/types.ts",
-    "./src/services/Backend/utilities.ts",
     "./src/services/HttpClient.ts",
     "./src/services/LocalBackend.ts",
     "./src/services/ProjectManager/ProjectManager.ts",

app/gui/integration-test/actions/DrivePageActions.ts

@@ -1,5 +1,6 @@
 /** @file Actions for the "drive" page. */
 import { expect, type Locator, type Page } from 'integration-test/base'
+import { assert } from 'ydoc-shared/util/assert'
 import type { LocatorCallback } from './BaseActions'
 import { contextMenuActions } from './contextMenuActions'
 import EditorPageActions from './EditorPageActions'
@@ -67,9 +68,7 @@ function locateSecretValueInput(page: Page) {
 
 /** Find a radio button that navigates to specified drive category. */
 function locateCategoryButton(page: Page, category: string): Locator {
-  return page
-    .getByLabel(TEXT.categorySwitcherMenuLabel)
-    .getByRole('button', { name: category, exact: true })
+  return page.locator('.LeftPanel .leftBar').getByRole('button', { name: category, exact: true })
 }
 
 /** Actions for the "drive" page. */
@@ -87,10 +86,10 @@ export default class DrivePageActions<Context = object> extends PageActions<Cont
   /** Switch to a different category. */
   goToCategory = {
     /** Switch to the "cloud" category. */
-    cloud: () => this.goToCategoryNamed(TEXT.cloudCategory),
-    local: () => this.goToCategoryNamed(TEXT.localCategory),
-    recent: () => this.goToCategoryNamed(TEXT.recentCategory),
-    trash: () => this.goToCategoryNamed(TEXT.trashCategory),
+    cloud: () => this.goToCategoryNamed('Cloud'),
+    local: () => this.goToCategoryNamed('Local'),
+    recent: () => this.goToCategoryNamed('Recent'),
+    trash: () => this.goToCategoryNamed('Trash'),
   }
 
   /** Interact with the assets search bar. */
@@ -111,7 +110,7 @@ export default class DrivePageActions<Context = object> extends PageActions<Cont
   /** Expect the category to be selected. */
   expectCategory(category: string) {
     return this.step(`Expect category '${category}'`, (page) =>
-      expect(locateCategoryButton(page, category)).toHaveAttribute('data-selected', 'true'),
+      expect(locateCategoryButton(page, category)).toContainClass('toggledOn'),
     )
   }
 
@@ -185,7 +184,9 @@ export default class DrivePageActions<Context = object> extends PageActions<Cont
       /** Click the background to deselect all rows. */
       clickAway() {
         return self.step('Click drive table background', async (page) => {
-          await page.getByTestId('assets-table-assets-unselector').first().click()
+          const lastRowBbox = await page.getByTestId('asset-row').last().boundingBox()
+          assert(lastRowBbox != null)
+          await page.mouse.click(lastRowBbox.x + 40, lastRowBbox.y + lastRowBbox.height + 40)
         })
       },
       /**
@@ -243,19 +244,9 @@ export default class DrivePageActions<Context = object> extends PageActions<Cont
         return self.step(
           `Drag drive table row '${row}' to '${category}' category`,
           async (page) => {
-            const categoryId = (
-              {
-                Cloud: 'cloudCategory',
-                Local: 'localCategory',
-                Recent: 'recentCategory',
-                Trash: 'trashCategory',
-              } satisfies { [C in typeof category]: `${Lowercase<C>}Category` & keyof typeof TEXT }
-            )[category]
-
             const categoryElement = page
-              .getByLabel(TEXT.categorySwitcherMenuLabel)
-              .getByRole('button', { name: TEXT[categoryId], exact: true })
-              .getByText(TEXT[categoryId])
+              .locator('.LeftPanel .leftBar')
+              .getByRole('button', { name: category, exact: true })
 
             await getRow(page, row).dragTo(categoryElement, {
               sourcePosition: ASSET_ROW_SAFE_POSITION,

app/gui/integration-test/actions/goToPageActions.ts

@@ -23,7 +23,7 @@ export function goToPageActions<Context>(
     drive: () =>
       step('Go to Drive', (page) =>
         // Drive is not a separate tab, we focus left panel instead.
-        page.getByTestId('assets-table-assets-unselector').first().click(),
+        page.locator('.leftBar').click(),
       ).into(DrivePageActions<Context>),
     projectView: () =>
       step('Go to Project page', (page) =>

app/gui/src/components/AppContainer/AppContainer.vue

@@ -20,7 +20,12 @@ import { normalizeSlashes } from 'enso-common/src/utilities/file'
 import { computed, onMounted, onUnmounted, shallowRef, toRef } from 'vue'
 import MiddlePanel from './MiddlePanel.vue'
 
+import type { TransferBetweenCategoriesFunction } from '#/layouts/Drive/Categories'
+import type { ConfirmDeleteModalProps } from '#/modals/ConfirmDeleteModal'
+import { provideDriveLocation } from '$/providers/drive'
+import { provideReactApi } from '$/providers/reactApi'
 import { useNavigateLink } from '$/utils/links'
+import { proxyRefs } from '$/utils/reactivity'
 import PopoverRootProvider from '@/components/PopoverRootProvider.vue'
 import LeftPanel from './LeftPanel.vue'
 import RightPanel from './RightPanel.vue'
@@ -31,6 +36,13 @@ const UserBar = reactComponent(UserBarReact)
 </script>
 
 <script setup lang="ts">
+const props = defineProps<{
+  startReactTransition: (action: () => void) => void
+  isReactTransitioning: boolean
+  transferBetweenCategories: TransferBetweenCategoriesFunction
+  confirmDelete: (properties: ConfirmDeleteModalProps) => void
+}>()
+
 // NOTE: This cannot be `useTemplateRef`, because that creates a **readonly** ref, and it interferes
 // with veaury's ref assignment implementation that runs during parent React component lifecycle.
 const fullscreenRoot = shallowRef<HTMLElement>()
@@ -42,6 +54,15 @@ const anyTabs = computed(() => containerData.tabList.length > 0)
 provideAsyncResources(openedProjects)
 provideRightPanelData(toRef(containerData, 'focusedPanel'))
 provideFullscreenRoot(fullscreenRoot)
+provideDriveLocation(props.startReactTransition)
+provideReactApi(
+  proxyRefs({
+    startTransition: props.startReactTransition,
+    isTransitioning: toRef(props, 'isReactTransitioning'),
+    transferBetweenCategories: props.transferBetweenCategories,
+    confirmDelete: props.confirmDelete,
+  }),
+)
 
 const HELP_URLS: Record<ActionName & `help.${string}`, string> = {
   'help.whatsNew': 'https://community.ensoanalytics.com/c/what-is-new-in-enso/',