fix: removing the draggable functionality, implementing requested changes and addign test

Author: Jakub007d

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableDraggableExample.tsx

@@ -63,5 +63,5 @@ const columns: DataViewTh[] = [
 const ouiaId = 'TableExample';
 
 export const BasicExample: FunctionComponent = () => (
-  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} isExpandable={true}/>
+  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
 );

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExample.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent, useState } from 'react';
-import { DataViewTable, DataViewTr, DataViewTh, ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
 
@@ -75,7 +76,6 @@ const ouiaId = 'TableInteractiveExample';
 export const InteractiveExample: FunctionComponent = () => {
   const [isExpandable, setIsExpandable] = useState(true);
   const [isSticky, setIsSticky] = useState(true);
-  const [isDraggable, setIsDraggable] = useState(true);
 
   // Generate rows based on current settings
   const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
@@ -130,15 +130,6 @@ export const InteractiveExample: FunctionComponent = () => {
               aria-label="Toggle sticky header and columns"
             />
           </ToolbarItem>
-          <ToolbarItem>
-            <Switch
-              id="draggable-switch"
-              label="Draggable rows"
-              isChecked={isDraggable}
-              onChange={(_event, checked) => setIsDraggable(checked)}
-              aria-label="Toggle draggable rows"
-            />
-          </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
       <div style={{ height: '400px', overflow: 'auto' }}>
@@ -150,7 +141,6 @@ export const InteractiveExample: FunctionComponent = () => {
           expandedRows={isExpandable ? expandableContents : undefined}
           isExpandable={isExpandable}
           isSticky={isSticky}
-          isDraggable={isDraggable}
         />
       </div>
     </>

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx

@@ -111,27 +111,9 @@ When sticky headers and columns are enabled:
 
 ```
 
-## Draggable rows
-
-To enable drag-and-drop functionality for table rows, set the `isDraggable` prop to `true` on the `<DataViewTable>` component. This allows users to reorder rows by dragging them to a new position.
-
-When draggable rows are enabled:
-- A drag handle icon appears at the beginning of each row
-- Users can click and drag the handle or anywhere on the row to reorder rows
-- Visual feedback is provided during the drag operation with a ghost row effect
-- The new order is maintained after the drop
-
-The draggable functionality is built using the `useDraggableRows` hook internally, which manages the drag-and-drop state and DOM manipulation.
-
-### Draggable rows example
-
-```js file="./DataViewTableDraggableExample.tsx"
-
-```
-
 ### Interactive example
 - Interactive example show how the different composable options work together.
-- By toggling the toggles you can switch between them and observe the bahaviour
+- By toggling the toggles you can switch between them and observe the behaviour
 
 ```js file="./DataViewTableInteractiveExample.tsx"
 

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

@@ -14,8 +14,8 @@ module.exports = {
   '/extensions/data-view/table/react': {
     id: "Table",
     title: "Data view table",
-    toc: [{"text":"Configuring rows and columns"},[{"text":"Table example"}],{"text":"Expandable rows"},[{"text":"Expandable rows example"}],{"text":"Sticky header and columns"},[{"text":"Sticky header and columns example"}],{"text":"Draggable rows"},[{"text":"Draggable rows example"},{"text":"Interactive example"},{"text":"Resizable columns"}],{"text":"Tree table"},[{"text":"Tree table example"}],{"text":"Sorting"},[{"text":"Sorting example"},{"text":"Sorting state"}],{"text":"States"},[{"text":"Empty"},{"text":"Error"},{"text":"Loading"}]],
-    examples: ["Table example","Expandable rows example","Sticky header and columns example","Draggable rows example","Interactive example","Resizable columns","Tree table example","Sorting example","Empty","Error","Loading"],
+    toc: [{"text":"Configuring rows and columns"},[{"text":"Table example"}],{"text":"Expandable rows"},[{"text":"Expandable rows example"}],{"text":"Sticky header and columns"},[{"text":"Sticky header and columns example"},{"text":"Interactive example"},{"text":"Resizable columns"}],{"text":"Tree table"},[{"text":"Tree table example"}],{"text":"Sorting"},[{"text":"Sorting example"},{"text":"Sorting state"}],{"text":"States"},[{"text":"Empty"},{"text":"Error"},{"text":"Loading"}]],
+    examples: ["Table example","Expandable rows example","Sticky header and columns example","Interactive example","Resizable columns","Tree table example","Sorting example","Empty","Error","Loading"],
     section: "extensions",
     subsection: "Data view",
     source: "react",

packages/module/patternfly-docs/generated/index.js

@@ -71,8 +71,6 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-0"
       >
         <td
           class="pf-v6-c-table__td"
@@ -110,18 +108,11 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Timestamp one
         </td>
       </tr>
-    </tbody>
-    <tbody
-      class="pf-v6-c-table__tbody"
-      role="rowgroup"
-    >
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-1"
       >
         <td
           class="pf-v6-c-table__td"
@@ -159,18 +150,11 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Timestamp two
         </td>
       </tr>
-    </tbody>
-    <tbody
-      class="pf-v6-c-table__tbody"
-      role="rowgroup"
-    >
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-2"
       >
         <td
           class="pf-v6-c-table__td"
@@ -208,18 +192,11 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Timestamp three
         </td>
       </tr>
-    </tbody>
-    <tbody
-      class="pf-v6-c-table__tbody"
-      role="rowgroup"
-    >
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-3"
       >
         <td
           class="pf-v6-c-table__td"
@@ -257,18 +234,11 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Timestamp four
         </td>
       </tr>
-    </tbody>
-    <tbody
-      class="pf-v6-c-table__tbody"
-      role="rowgroup"
-    >
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-4"
       >
         <td
           class="pf-v6-c-table__td"
@@ -306,18 +276,11 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Timestamp five
         </td>
       </tr>
-    </tbody>
-    <tbody
-      class="pf-v6-c-table__tbody"
-      role="rowgroup"
-    >
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
-        draggable="false"
-        id="row-5"
       >
         <td
           class="pf-v6-c-table__td"

packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap

@@ -1,8 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DataView } from '../DataView';
-import { DataViewTableBasic } from './DataViewTableBasic';
+import { DataViewTableBasic, ExpandableContent } from './DataViewTableBasic';
 
 interface Repository {
+  id: number;
   name: string;
   branches: string | null;
   prs: string | null;
@@ -11,20 +13,28 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
-  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
-  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
-  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
-  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
-  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const rows = repositories.map(repo => ({
-  row: Object.values(repo),
-}));
+const rows = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  { id, cell: name },
+  branches,
+  prs,
+  workspaces,
+  lastCommit
+]);
 
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
+const expandableContents: ExpandableContent[] = [
+  { rowId: 1, columnId: 1, content: <div>Branch details for Repository one</div> },
+];
+
 const ouiaId = 'TableExample';
 
 describe('DataViewTable component', () => {
@@ -57,8 +67,40 @@ describe('DataViewTable component', () => {
     const { container } = render(
       <DataView activeState="loading">
         <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
-      </DataView> 
+      </DataView>
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('when isExpandable cell should be clickable and expandable', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataViewTableBasic
+        aria-label='Repositories table'
+        ouiaId={ouiaId}
+        columns={columns}
+        rows={rows}
+        isExpandable={true}
+        expandedRows={expandableContents}
+      />
+    );
+
+    // Initially, expandable content is rendered but should be hidden (not visible)
+    const initialBranchContent = screen.getByText('Branch details for Repository one');
+    expect(initialBranchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeFalsy();
+
+    // Find the first expandable button by ID
+    const branchExpandButton = document.getElementById('expandable-0-0-1');
+    expect(branchExpandButton).toBeTruthy();
+    // Verify the button is in the cell with "Branch one" text
+    expect(branchExpandButton?.closest('td')?.textContent).toContain('Branch one');
+
+    // Click the expand button for Branches column
+    await user.click(branchExpandButton!);
+
+    // After clicking, the expandable content should be visible
+    const branchContent = screen.getByText('Branch details for Repository one');
+    expect(branchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeTruthy();
+  });
 });