From 811f30edbb6c59a6d63ae890e7603d8500a776d2 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Fri, 21 Jul 2023 10:41:42 -0400
Subject: [PATCH 1/2] docs(Tabs): converted tabs & tables demo to use inputs
 for selection

---
 .../src/demos/examples/Tabs/TabsAndTable.tsx  | 56 ++++++-------------
 1 file changed, 17 insertions(+), 39 deletions(-)

diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index 956ac4c99f6..8b8787a272e 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -94,20 +94,12 @@ export const TablesAndTabs = () => {
     lastCommit: 'Last commit'
   };
 
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
-  const setRepoSelected = (event: React.FormEvent<HTMLInputElement>, repo: Repository, isSelecting = true) => {
-    setSelectedRepoNames((prevSelected) => {
-      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
-      return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
-    });
-    event.stopPropagation();
+  const [selectedRepoName, setSelectedRepoName] = React.useState<string>(repositories[0].name);
+  const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName;
+  const setRepoSelected = (_event: React.FormEvent<HTMLInputElement>, repo: Repository) => {
+    setSelectedRepoName(repo.name);
+    setIsExpanded(true);
   };
-  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map((r) => r.name) : []);
-  const allRowsSelected = selectedRepoNames.length === repositories.length;
-  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
-
-  const [rowClicked, setRowClicked] = React.useState<string>('Node 1');
-  const isRowClicked = (repo: Repository) => rowClicked === repo.name;
 
   const defaultActions: IAction[] = [
     {
@@ -167,6 +159,11 @@ export const TablesAndTabs = () => {
     }
   };
 
+  const handleDrawerClose = () => {
+    setIsExpanded(false);
+    setSelectedRepoName('');
+  };
+
   const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (
     <MenuToggle
       isDisabled={props.isDisabled}
@@ -234,12 +231,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th
-            select={{
-              onSelect: (_event, isSelecting) => onSelectAll(isSelecting),
-              isSelected: allRowsSelected
-            }}
-          />
+          <Th />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>
@@ -249,23 +241,14 @@ export const TablesAndTabs = () => {
       </Thead>
       <Tbody>
         {repositories.map((repo, rowIndex) => (
-          <Tr
-            key={repo.name}
-            onRowClick={(event) => {
-              if ((event?.target as HTMLInputElement).type !== 'checkbox') {
-                setRowClicked(rowClicked === repo.name ? '' : repo.name);
-                setIsExpanded(!isRowClicked(repo));
-              }
-            }}
-            isHoverable
-            isRowSelected={repo.name === rowClicked}
-          >
+          <Tr key={repo.name}>
             <Td
               key={`${rowIndex}_0`}
               select={{
                 rowIndex,
-                onSelect: (event, isSelected) => setRepoSelected(event, repo, isSelected),
-                isSelected: isRepoSelected(repo)
+                onSelect: (event) => setRepoSelected(event, repo),
+                isSelected: isRepoSelected(repo),
+                variant: 'radio'
               }}
             />
             <Td dataLabel={columnNames.name}>
@@ -316,17 +299,12 @@ export const TablesAndTabs = () => {
     <DrawerPanelContent widths={{ default: 'width_33', xl: 'width_33' }}>
       <DrawerHead>
         <DrawerActions>
-          <DrawerCloseButton
-            onClick={() => {
-              setRowClicked('');
-              setIsExpanded(false);
-            }}
-          />
+          <DrawerCloseButton onClick={handleDrawerClose} />
         </DrawerActions>
         <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>
           <FlexItem>
             <Title headingLevel="h2" size="lg">
-              {rowClicked}
+              {selectedRepoName}
             </Title>
           </FlexItem>
           <FlexItem>

From 77450567c7f67c4857388912ba7e741d6f535345 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 1 Aug 2023 10:48:28 -0400
Subject: [PATCH 2/2] docs(Tabs): updated links to not refresh the page to
 prevent confusion

---
 .../react-core/src/demos/examples/Tabs/TabsAndTable.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index 8b8787a272e..0392b32e1af 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -147,8 +147,6 @@ export const TablesAndTabs = () => {
     const shouldFocus = [ArrowDown, ArrowUp, Enter, Space].includes(event.key);
 
     if (shouldToggle) {
-      event.preventDefault();
-      event.stopPropagation();
       onToggle(event);
     }
 
@@ -254,7 +252,8 @@ export const TablesAndTabs = () => {
             <Td dataLabel={columnNames.name}>
               {repo.name}
               <div>
-                <a href="#">siemur/test-space</a>
+                {/** Preventing default behavior for demo purposes only */}
+                <a onClick={(event) => event.preventDefault()} href="#">siemur/test-space</a>
               </div>
             </Td>
             <Td dataLabel={columnNames.branches}>
@@ -308,7 +307,8 @@ export const TablesAndTabs = () => {
             </Title>
           </FlexItem>
           <FlexItem>
-            <a href="#">siemur/test-space</a>
+            {/** Preventing default behavior for demo purposes only */}
+            <a onClick={(event) => event.preventDefault()} href="#">siemur/test-space</a>
           </FlexItem>
         </Flex>
       </DrawerHead>