fix(rules): action menu should not be inline (#859)

Signed-off-by: Thuan Vo <thvo@redhat.com>
cryostatio · Feb 7, 2023 · 01c069c · 01c069c
1 parent 943460c
commit 01c069c
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 71 deletions.
diff --git a/src/app/Rules/Rules.tsx b/src/app/Rules/Rules.tsx
@@ -45,31 +45,31 @@ import {
   Button,
   Card,
   CardBody,
+  CardTitle,
   EmptyState,
   EmptyStateIcon,
   Switch,
   Title,
   Toolbar,
   ToolbarContent,
-  ToolbarItem,
   ToolbarGroup,
-  CardTitle,
+  ToolbarItem,
 } from '@patternfly/react-core';
 import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
 import {
-  SortByDirection,
-  TableVariant,
-  ISortBy,
+  ActionsColumn,
   IAction,
+  InnerScrollContainer,
+  ISortBy,
+  SortByDirection,
   TableComposable,
-  Thead,
-  Tr,
+  TableVariant,
+  Tbody,
+  Td,
   Th,
+  Thead,
   ThProps,
-  Td,
-  Tbody,
-  ActionsColumn,
-  InnerScrollContainer,
+  Tr,
 } from '@patternfly/react-table';
 import * as React from 'react';
 import { Link, useHistory, useRouteMatch } from 'react-router-dom';
@@ -416,7 +416,10 @@ export const Rules: React.FC<RulesProps> = (_) => {
           {r.maxSizeBytes}
         </Td>
         <Td key={`automatic-rule-action-${index}`} isActionCell style={{ paddingRight: '0' }}>
-          <ActionsColumn items={actionResolver(r)} />
+          <ActionsColumn
+            items={actionResolver(r)}
+            menuAppendTo={() => document.getElementById('automated-rule-toolbar') || document.body}
+          />
         </Td>
       </Tr>
     ));
@@ -438,28 +441,30 @@ export const Rules: React.FC<RulesProps> = (_) => {
       );
     } else {
       return (
-        <TableComposable aria-label="Automated Rules Table" variant={TableVariant.compact}>
-          <Thead>
-            <Tr>
-              {tableColumns.map((col, index) => (
-                <Th
-                  key={`automatic-rule-header-${col.title}`}
-                  sort={col.sortable ? getSortParams(index) : undefined}
-                  info={
-                    col.tooltip
-                      ? {
-                          tooltip: col.tooltip,
-                        }
-                      : undefined
-                  }
-                >
-                  {col.title}
-                </Th>
-              ))}
-            </Tr>
-          </Thead>
-          <Tbody>{ruleRows}</Tbody>
-        </TableComposable>
+        <InnerScrollContainer>
+          <TableComposable aria-label="Automated Rules Table" variant={TableVariant.compact}>
+            <Thead>
+              <Tr>
+                {tableColumns.map((col, index) => (
+                  <Th
+                    key={`automatic-rule-header-${col.title}`}
+                    sort={col.sortable ? getSortParams(index) : undefined}
+                    info={
+                      col.tooltip
+                        ? {
+                            tooltip: col.tooltip,
+                          }
+                        : undefined
+                    }
+                  >
+                    {col.title}
+                  </Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>{ruleRows}</Tbody>
+          </TableComposable>
+        </InnerScrollContainer>
       );
     }
   }, [getSortParams, isLoading, rules, ruleRows, tableColumns]);
@@ -480,7 +485,7 @@ export const Rules: React.FC<RulesProps> = (_) => {
         </Card>
         <Card>
           <CardBody>
-            <Toolbar id="event-templates-toolbar">
+            <Toolbar id="automated-rule-toolbar">
               <ToolbarContent>
                 <ToolbarGroup variant="icon-button-group">
                   <ToolbarItem>
@@ -511,7 +516,7 @@ export const Rules: React.FC<RulesProps> = (_) => {
                 )}
               </ToolbarContent>
             </Toolbar>
-            <InnerScrollContainer>{viewContent}</InnerScrollContainer>
+            {viewContent}
           </CardBody>
         </Card>
       </BreadcrumbPage>

diff --git a/src/test/Rules/Rules.test.tsx b/src/test/Rules/Rules.test.tsx
@@ -144,7 +144,7 @@ describe('<Rules />', () => {
       tree = renderer.create(
         <ServiceContext.Provider value={defaultServices}>
           <NotificationsContext.Provider value={NotificationsInstance}>
-            <Router location={history.location} history={history}>
+            <Router history={history}>
               <Rules />
             </Router>
           </NotificationsContext.Provider>

diff --git a/src/test/Rules/__snapshots__/Rules.test.tsx.snap b/src/test/Rules/__snapshots__/Rules.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<Rules /> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Toolbar-1"
             data-ouia-component-type="PF4/Toolbar"
             data-ouia-safe={true}
-            id="event-templates-toolbar"
+            id="automated-rule-toolbar"
           >
             <div
               className="pf-c-toolbar__content"
@@ -164,7 +164,7 @@ exports[`<Rules /> renders correctly 1`] = `
               </div>
               <div
                 className="pf-c-toolbar__expandable-content"
-                id="event-templates-toolbar-expandable-content-1"
+                id="automated-rule-toolbar-expandable-content-1"
               >
                 <div
                   className="pf-c-toolbar__group"
@@ -181,42 +181,38 @@ exports[`<Rules /> renders correctly 1`] = `
             </div>
           </div>
           <div
-            className="pf-c-scroll-inner-wrapper"
+            className="pf-c-empty-state"
           >
             <div
-              className="pf-c-empty-state"
+              className="pf-c-empty-state__content"
             >
-              <div
-                className="pf-c-empty-state__content"
-              >
-                <svg
-                  aria-hidden="true"
-                  aria-labelledby={null}
-                  className="pf-c-empty-state__icon"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
+              <svg
+                aria-hidden="true"
+                aria-labelledby={null}
+                className="pf-c-empty-state__icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
                   }
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <h4
-                  className="pf-c-title pf-m-lg"
-                  data-ouia-component-id="OUIA-Generated-Title-1"
-                  data-ouia-component-type="PF4/Title"
-                  data-ouia-safe={true}
-                >
-                  No Automated Rules
-                </h4>
-              </div>
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                />
+              </svg>
+              <h4
+                className="pf-c-title pf-m-lg"
+                data-ouia-component-id="OUIA-Generated-Title-1"
+                data-ouia-component-type="PF4/Title"
+                data-ouia-safe={true}
+              >
+                No Automated Rules
+              </h4>
             </div>
           </div>
         </div>