Rewind the rules table UI prototype (#3079)

mozilla-releng · Jan 9, 2024 · 341f643 · 341f643
1 parent 40ffba5
commit 341f643
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 86 deletions.
diff --git a/ui/src/components/Dashboard/SettingsMenu.jsx b/ui/src/components/Dashboard/SettingsMenu.jsx
@@ -59,7 +59,13 @@ function SettingsMenu({ user, disabled }) {
         onClose={handleMenuClose}>
         {menuItems.settings.map(navItem => (
           <MenuItem dense key={navItem.value} title={navItem.value}>
-            <Link className={classes.link} to={navItem.path}>
+            <Link
+              className={classes.link}
+              to={
+                window.location.pathname === navItem.path
+                  ? `${window.location.pathname}${window.location.search}`
+                  : navItem.path
+              }>
               {navItem.value.toUpperCase()}
             </Link>
           </MenuItem>

diff --git a/ui/src/components/Dashboard/index.jsx b/ui/src/components/Dashboard/index.jsx
@@ -71,7 +71,11 @@ export default function Dashboard(props) {
                 key={menuItem.value}
                 className={disabled ? classes.disabledLink : classes.link}
                 nav
-                to={menuItem.path}>
+                to={
+                  window.location.pathname === menuItem.path
+                    ? `${window.location.pathname}${window.location.search}`
+                    : menuItem.path
+                }>
                 <Button color="inherit">{menuItem.value}</Button>
               </Link>
             ))}

diff --git a/ui/src/components/RuleCard/index.jsx b/ui/src/components/RuleCard/index.jsx
@@ -161,6 +161,7 @@ function RuleCard({
   user,
   readOnly,
   actionLoading,
+  disableActions,
   // We don't actually use these, but we need to avoid passing them onto
   // `Card` like the rest of the props.
   onAuthorize: _,
@@ -860,7 +861,11 @@ function RuleCard({
       </CardContent>
       {!readOnly && (
         <CardActions className={classes.cardActions}>
-          {user ? (
+          {disableActions ? (
+            <Button color="secondary" disabled={disableActions}>
+              Duplicate
+            </Button>
+          ) : (
             <Link
               className={classes.link}
               to={{
@@ -873,12 +878,12 @@ function RuleCard({
               }}>
               <Button color="secondary">Duplicate</Button>
             </Link>
-          ) : (
-            <Button color="secondary" disabled>
-              Duplicate
-            </Button>
           )}
-          {user ? (
+          {disableActions ? (
+            <Button color="secondary" disabled={disableActions}>
+              Update
+            </Button>
+          ) : (
             <Link
               className={classes.link}
               to={{
@@ -891,29 +896,25 @@ function RuleCard({
               }}>
               <Button color="secondary">Update</Button>
             </Link>
-          ) : (
-            <Button color="secondary" disabled>
-              Update
-            </Button>
           )}
           <Button
             color="secondary"
-            disabled={!user || actionLoading}
+            disabled={disableActions || actionLoading}
             onClick={() => onRuleDelete(rule)}>
             Delete
           </Button>
           {requiresSignoff &&
             (user && user.email in rule.scheduledChange.signoffs ? (
               <Button
                 color="secondary"
-                disabled={!user || actionLoading}
+                disabled={disableActions || actionLoading}
                 onClick={onRevoke}>
                 Revoke Signoff
               </Button>
             ) : (
               <Button
                 color="secondary"
-                disabled={!user || actionLoading || !canSignoff}
+                disabled={disableActions || actionLoading || !canSignoff}
                 onClick={onSignoff}>
                 Signoff
               </Button>
@@ -935,12 +936,15 @@ RuleCard.propTypes = {
   // If true, card buttons that trigger a request
   // navigating to a different view will be disabled
   actionLoading: bool,
+  // If true, the card will disable all buttons
+  disableActions: bool,
 };
 
 RuleCard.defaultProps = {
   onRuleDelete: Function.prototype,
   readOnly: false,
   actionLoading: false,
+  disableActions: false,
 };
 
 export default withUser(RuleCard);
diff --git a/ui/src/components/VariableSizeList/index.jsx b/ui/src/components/VariableSizeList/index.jsx
@@ -9,13 +9,19 @@ import { AutoSizer, WindowScroller, List } from 'react-virtualized';
 import { APP_BAR_HEIGHT } from '../../utils/constants';
 
 const VariableSizeList = forwardRef((props, ref) => {
-  const { scrollToRow, ...rest } = props;
+  const { scrollToRow, pathname, ...rest } = props;
   const listRef = useRef(null);
 
   useEffect(() => {
     const rowOffset = listRef.current.getOffsetForRow({ index: scrollToRow });
 
-    listRef.current.scrollToPosition(rowOffset - APP_BAR_HEIGHT);
+    if (pathname === '/rules') {
+      listRef.current.scrollToPosition(
+        rowOffset - APP_BAR_HEIGHT - rest.searchFieldHeight
+      );
+    } else {
+      listRef.current.scrollToPosition(rowOffset - APP_BAR_HEIGHT);
+    }
   }, [scrollToRow]);
 
   useImperativeHandle(ref, () => ({

diff --git a/ui/src/services/rules.js b/ui/src/services/rules.js
@@ -1,7 +1,8 @@
 import { stringify } from 'qs';
 import axios from 'axios';
 
-const getRules = () => axios.get('/rules');
+const getRules = (timestamp = null) =>
+  timestamp ? axios.get(`/rules?timestamp=${timestamp}`) : axios.get('/rules');
 const getRule = id => axios.get(`/rules/${id}`);
 const getChannels = () => axios.get('/rules/columns/channel');
 const getProducts = () => axios.get('/rules/columns/product');

diff --git a/ui/src/utils/getFilteredRulesInfo.js b/ui/src/utils/getFilteredRulesInfo.js
@@ -0,0 +1,33 @@
+// This utility builds the string shown in the
+// info alert when no rules match the selected filters
+export default (productChannelQueries, rewindDate, onlyScheduledChanges) => {
+  let info = 'No rules found ';
+  const rewindDateStr = `on ${rewindDate}.`;
+  const scheduledChangesStr = 'with scheduled changes.';
+
+  if (!productChannelQueries) {
+    if (rewindDate) {
+      info += rewindDateStr;
+    } else if (onlyScheduledChanges) {
+      info += scheduledChangesStr;
+    }
+  } else if (productChannelQueries[1]) {
+    info += `for the ${productChannelQueries[0]} ${productChannelQueries[1]} channel `;
+
+    if (rewindDate) {
+      info += rewindDateStr;
+    } else if (onlyScheduledChanges) {
+      info += scheduledChangesStr;
+    }
+  } else {
+    info += `for the ${productChannelQueries[0]} channel `;
+
+    if (rewindDate) {
+      info += rewindDateStr;
+    } else if (onlyScheduledChanges) {
+      info += scheduledChangesStr;
+    }
+  }
+
+  return info;
+};