enso/app/ide-desktop/lib/dashboard/e2e/organizationSettings.spec.ts
Sergei Garin 37cc980082
Offline Mode Support (#10317)
#### Tl;dr
Closes: enso-org/cloud-v2#1283
This PR significantly reimplements Offline mode

<details><summary>Demo Presentation</summary>
<p>


https://github.com/enso-org/enso/assets/61194245/752d0423-9c0a-43ba-91e3-4a6688f77034


</p>
</details>

---

#### Context:
Offline mode is one of the core features of the dashboard. Unfortunately, after adding new features and a few refactoring,  we lost the ability to work offline.
This PR should bring this functionality back, with a few key differences:
1. We require users to sign in before using the dashboard even in local mode.
2. Once a user is logged in, we allow him to work with local files
3. If a user closes the dashboard, and then open it, he can continue using it in offline mode


#### This Change:
What does this change do in the larger context? Specific details to highlight for review:
1. Reimplements `<AuthProvider />` functionality, now it implemented on top of `<Suspense />` and ReactQuery
2. Reimplements Backend module flow, now remote backend is always created, You no longer need to check if the RemoteBackend is present
3. Introduces new `<Suspense />` component, which is aware of offline status
4. Introduce new offline-related hooks
5. Add a banner to the form if it's unable to submit it offline
6. Refactor `InviteUserDialog` to the new `<Form />` component
7. Fixes redirect bug when the app doesn't redirect a user to the dashboard after logging in
8. Fixes strange behavior when `/users/me` could stuck into infinite refetch
9. Redesign the Cloud table for offline mode.
10. Adds blocking UI dialog when a user clicks "log out" button

#### Test Plan:
This PR requires thorough QA on the login flow across the browser and IDE. All redirect logic must stay unchanged.

---
2024-06-21 07:14:40 +00:00

95 lines
3.5 KiB
TypeScript

/** @file Test the organization settings tab. */
import * as test from '@playwright/test'
import * as actions from './actions'
test.test('organization settings', async ({ page }) => {
const { api } = await actions.mockAllAndLogin({ page })
const localActions = actions.settings.organization
// Setup
api.setCurrentOrganization(api.defaultOrganization)
await test.test.step('Initial state', () => {
test.expect(api.currentOrganization()?.name).toBe(api.defaultOrganizationName)
test.expect(api.currentOrganization()?.email).toBe(null)
test.expect(api.currentOrganization()?.picture).toBe(null)
test.expect(api.currentOrganization()?.website).toBe(null)
test.expect(api.currentOrganization()?.address).toBe(null)
})
await test.expect(page.getByText('Logging in to Enso...')).not.toBeVisible()
await localActions.go(page)
const nameInput = localActions.locateNameInput(page)
const newName = 'another organization-name'
await test.test.step('Set name', async () => {
await nameInput.fill(newName)
await nameInput.press('Enter')
test.expect(api.currentOrganization()?.name).toBe(newName)
test.expect(api.currentUser()?.name).not.toBe(newName)
})
await test.test.step('Unset name (should fail)', async () => {
await nameInput.fill('')
await nameInput.press('Enter')
test.expect(api.currentOrganization()?.name).toBe(newName)
await test.expect(nameInput).toHaveValue(newName)
})
const invalidEmail = 'invalid@email'
const emailInput = localActions.locateEmailInput(page)
await test.test.step('Set invalid email', async () => {
await emailInput.fill(invalidEmail)
await emailInput.press('Enter')
test.expect(api.currentOrganization()?.email).toBe(null)
})
const newEmail = 'organization@email.com'
await test.test.step('Set email', async () => {
await emailInput.fill(newEmail)
await emailInput.press('Enter')
test.expect(api.currentOrganization()?.email).toBe(newEmail)
await test.expect(emailInput).toHaveValue(newEmail)
})
const websiteInput = localActions.locateWebsiteInput(page)
const newWebsite = 'organization.org'
// NOTE: It's not yet possible to unset the website or the location.
await test.test.step('Set website', async () => {
await websiteInput.fill(newWebsite)
await websiteInput.press('Enter')
test.expect(api.currentOrganization()?.website).toBe(newWebsite)
await test.expect(websiteInput).toHaveValue(newWebsite)
})
const locationInput = localActions.locateLocationInput(page)
const newLocation = 'Somewhere, CA'
await test.test.step('Set location', async () => {
await locationInput.fill(newLocation)
await locationInput.press('Enter')
test.expect(api.currentOrganization()?.address).toBe(newLocation)
await test.expect(locationInput).toHaveValue(newLocation)
})
})
test.test('upload organization profile picture', async ({ page }) => {
const { api } = await actions.mockAllAndLogin({ page })
const localActions = actions.settings.organizationProfilePicture
await localActions.go(page)
const fileChooserPromise = page.waitForEvent('filechooser')
await localActions.locateInput(page).click()
const fileChooser = await fileChooserPromise
const name = 'bar.jpeg'
const content = 'organization profile picture'
await fileChooser.setFiles([{ name, buffer: Buffer.from(content), mimeType: 'image/jpeg' }])
await test
.expect(() => {
test.expect(api.currentOrganizationProfilePicture()).toEqual(content)
})
.toPass()
})