From 8d0cdacb525a8a222d34aa7a5a23780ad08255a9 Mon Sep 17 00:00:00 2001 From: Denise Li Date: Tue, 3 Sep 2024 16:56:15 -0400 Subject: [PATCH] feat: delete Deployments tab, module tree uses old deployments components (#2560) * Removes `Deployments` tab * Removes all the extraneous page headers (https://github.com/TBD54566975/ftl/issues/2490) * Fixes all the routing to point to `/modules/{moduleName}/...` instead of `/deployments/{deploymentKey}/...` * Minor cleanup of deployment components' internal logic after replacing `deploymentKey` with `moduleName` in the outermost interface https://github.com/user-attachments/assets/ad785b7c-3e88-4d8d-8edb-b14bed441c98 --- frontend/console/e2e/deployment.spec.ts | 14 ---- frontend/console/e2e/deployments.spec.ts | 10 --- frontend/console/e2e/module.spec.ts | 15 ++++ frontend/console/e2e/modules.spec.ts | 10 +++ frontend/console/e2e/verb.spec.ts | 12 ++-- frontend/console/playwright-report/index.html | 68 +++++++++++++++++++ .../features/deployments/DeploymentCard.tsx | 2 +- .../features/deployments/DeploymentPage.tsx | 44 +++--------- .../features/deployments/DeploymentsPage.tsx | 2 - .../src/features/modules/ModulePanel.tsx | 7 +- .../src/features/modules/ModulesPage.tsx | 7 +- .../src/features/modules/ModulesTree.tsx | 1 - .../src/features/modules/decls/DeclPanel.tsx | 4 +- .../console/src/features/verbs/VerbPage.tsx | 43 ++++-------- .../src/layout/navigation/Navigation.tsx | 1 - .../src/providers/routing-provider.tsx | 6 -- frontend/console/test-results/.last-run.json | 4 ++ 17 files changed, 134 insertions(+), 116 deletions(-) delete mode 100644 frontend/console/e2e/deployment.spec.ts delete mode 100644 frontend/console/e2e/deployments.spec.ts create mode 100644 frontend/console/e2e/module.spec.ts create mode 100644 frontend/console/e2e/modules.spec.ts create mode 100644 frontend/console/playwright-report/index.html create mode 100644 frontend/console/test-results/.last-run.json diff --git a/frontend/console/e2e/deployment.spec.ts b/frontend/console/e2e/deployment.spec.ts deleted file mode 100644 index f9d07575a0..0000000000 --- a/frontend/console/e2e/deployment.spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect, ftlTest } from './ftl-test' - -ftlTest('shows verbs for deployment', async ({ page }) => { - const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' }) - await deploymentsNavItem.click() - - const deploymentEcho = page.getByText('dpl-echo') - await deploymentEcho.click() - - await expect(page).toHaveURL(/\/deployments\/dpl-echo-.*/) - - await expect(page.getByText('echo', { exact: true })).toBeVisible() - await expect(page.getByText('exported', { exact: true })).toBeVisible() -}) diff --git a/frontend/console/e2e/deployments.spec.ts b/frontend/console/e2e/deployments.spec.ts deleted file mode 100644 index dbe1ba67fa..0000000000 --- a/frontend/console/e2e/deployments.spec.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { expect, ftlTest } from './ftl-test' - -ftlTest('shows active deployments', async ({ page }) => { - const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' }) - await deploymentsNavItem.click() - await expect(page).toHaveURL(/\/deployments$/) - - await expect(page.getByText('dpl-time')).toBeVisible() - await expect(page.getByText('dpl-echo')).toBeVisible() -}) diff --git a/frontend/console/e2e/module.spec.ts b/frontend/console/e2e/module.spec.ts new file mode 100644 index 0000000000..16a71ddad9 --- /dev/null +++ b/frontend/console/e2e/module.spec.ts @@ -0,0 +1,15 @@ +import { expect, ftlTest } from './ftl-test' + +ftlTest('shows verbs for deployment', async ({ page }) => { + const modulesNavItem = page.getByRole('link', { name: 'Modules' }) + await modulesNavItem.click() + + const moduleEchoRow = page.getByRole('button', { name: 'echo' }) + const moduleEcho = moduleEchoRow.locator('svg').nth(1) + await moduleEcho.click() + + await expect(page).toHaveURL(/\/modules\/echo/) + + await expect(page.getByText('Deployment', { exact: true })).toBeVisible() + await expect(page.getByText('Deployed dpl-echo')).toBeVisible() +}) diff --git a/frontend/console/e2e/modules.spec.ts b/frontend/console/e2e/modules.spec.ts new file mode 100644 index 0000000000..97a3d06045 --- /dev/null +++ b/frontend/console/e2e/modules.spec.ts @@ -0,0 +1,10 @@ +import { expect, ftlTest } from './ftl-test' + +ftlTest('shows active modules', async ({ page }) => { + const modulesNavItem = page.getByRole('link', { name: 'Modules' }) + await modulesNavItem.click() + await expect(page).toHaveURL(/\/modules$/) + + await expect(page.getByText('dpl-time')).toBeVisible() + await expect(page.getByText('dpl-echo')).toBeVisible() +}) diff --git a/frontend/console/e2e/verb.spec.ts b/frontend/console/e2e/verb.spec.ts index bc71c272db..6a857fce42 100644 --- a/frontend/console/e2e/verb.spec.ts +++ b/frontend/console/e2e/verb.spec.ts @@ -1,16 +1,16 @@ import { expect, ftlTest } from './ftl-test' ftlTest.beforeEach(async ({ page }) => { - const deploymentsNavItem = page.getByRole('link', { name: 'Deployments' }) - await deploymentsNavItem.click() + const modulesNavItem = page.getByRole('link', { name: 'Modules' }) + await modulesNavItem.click() - const deploymentEcho = page.getByText('dpl-echo') - await deploymentEcho.click() + const moduleEcho = page.getByRole('button', { name: 'echo' }) + await moduleEcho.click() - const verbEcho = page.getByText('echo', { exact: true }) + const verbEcho = page.getByRole('button', { name: 'echo Exported' }) await verbEcho.click() - await expect(page).toHaveURL(/\/deployments\/dpl-echo-[^/]+\/verbs\/echo/) + await expect(page).toHaveURL(/\/modules\/echo\/verb\/echo/) }) ftlTest('shows verb form', async ({ page }) => { diff --git a/frontend/console/playwright-report/index.html b/frontend/console/playwright-report/index.html new file mode 100644 index 0000000000..6f946aec02 --- /dev/null +++ b/frontend/console/playwright-report/index.html @@ -0,0 +1,68 @@ + + + + + + + + + Playwright Test Report + + + + +
+ + + \ No newline at end of file diff --git a/frontend/console/src/features/deployments/DeploymentCard.tsx b/frontend/console/src/features/deployments/DeploymentCard.tsx index 6379a0a614..e4d5dae2e6 100644 --- a/frontend/console/src/features/deployments/DeploymentCard.tsx +++ b/frontend/console/src/features/deployments/DeploymentCard.tsx @@ -20,7 +20,7 @@ export const DeploymentCard = ({ deploymentKey, className }: { deploymentKey: st }, [modules.data]) return ( - navigate(`/deployments/${deploymentKey}`)}> + navigate(`/modules/${module?.name}`)}>

{deploymentKey}

diff --git a/frontend/console/src/features/deployments/DeploymentPage.tsx b/frontend/console/src/features/deployments/DeploymentPage.tsx index f898bde547..23dc8c7ec5 100644 --- a/frontend/console/src/features/deployments/DeploymentPage.tsx +++ b/frontend/console/src/features/deployments/DeploymentPage.tsx @@ -1,26 +1,20 @@ -import { RocketLaunchIcon } from '@heroicons/react/24/outline' -import { useContext, useEffect, useMemo, useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' +import { useEffect, useMemo, useState } from 'react' +import { useNavigate } from 'react-router-dom' import { useModules } from '../../api/modules/use-modules' import { modulesFilter } from '../../api/timeline' import { Badge } from '../../components/Badge' import { Card } from '../../components/Card' import { Page } from '../../layout' import type { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb' -import { NotificationType, NotificationsContext } from '../../providers/notifications-provider' import { SidePanelProvider } from '../../providers/side-panel-provider' -import { deploymentKeyModuleName } from '../modules/module.utils' import { Timeline } from '../timeline/Timeline' import { isCron, isExported, isHttpIngress } from '../verbs/verb.utils' const timeSettings = { isTailing: true, isPaused: false } -export const DeploymentPage = () => { - const navigate = useNavigate() - const { deploymentKey } = useParams() +export const DeploymentPage = ({ moduleName }: { moduleName: string }) => { const modules = useModules() - const notification = useContext(NotificationsContext) - const navgation = useNavigate() + const navigate = useNavigate() const [module, setModule] = useState() const filters = useMemo(() => { @@ -30,41 +24,21 @@ export const DeploymentPage = () => { }, [module?.deploymentKey]) useEffect(() => { - if (modules.isSuccess && modules.data.modules.length > 0 && deploymentKey) { - let module = modules.data.modules.find((module) => module.deploymentKey === deploymentKey) - if (!module) { - const moduleName = deploymentKeyModuleName(deploymentKey) - if (moduleName) { - module = modules.data.modules.find((module) => module.name === moduleName) - navgation(`/deployments/${module?.deploymentKey}`) - notification.showNotification({ - title: 'Showing latest deployment', - message: `The previous deployment of ${module?.deploymentKey} was not found. Showing the latest deployment of ${module?.name} instead.`, - type: NotificationType.Info, - }) - setModule(module) - } - } else { - setModule(module) - } + if (modules.isSuccess && modules.data.modules.length > 0) { + const module = modules.data.modules.find((module) => module.name === moduleName) + setModule(module) } - }, [modules.data, deploymentKey]) + }, [modules.data, moduleName]) return ( - } title={module?.deploymentKey || 'Loading...'} breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]} /> -
{module?.verbs.map((verb) => ( - navigate(`/deployments/${module.deploymentKey}/verbs/${verb.verb?.name}`)} - > + navigate(`/modules/${module.name}/verb/${verb.verb?.name}`)}>

{verb.verb?.name}

{badges(verb).length > 0 && (
diff --git a/frontend/console/src/features/deployments/DeploymentsPage.tsx b/frontend/console/src/features/deployments/DeploymentsPage.tsx index e0456efe3e..cbde32f835 100644 --- a/frontend/console/src/features/deployments/DeploymentsPage.tsx +++ b/frontend/console/src/features/deployments/DeploymentsPage.tsx @@ -1,4 +1,3 @@ -import { RocketLaunchIcon } from '@heroicons/react/24/outline' import { useModules } from '../../api/modules/use-modules' import { Page } from '../../layout' import { DeploymentCard } from './DeploymentCard' @@ -12,7 +11,6 @@ export const DeploymentsPage = () => { return ( - } title='Deployments' /> {modules.isLoading &&
Loading...
} {modules.isSuccess && ( diff --git a/frontend/console/src/features/modules/ModulePanel.tsx b/frontend/console/src/features/modules/ModulePanel.tsx index 3b9e30bc5d..7b378b8bba 100644 --- a/frontend/console/src/features/modules/ModulePanel.tsx +++ b/frontend/console/src/features/modules/ModulePanel.tsx @@ -1,11 +1,8 @@ import { useParams } from 'react-router-dom' +import { DeploymentPage } from '../deployments/DeploymentPage' export const ModulePanel = () => { const { moduleName } = useParams() - return ( -
-

Module: {moduleName}

-
- ) + return } diff --git a/frontend/console/src/features/modules/ModulesPage.tsx b/frontend/console/src/features/modules/ModulesPage.tsx index 41a3abdcb5..07eebd6358 100644 --- a/frontend/console/src/features/modules/ModulesPage.tsx +++ b/frontend/console/src/features/modules/ModulesPage.tsx @@ -2,17 +2,14 @@ import type React from 'react' import { useMemo, useState } from 'react' import { useSchema } from '../../api/schema/use-schema' import { ResizableHorizontalPanels } from '../../components/ResizableHorizontalPanels' +import { DeploymentsPage } from '../deployments/DeploymentsPage' import { ModulesTree } from './ModulesTree' import { moduleTreeFromSchema } from './module.utils' const treeWidthStorageKey = 'tree_w' export const ModulesPanel = () => { - return ( -
-

Content

-
- ) + return } export const ModulesPage = ({ body }: { body: React.ReactNode }) => { diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx index e2a9c048e0..3a838567f4 100644 --- a/frontend/console/src/features/modules/ModulesTree.tsx +++ b/frontend/console/src/features/modules/ModulesTree.tsx @@ -92,7 +92,6 @@ const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: Module