reputation-key/src/components/features/settings/google-connection-settings-row.stories.tsx at 00b8ae2e525274a97cc9000dff2d81421caca173 · kodes-agency/reputation-key · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// The Organization's Google connection row. Disconnecting stops syncing and
// replying and revokes access, for every Property that uses the account, so the
// button asks first (the Property-level disconnect already did). What the
// account imported stays until Google's 30-day limit.
import type { Meta, StoryObj } from '@storybook/react'
import { expect, fn, userEvent, waitFor } from 'storybook/test'
import type { GoogleConnectionDto } from '#/contexts/integration/application/public-api'
import { openAlertDialog } from '#/components/ui/confirmation-dialog.stories.open'
import { GoogleConnectionSettingsRow } from './google-connection-settings-row'

const connection: GoogleConnectionDto = {
  id: 'connection-7',
  organizationId: 'organization-1',
  accountEmail: 'owner@harborline.test',
  scopes: [],
  connectedBy: 'user-1',
  visibility: 'organization',
  status: 'active',
  createdAt: new Date('2026-08-27T00:00:00Z'),
  updatedAt: new Date('2026-08-27T00:00:00Z'),
}

const meta: Meta<typeof GoogleConnectionSettingsRow> = {
  title: 'Settings/GoogleConnectionSettingsRow',
  component: GoogleConnectionSettingsRow,
  tags: ['autodocs'],
  args: {
    connection,
    getAuthUrl: fn(async () => ({ url: 'https://accounts.google.test/oauth' })),
    authorizationPending: false,
    disconnectPending: false,
    onDisconnect: fn(),
  },
}
export default meta
type Story = StoryObj<typeof GoogleConnectionSettingsRow>

const openDisconnect = (canvasElement: HTMLElement) =>
  openAlertDialog(canvasElement, 'Disconnect')

/** Pressing Disconnect asks; nothing is disconnected until the dialog is confirmed. */
export const AsksBeforeDisconnecting: Story = {
  play: async ({ canvasElement, args }) => {
    const dialog = await openDisconnect(canvasElement)
    expect(args.onDisconnect).not.toHaveBeenCalled()
    expect(
      dialog.getByRole('heading', { name: 'Disconnect this Google account?' }),
    ).toBeVisible()
    await userEvent.click(dialog.getByRole('button', { name: 'Disconnect account' }))
    expect(args.onDisconnect).toHaveBeenCalledTimes(1)
    expect(args.onDisconnect).toHaveBeenCalledWith('connection-7')
  },
}

/** Keeping the connection leaves it exactly as it was. */
export const KeepConnected: Story = {
  play: async ({ canvasElement, args }) => {
    const dialog = await openDisconnect(canvasElement)
    await userEvent.click(dialog.getByRole('button', { name: 'Keep connected' }))
    await waitFor(() => expect(dialog.queryByRole('alertdialog')).not.toBeInTheDocument())
    expect(args.onDisconnect).not.toHaveBeenCalled()
  },
}

export const AsksBeforeDisconnectingLight: Story = {
  parameters: { theme: 'light' },
  play: async ({ canvasElement, args }) => {
    await openDisconnect(canvasElement)
    expect(args.onDisconnect).not.toHaveBeenCalled()
  },
}