Merge pull request #13121 from overleaf/ii-history-react-change-list-stories

[web] History migration change list stories

GitOrigin-RevId: 1bc3ce12cb5c096ab45beae083181f8158596292

services/web/frontend/stories/history/history-version.stories.tsx

@@ -0,0 +1,92 @@
+import HistoryVersionComponent from '../../js/features/history/components/change-list/history-version'
+import { ScopeDecorator } from '../decorators/scope'
+import { HistoryProvider } from '../../js/features/history/context/history-context'
+import { disableControlsOf } from '../utils/arg-types'
+
+const update = {
+  fromV: 3,
+  toV: 4,
+  meta: {
+    users: [
+      {
+        first_name: 'john.doe',
+        last_name: '',
+        email: 'john.doe@test.com',
+        id: '631710ab1094c5002647184e',
+      },
+    ],
+    start_ts: 1681220036419,
+    end_ts: 1681220036419,
+  },
+  labels: [
+    {
+      id: '643561cdfa2b2beac88f0024',
+      comment: 'tag-1',
+      version: 4,
+      user_id: '123',
+      created_at: '2023-04-11T13:34:05.856Z',
+      user_display_name: 'john.doe',
+    },
+    {
+      id: '643561d1fa2b2beac88f0025',
+      comment: 'tag-2',
+      version: 4,
+      user_id: '123',
+      created_at: '2023-04-11T13:34:09.280Z',
+      user_display_name: 'john.doe',
+    },
+  ],
+  pathnames: [],
+  project_ops: [{ add: { pathname: 'name.tex' }, atV: 3 }],
+}
+
+export const HistoryVersion = (
+  args: React.ComponentProps<typeof HistoryVersionComponent>
+) => {
+  return (
+    <HistoryProvider>
+      <HistoryVersionComponent {...args} />
+    </HistoryProvider>
+  )
+}
+
+export default {
+  title: 'History / Change list',
+  component: HistoryVersionComponent,
+  args: {
+    update,
+    currentUserId: '1',
+    projectId: '123',
+    comparing: false,
+    faded: false,
+    showDivider: false,
+    selected: false,
+    setSelection: () => {},
+    dropdownOpen: false,
+    dropdownActive: false,
+    setActiveDropdownItem: () => {},
+    closeDropdownForItem: () => {},
+  },
+  argTypes: disableControlsOf(
+    'update',
+    'currentUserId',
+    'projectId',
+    'setSelection',
+    'dropdownOpen',
+    'dropdownActive',
+    'setActiveDropdownItem',
+    'closeDropdownForItem'
+  ),
+  decorators: [
+    ScopeDecorator,
+    (Story: React.ComponentType) => (
+      <div className="history-react">
+        <div className="change-list">
+          <div className="history-version-list-container">
+            <Story />
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+}

services/web/frontend/stories/history/label-version.stories.tsx

@@ -0,0 +1,75 @@
+import LabelListItemComponent from '../../js/features/history/components/change-list/label-list-item'
+import { ScopeDecorator } from '../decorators/scope'
+import { HistoryProvider } from '../../js/features/history/context/history-context'
+import { disableControlsOf } from '../utils/arg-types'
+
+const labels = [
+  {
+    id: '643561cdfa2b2beac88f0024',
+    comment: 'tag-1',
+    version: 1,
+    user_id: '123',
+    created_at: '2023-04-11T13:34:05.856Z',
+    user_display_name: 'john.doe',
+  },
+  {
+    id: '643561d1fa2b2beac88f0025',
+    comment: 'tag-2',
+    version: 1,
+    user_id: '123',
+    created_at: '2023-04-11T13:34:09.280Z',
+    user_display_name: 'john.doe',
+  },
+]
+
+export const LabelVersion = (
+  args: React.ComponentProps<typeof LabelListItemComponent>
+) => {
+  return (
+    <HistoryProvider>
+      <LabelListItemComponent {...args} />
+    </HistoryProvider>
+  )
+}
+
+export default {
+  title: 'History / Change list',
+  component: LabelListItemComponent,
+  args: {
+    labels,
+    version: 1,
+    currentUserId: '1',
+    projectId: '123',
+    comparing: false,
+    selected: false,
+    selectable: false,
+    setSelection: () => {},
+    dropdownOpen: false,
+    dropdownActive: false,
+    setActiveDropdownItem: () => {},
+    closeDropdownForItem: () => {},
+  },
+  argTypes: disableControlsOf(
+    'labels',
+    'version',
+    'currentUserId',
+    'projectId',
+    'setSelection',
+    'dropdownOpen',
+    'dropdownActive',
+    'setActiveDropdownItem',
+    'closeDropdownForItem'
+  ),
+  decorators: [
+    ScopeDecorator,
+    (Story: React.ComponentType) => (
+      <div className="history-react">
+        <div className="change-list">
+          <div className="history-version-list-container">
+            <Story />
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+}

services/web/frontend/stories/history/toggle-switch.stories.tsx

@@ -3,7 +3,7 @@ import ToggleSwitchComponent from '../../js/features/history/components/change-l
 import { ScopeDecorator } from '../decorators/scope'
 import { HistoryProvider } from '../../js/features/history/context/history-context'
 
-export const LabelsOnlyToggleSwitch = () => {
+export const HistoryAndLabelsToggleSwitch = () => {
   const [labelsOnly, setLabelsOnly] = useState(false)
 
   return (

services/web/frontend/stories/utils/arg-types.ts

@@ -0,0 +1,12 @@
+export const disableControlsOf = (...args: string[]) => {
+  return args.reduce<Record<string, object>>((prev, cur) => {
+    return {
+      ...prev,
+      [cur]: {
+        table: {
+          disable: true,
+        },
+      },
+    }
+  }, {})
+}