feat(api): add CloudFront distributions to the cloud explorer

2026-10-24 14:10:16 -04:00
parent 5c3c73c582
commit 6586f48539
23 changed files with 1055 additions and 55 deletions
@@ -0,0 +1,71 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import {render, screen, within} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {beforeEach, expect, test, vi} from 'vitest'
+import {CloudFrontPanel} from './CloudFrontPanel'
+import type {CloudResource} from '@/types/resource'
+
+const api = vi.hoisted(() => ({
+    getCloudResource: vi.fn(),
+    setDistributionEnabled: vi.fn(),
+    createDistributionInvalidation: vi.fn(),
+}))
+
+vi.mock('@/api/cloudProxyClient', () => api)
+vi.mock('@/lib/accountStore', () => ({useAccountId: () => '000000000000'}))
+
+const VIEWER_URL = 'http://e7cpm0p0g0vc8d.cloudfront.localhost.floci.io:4566/'
+const distribution: CloudResource = {
+    id: 'E7CPM0P0G0VC8D', name: 'e7cpm0p0g0vc8d.cloudfront.net', cloud: 'aws', service: 'cdn', type: 'distribution',
+    region: null, createdAt: null, status: 'Deployed',
+    metadata: {
+        viewerUrl: VIEWER_URL, domainName: 'e7cpm0p0g0vc8d.cloudfront.net', enabled: true, defaultRootObject: 'index.html',
+        origins: [{id: 's3-site', domainName: 'site.s3.amazonaws.com', kind: 's3', protocol: null}],
+        behaviors: [{pathPattern: 'Default (*)', originId: 's3-site', viewerProtocol: 'redirect-to-https', methods: ['GET', 'HEAD']}],
+        invalidations: [{id: 'I1', status: 'Completed', createdAt: null, paths: []}],
+    },
+}
+
+function renderPanel() {
+    const client = new QueryClient({defaultOptions: {queries: {retry: false}}})
+    return render(<QueryClientProvider client={client}><CloudFrontPanel resource={distribution} runtimeReachable/></QueryClientProvider>)
+}
+
+beforeEach(() => {
+    vi.clearAllMocks()
+    api.getCloudResource.mockResolvedValue(distribution)
+    api.setDistributionEnabled.mockImplementation(async (_cloud, _id, enabled) => ({...distribution, metadata: {...distribution.metadata, enabled}}))
+    api.createDistributionInvalidation.mockImplementation(async (_cloud, _id, paths) => ({id: 'I2', status: 'Completed', createdAt: null, paths}))
+})
+
+test('opens the distribution locally and shows its origins and behaviours', async () => {
+    renderPanel()
+
+    expect(await screen.findByRole('link', {name: /Open/})).toHaveAttribute('href', VIEWER_URL)
+    expect(screen.getByText('site.s3.amazonaws.com')).toBeInTheDocument()
+    expect(screen.getByText('Redirect to HTTPS')).toBeInTheDocument()
+    expect(screen.getByText('I1')).toBeInTheDocument()
+})
+
+test('disables the distribution', async () => {
+    const user = userEvent.setup()
+    renderPanel()
+
+    await user.click(await screen.findByRole('button', {name: 'Disable'}))
+    expect(api.setDistributionEnabled).toHaveBeenCalledWith('aws', distribution.id, false)
+    expect(await screen.findByText(/Distribution disabled/)).toBeInTheDocument()
+})
+
+test('invalidates the paths entered, one per line', async () => {
+    const user = userEvent.setup()
+    renderPanel()
+
+    const form = await screen.findByRole('form', {name: 'Create invalidation'})
+    const field = within(form).getByLabelText(/Paths/)
+    await user.clear(field)
+    await user.type(field, '/index.html{enter}/assets/*')
+    await user.click(within(form).getByRole('button', {name: 'Create invalidation'}))
+
+    expect(api.createDistributionInvalidation).toHaveBeenCalledWith('aws', distribution.id, ['/index.html', '/assets/*'])
+    expect(await screen.findByText(/Invalidation I2 completed for \/index.html, \/assets\/\*/)).toBeInTheDocument()
+})