[#436] Integrate history endpoints

.github/workflows/ci.yml

@@ -164,10 +164,6 @@ jobs:
         working-directory: apps/qc-app
         run: npm ci --workspaces=false
 
-      - name: Install local QC utils package
-        working-directory: apps/qc-app
-        run: npm install ../../packages/qc-utils --no-save --package-lock=false --workspaces=false
-
       - name: Run QC app typecheck
         working-directory: apps/qc-app
         run: npm run typecheck
@@ -395,10 +391,6 @@ jobs:
         working-directory: apps/qc-app
         run: npm ci --workspaces=false
 
-      - name: Install local QC utils package
-        working-directory: apps/qc-app
-        run: npm install ../../packages/qc-utils --no-save --package-lock=false --workspaces=false
-
       - name: Install Playwright browsers
         working-directory: apps/qc-app
         run: npx playwright install --with-deps chromium firefox

apps/data-management/e2e/specs/orchestration.spec.ts

@@ -1,17 +1,25 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type Page } from '@playwright/test'
 
 import { authenticateSession } from '../support/auth'
 import { fixtures, users } from '../support/fixtures'
 import { chooseOverlayOption, selectWorkspace } from '../support/ui'
 
 test.describe('orchestration', () => {
+  async function selectDataConnection(page: Page) {
+    await page
+      .locator('.sidebar-item--connection')
+      .filter({ hasText: fixtures.orchestration.dataConnectionName })
+      .click()
+  }
+
   test('orchestration page loads seeded workspace orchestration data', async ({
     page,
   }) => {
     await authenticateSession(page, users.owner.email, users.owner.password)
 
-    await page.goto('/orchestration')
+    await page.goto('/orchestration/ingestion')
     await selectWorkspace(page, fixtures.workspaces.private.name)
+    await selectDataConnection(page)
 
     await expect(page.getByText('Job orchestration', { exact: true })).toBeVisible()
     await expect(
@@ -29,8 +37,9 @@ test.describe('orchestration', () => {
   }) => {
     await authenticateSession(page, users.owner.email, users.owner.password)
 
-    await page.goto('/orchestration')
+    await page.goto('/orchestration/ingestion')
     await selectWorkspace(page, fixtures.workspaces.private.name)
+    await selectDataConnection(page)
 
     await expect(page.getByText('Job orchestration', { exact: true })).toBeVisible()
 
@@ -55,8 +64,9 @@ test.describe('orchestration', () => {
     page,
   }) => {
     await authenticateSession(page, users.owner.email, users.owner.password)
-    await page.goto('/orchestration')
+    await page.goto('/orchestration/ingestion')
     await selectWorkspace(page, fixtures.workspaces.private.name)
+    await selectDataConnection(page)
 
     await expect(
       page.getByRole('heading', {
@@ -68,6 +78,7 @@ test.describe('orchestration', () => {
     await expect(page.getByText(fixtures.orchestration.dataConnectionName)).toHaveCount(0)
 
     await selectWorkspace(page, fixtures.workspaces.private.name)
+    await selectDataConnection(page)
     await expect(
       page.getByRole('heading', {
         name: fixtures.orchestration.dataConnectionName,

apps/data-management/e2e/specs/sites.spec.ts

@@ -188,6 +188,41 @@ test.describe('sites and workspaces', () => {
     await expect(page).toHaveURL(/\/sites$/)
   })
 
+  test('canceling or dismissing site edits discards unsaved changes', async ({
+    page,
+  }) => {
+    const stamp = Date.now()
+    const unsavedProvince = `Unsaved Province ${stamp}`
+    const unsavedCounty = `Unsaved County ${stamp}`
+
+    await authenticateSession(page, users.owner.email, users.owner.password)
+    await page.goto(`/sites/${fixtures.things.mutablePublic.id}`)
+
+    await page.getByTestId('edit-site-button').click()
+    await page.getByLabel('State/Province/Region').fill(unsavedProvince)
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    await expect(page.getByText(unsavedProvince, { exact: true })).toHaveCount(0)
+
+    await page.getByTestId('edit-site-button').click()
+    await expect(page.getByLabel('State/Province/Region')).not.toHaveValue(
+      unsavedProvince
+    )
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    await page.getByTestId('edit-site-button').click()
+    await page.getByLabel('County/District').fill(unsavedCounty)
+    await page.keyboard.press('Escape')
+
+    await expect(page.getByText(unsavedCounty, { exact: true })).toHaveCount(0)
+
+    await page.getByTestId('edit-site-button').click()
+    await expect(page.getByLabel('County/District')).not.toHaveValue(
+      unsavedCounty
+    )
+    await page.getByRole('button', { name: 'Cancel' }).click()
+  })
+
   test('owner can edit, toggle privacy for, and delete a site with datastream CRUD', async ({
     page,
     browser,

apps/data-management/e2e/specs/transfers.spec.ts

@@ -40,6 +40,14 @@ async function deleteWorkspace(page: Page, name: string) {
   await expect(page.getByRole('cell', { name, exact: true })).toHaveCount(0)
 }
 
+function pendingTransferRow(page: Page, name: string) {
+  return page
+    .getByRole('row', { name: new RegExp(name) })
+    .filter({
+      has: page.getByRole('button', { name: 'Accept transfer' }),
+    })
+}
+
 test.describe('workspace transfers', () => {
   test.use({ storageState: { cookies: [], origins: [] } })
 
@@ -55,14 +63,18 @@ test.describe('workspace transfers', () => {
 
     await page.getByRole('button', { name: 'Pending workspace transfer' }).click()
 
+    const transferRow = pendingTransferRow(page, fixtures.workspaces.transfer.name)
     await expect(
-      page.getByRole('cell', { name: fixtures.workspaces.transfer.name, exact: true })
+      transferRow.getByRole('cell', {
+        name: fixtures.workspaces.transfer.name,
+        exact: true,
+      })
     ).toBeVisible()
     await expect(
-      page.getByRole('button', { name: 'Accept transfer' })
+      transferRow.getByRole('button', { name: 'Accept transfer' })
     ).toBeVisible()
     await expect(
-      page.getByRole('button', { name: 'Cancel transfer' })
+      transferRow.getByRole('button', { name: 'Cancel transfer' })
     ).toBeVisible()
   })
 
@@ -88,15 +100,12 @@ test.describe('workspace transfers', () => {
     await targetPage.goto('/orchestration')
     await targetPage.getByRole('button', { name: 'Pending workspace transfer' }).click()
 
-    const pendingRow = targetPage.getByRole('row', {
-      name: new RegExp(workspaceName),
-    })
+    const pendingRow = pendingTransferRow(targetPage, workspaceName)
     await expect(pendingRow).toBeVisible()
     await pendingRow.getByRole('button', { name: 'Cancel transfer' }).click()
     await expect(pendingRow).toHaveCount(0)
 
-    await page.reload()
-    await page.getByRole('button', { name: 'Workspaces', exact: true }).click()
+    await page.goto('/orchestration/workspaces')
     await deleteWorkspace(page, workspaceName)
 
     await targetContext.close()
@@ -124,9 +133,7 @@ test.describe('workspace transfers', () => {
     await targetPage.goto('/orchestration')
     await targetPage.getByRole('button', { name: 'Pending workspace transfer' }).click()
 
-    const pendingRow = targetPage.getByRole('row', {
-      name: new RegExp(workspaceName),
-    })
+    const pendingRow = pendingTransferRow(targetPage, workspaceName)
     await expect(pendingRow).toBeVisible()
     await pendingRow.getByRole('button', { name: 'Accept transfer' }).click()
     await expect(pendingRow).toHaveCount(0)
@@ -136,8 +143,8 @@ test.describe('workspace transfers', () => {
     await expect(ownedRow).toBeVisible()
     await expect(ownedRow).toContainText('Owner')
 
-    await page.reload()
-    await page.getByRole('button', { name: 'Workspaces', exact: true }).click()
+    await page.goto('/orchestration/workspaces')
+    await expect(page.getByRole('button', { name: 'Add workspace' })).toBeVisible()
     await expect(page.getByRole('cell', { name: workspaceName, exact: true })).toHaveCount(0)
 
     await deleteWorkspace(targetPage, workspaceName)

apps/data-management/e2e/specs/visualization.spec.ts

@@ -13,9 +13,22 @@ test.describe("visualization", () => {
     const workspaceFilter = page
       .getByRole("combobox", { name: "Workspaces" })
       .first();
+    const viewport = page.viewportSize();
+    const box = await workspaceFilter.boundingBox();
+    const isWithinViewport =
+      !!box &&
+      !!viewport &&
+      box.width > 0 &&
+      box.height > 0 &&
+      box.x + box.width > 0 &&
+      box.y + box.height > 0 &&
+      box.x < viewport.width &&
+      box.y < viewport.height;
+
     if (
       (await workspaceFilter.count()) > 0 &&
-      (await workspaceFilter.isVisible())
+      (await workspaceFilter.isVisible()) &&
+      isWithinViewport
     ) {
       return;
     }

apps/data-management/e2e/support/ui.ts

@@ -29,8 +29,19 @@ export async function chooseAutocompleteOption(
   optionText: string
 ) {
   const field = page.getByRole('combobox', { name: label }).first()
-  await field.click()
-  await field.fill(optionText)
+  const container = field.locator('xpath=ancestor::*[@role="combobox"][1]')
+  await expect(field).toBeVisible()
+  await container.scrollIntoViewIfNeeded()
+  const toggle = container.getByRole('button').last()
+  if ((await toggle.count()) > 0) {
+    await toggle.click({ force: true })
+  }
+  await field.evaluate((element) => {
+    ;(element as HTMLInputElement).focus()
+  })
+  await page.keyboard.press('Control+A')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.type(optionText)
   await chooseOverlayOption(page, optionText)
 }
 

apps/data-management/src/App.vue

@@ -1,24 +1,44 @@
 <template>
-  <v-app>
-    <Navbar v-if="!route.meta.hideNavBar" />
+  <router-view v-slot="{ Component }">
+    <v-app>
+      <Navbar
+        v-if="Component && isHydroServerReady && !route.meta.hideNavBar"
+      />
 
-    <v-main>
-      <router-view />
-    </v-main>
+      <v-main>
+        <component :is="Component" v-if="Component" />
+        <v-container v-else-if="initializationError" class="fill-height">
+          <v-row justify="center" align="center">
+            <v-col cols="12" md="6" class="text-center">
+              <h5 class="text-h5">Unable to load HydroServer</h5>
+              <p class="mt-3 text-body-1">
+                Check your connection and refresh the page.
+              </p>
+            </v-col>
+          </v-row>
+        </v-container>
+        <FullScreenLoader v-else loading-text="Loading HydroServer..." />
+      </v-main>
 
-    <Footer v-if="!route.meta.hideFooter" class="flex-grow-0" />
-    <Notifications />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-      rel="stylesheet"
-    />
-  </v-app>
+      <Footer v-if="Component && !route.meta.hideFooter" class="flex-grow-0" />
+      <Notifications />
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+      />
+    </v-app>
+  </router-view>
 </template>
 
 <script setup lang="ts">
+import {
+  initializationError,
+  isHydroServerReady,
+} from '@/bootstrap/appInitialization'
 import Navbar from '@/components/base/Navbar.vue'
 import Footer from '@/components/base/Footer.vue'
 import Notifications from '@/components/base/Notifications.vue'
+import FullScreenLoader from '@/components/base/FullScreenLoader.vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()