Merge pull request #15 from fhlavac/provider

Add DataViewContext and events provider

Author: Hyperkid123

cypress/e2e/DataViewEvents.spec.cy.ts

@@ -0,0 +1,34 @@
+describe('Test the Data view docs page', () => {
+
+  it('displays a table and opens detail', () => {
+    const ouiaId = 'ContextExample';
+
+    cy.visit('http://localhost:8006/extensions/data-view/context');
+    
+    cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
+    cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
+
+    cy.get(`[data-ouia-component-id="${ouiaId}-td-0-0"]`).contains('one');
+    cy.get(`[data-ouia-component-id="${ouiaId}-td-4-4"]`).contains('five - 5');
+    cy.get(`[data-ouia-component-id="${ouiaId}-td-7-4"]`).should('not.exist');
+
+    // click the first row
+    cy.get(`[data-ouia-component-id="${ouiaId}-tr-0"]`).first().click();
+    cy.get(`[data-ouia-component-id="detail-drawer"]`).should('exist');
+    cy.get(`[data-ouia-component-id="detail-drawer-title"]`).contains('Detail of repository one');
+    cy.get(`[data-ouia-component-id="detail-drawer-close-btn"]`).should('be.visible');
+
+    // click the first row again
+    cy.get(`[data-ouia-component-id="${ouiaId}-tr-0"]`).first().click({ force: true });
+    cy.get(`[data-ouia-component-id="detail-drawer-title"]`).should('not.be.visible');
+
+    // click the second row
+    cy.get(`[data-ouia-component-id="${ouiaId}-tr-1"]`).first().click();
+    cy.get(`[data-ouia-component-id="detail-drawer"]`).should('be.visible');
+    cy.get(`[data-ouia-component-id="detail-drawer-title"]`).contains('Detail of repository one - 2');
+
+    // click the close button
+    cy.get(`[data-ouia-component-id="detail-drawer-close-btn"]`).first().click({ force: true });
+    cy.get(`[data-ouia-component-id="detail-drawer-title"]`).should('not.be.visible');
+  })
+});

packages/module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md

@@ -0,0 +1,32 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Context
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 3
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Events/Events.md
+---
+import { useState, useEffect, useContext, useRef } from 'react';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+
+The **data view** context provides a way to share data across the entire data view tree without having to pass props manually at every level. It also provides a way of listening to the data view events from the outside of the component.
+
+
+### Events sharing example
+The following example demonstrates how to use the `DataViewContext` to manage shared state and handle events. The `DataViewProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
+
+
+```js file="./EventsExample.tsx"
+
+```
+

packages/module/patternfly-docs/content/extensions/data-view/examples/Context/EventsExample.tsx

@@ -0,0 +1,131 @@
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Text } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols: Record<keyof Repository, string> = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'ContextExample';
+
+interface RepositoryDetailProps {
+  selectedRepo?: Repository;
+  setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
+}
+
+const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+  const context = useContext(DataViewContext);
+
+  useEffect(() => {
+    const unsubscribe = context.subscribe(EventTypes.rowClick, (repo: Repository) => {
+      setSelectedRepo(repo);
+    });
+
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
+          Detail of repository {selectedRepo?.name}
+        </Title>
+        <Text>Branches: {selectedRepo?.branches}</Text>
+        <Text>Pull requests: {selectedRepo?.prs}</Text>
+        <Text>Workspaces: {selectedRepo?.workspaces}</Text>
+        <Text>Last commit: {selectedRepo?.lastCommit}</Text>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setSelectedRepo(undefined)} data-ouia-component-id="detail-drawer-close-btn"/>
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+};
+
+interface RepositoriesTableProps {
+  selectedRepo?: Repository;
+}
+
+const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+  const { trigger } = useContext(DataViewContext);
+
+  const handleRowClick = (repo: Repository | undefined) => {
+    trigger(EventTypes.rowClick, repo);
+  };
+
+  return (
+    <DataView>
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>
+                {column}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {repositories.map((repo, rowIndex) => (
+            <Tr
+              isClickable
+              key={repo.name}
+              ouiaId={`${ouiaId}-tr-${rowIndex}`}
+              onRowClick={() => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo)}
+              isRowSelected={selectedRepo?.name === repo.name}
+            >
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>
+                  {repo[column as keyof Repository]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </DataView>
+  );
+};
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <DataViewProvider>
+      <Drawer isExpanded={Boolean(selectedRepo)} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id="detail-drawer" >
+        <DrawerContent
+          panelContent={<RepositoryDetail selectedRepo={selectedRepo} setSelectedRepo={setSelectedRepo} />}
+        >
+          <DrawerContentBody>
+            <RepositoriesTable selectedRepo={selectedRepo} />
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </DataViewProvider>
+  );
+};

packages/module/src/DataViewContext/DataViewContext.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { DataViewContext, DataViewProvider, EventTypes } from './DataViewContext';
+
+let id = 0;
+
+beforeAll(() => {
+  Object.defineProperty(global, 'crypto', {
+    value: {
+      randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+    },
+  });
+});
+
+describe('DataViewContext', () => {
+  test('should provide context value and allow subscriptions', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = React.useContext(DataViewContext);
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        return () => unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewProvider>
+        <TestComponent />
+      </DataViewProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+    expect(callback).toHaveBeenCalledWith('some payload');
+  });
+
+  test('should handle unsubscribing correctly', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = React.useContext(DataViewContext);
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewProvider>
+        <TestComponent />
+      </DataViewProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  test('should handle multiple subscriptions and trigger events correctly', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = React.useContext(DataViewContext);
+
+      React.useEffect(() => {
+        const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
+        const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
+        
+        return () => {
+          unsubscribe1();
+          unsubscribe2();
+        };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewProvider>
+        <TestComponent />
+      </DataViewProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback1).toHaveBeenCalledWith('some payload');
+    expect(callback2).toHaveBeenCalledWith('some payload');
+  });
+});

packages/module/src/DataViewContext/DataViewContext.tsx

@@ -0,0 +1,69 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useState
+} from "react";
+
+export const EventTypes = {
+  rowClick: 'rowClick'
+} as const;
+
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Callback = (...args: any[]) => void;
+interface Subscriptions { [id: string]: Callback }
+type ContextType = { [event in DataViewEvent]: Subscriptions };
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+
+export const DataViewContext = createContext<{
+  subscribe: Subscribe;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trigger: (event: DataViewEvent, ...payload: any[]) => void;
+    }>({
+      subscribe: () => () => null,
+      trigger: () => null
+    });
+
+export const DataViewProvider = ({ children }: PropsWithChildren) => {
+  const [ subscriptions, setSubscriptions ] = useState<ContextType>({
+    [EventTypes.rowClick]: {}
+  });
+
+  const subscribe: Subscribe = (event, callback) => {
+    const id = crypto.randomUUID();
+
+    // set new subscription
+    setSubscriptions((prevSubscriptions) => ({
+      ...prevSubscriptions,
+      [event]: { ...prevSubscriptions[event], [id]: callback }
+    }));
+
+    // return unsubscribe function
+    return () => {
+      setSubscriptions((prevSubscriptions) => {
+        const updatedSubscriptions = { ...prevSubscriptions };
+        delete updatedSubscriptions[event][id];
+        return updatedSubscriptions;
+      });
+    };
+  };
+
+  const trigger = useCallback(
+    (event: DataViewEvent, ...payload: unknown[]) => {
+      Object.values(subscriptions[event]).forEach((callback) => {
+        callback(...payload);
+      });
+    },
+    [ subscriptions ]
+  );
+
+  return (
+    <DataViewContext.Provider value={{ subscribe, trigger }}>
+      {children}
+    </DataViewContext.Provider>
+  );
+};
+
+export default DataViewContext;

packages/module/src/DataViewContext/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewContext';
+export * from './DataViewContext';

packages/module/src/index.ts

@@ -4,5 +4,8 @@ export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
+export { default as DataViewContext } from './DataViewContext';
+export * from './DataViewContext';
+
 export { default as DataView } from './DataView';
 export * from './DataView';