feat: LOPS-280: UI changes for Data Explorer are also affecting Data …

…Manager (#217)
HumanSignal · Jul 19, 2023 · f0b9df2 · f0b9df2
1 parent 5212cb9
commit f0b9df2
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 79 deletions.
diff --git a/src/components/Common/Button/Button.js b/src/components/Common/Button/Button.js
@@ -1,6 +1,6 @@
 import React, { cloneElement, forwardRef, useMemo } from "react";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags";
 import { isDefined } from "../../../utils/utils";
 import "./Button.styl";
 
@@ -31,7 +31,7 @@ export const Button = forwardRef(
       withIcon: !!icon,
       withExtra: !!extra,
       disabled: !!rest.disabled,
-      newUI: isFF(FF_LOPS_E_3),
+      newUI: isFF(FF_LOPS_E_10),
     };
 
     const iconElem = useMemo(() => {

diff --git a/src/components/Common/FiltersPane.js b/src/components/Common/FiltersPane.js
@@ -1,7 +1,7 @@
 import { inject, observer } from "mobx-react";
 import React, { useEffect, useRef } from "react";
 import { FaAngleDown, FaChevronDown } from "react-icons/fa";
-import { FF_LOPS_E_3, isFF } from "../../utils/feature-flags";
+import { FF_LOPS_E_10, isFF } from "../../utils/feature-flags";
 import { Filters } from "../Filters/Filters";
 import { Badge } from "./Badge/Badge";
 import { Button } from "./Button/Button";
@@ -31,7 +31,7 @@ export const FiltersButton = buttonInjector(observer(
         Filters {hasFilters && (
           <Badge size="small" style={{ marginLeft: 5 }}>{activeFiltersNumber}</Badge>
         )}
-        {isFF(FF_LOPS_E_3) ? (
+        {isFF(FF_LOPS_E_10) ? (
           <FaChevronDown size="12" style={{ marginLeft: 8, marginRight: -7 }} color="#1F1F1F" />
         ) : (
           <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />

diff --git a/src/components/Common/Form/Elements/Input/Input.js b/src/components/Common/Form/Elements/Input/Input.js
@@ -1,13 +1,13 @@
 import { cn } from '../../../../../utils/bem';
-import { FF_LOPS_E_3, isFF } from '../../../../../utils/feature-flags';
+import { FF_LOPS_E_10, isFF } from '../../../../../utils/feature-flags';
 import { FormField } from '../../FormField';
 import { default as Label } from '../Label/Label';
 import './Input.styl';
 
 const Input = ({ label, className, validate, required, skip, labelProps, ghost, ...props }) => {
   const mods = {
     ghost,
-    newUI: isFF(FF_LOPS_E_3),
+    newUI: isFF(FF_LOPS_E_10),
   };
   const classList = [
     cn('form-input').mod(mods),

diff --git a/src/components/Common/RadioGroup/RadioGroup.js b/src/components/Common/RadioGroup/RadioGroup.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags";
 import "./RadioGroup.styl";
 
 const RadioContext = React.createContext();
@@ -17,7 +17,7 @@ export const RadioGroup = ({ size, value, onChange, children, ...rest }) => {
         onChange: onRadioChange,
       }}
     >
-      <Block name="radio-group" mod={{ size, newUI: isFF(FF_LOPS_E_3) }} {...rest}>
+      <Block name="radio-group" mod={{ size, newUI: isFF(FF_LOPS_E_10) }} {...rest}>
         <Elem name='buttons'>{children}</Elem>
       </Block>
     </RadioContext.Provider>

diff --git a/src/components/Common/Table/Table.js b/src/components/Common/Table/Table.js
@@ -22,7 +22,7 @@ import { prepareColumns } from "./utils";
 import { Block, Elem } from "../../../utils/bem";
 import { FieldsButton } from "../FieldsButton";
 import { LsGear, LsGearNewUI } from "../../../assets/icons";
-import { FF_DEV_3873, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { FF_DEV_3873, FF_LOPS_E_10, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
 
 const Decorator = (decoration) => {
   return {
@@ -192,7 +192,7 @@ export const Table = observer(
                   body: <TaskSourceView content={out} onTaskLoad={onTaskLoad} sdkType={type} />,
                 });
               }}
-              icon={isFF(FF_LOPS_E_3) ? <Icon icon={RiCodeLine} style={{ width: 24, height: 24 }}/> : <Icon icon={FaCode}/>}
+              icon={isFF(FF_LOPS_E_10) ? <Icon icon={RiCodeLine} style={{ width: 24, height: 24 }}/> : <Icon icon={FaCode}/>}
             />
           </Tooltip>
         );

diff --git a/src/components/Common/Table/TableHead/TableHead.js b/src/components/Common/Table/TableHead/TableHead.js
@@ -17,7 +17,7 @@ import { TableCell, TableCellContent } from "../TableCell/TableCell";
 import { TableContext, TableElem } from "../TableContext";
 import { getStyle } from "../utils";
 import "./TableHead.styl";
-import { FF_DEV_2984, FF_DEV_3873, FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
+import { FF_DEV_2984, FF_DEV_3873, FF_LOPS_E_10, isFF } from "../../../../utils/feature-flags";
 
 const { Block, Elem } = BemWithSpecifiContext();
 
@@ -45,7 +45,7 @@ const DropdownWrapper = observer(
       fontSize: 14,
     };
 
-    if ( isFF( FF_LOPS_E_3 ) ) {
+    if ( isFF( FF_LOPS_E_10 ) ) {
       styles.border = "0 none";
       styles.fontWeight =  500;
       styles.fontSize =  16;

diff --git a/src/components/Common/TableOld/Table.js b/src/components/Common/TableOld/Table.js
@@ -28,7 +28,7 @@ import { prepareColumns } from "./utils";
 import { Block } from "../../../utils/bem";
 import { FieldsButton } from "../FieldsButton";
 import { LsGear, LsGearNewUI } from "../../../assets/icons";
-import { FF_DEV_3873, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { FF_DEV_3873, FF_LOPS_E_10, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
 
 const Decorator = (decoration) => {
   return {
@@ -149,7 +149,7 @@ export const Table = observer(
                   body: <TaskSourceView content={out} onTaskLoad={onTaskLoad} sdkType={type} />,
                 });
               }}
-              icon={isFF(FF_LOPS_E_3) ? <Icon icon={RiCodeLine} style={{ width: 24, height: 24 }}/> : <Icon icon={FaCode}/>}
+              icon={isFF(FF_LOPS_E_10) ? <Icon icon={RiCodeLine} style={{ width: 24, height: 24 }}/> : <Icon icon={FaCode}/>}
             />
           </Tooltip>
         );

diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
@@ -2,7 +2,7 @@ import { inject, observer } from "mobx-react";
 import { useRef } from "react";
 import { FaAngleDown, FaChevronDown, FaChevronUp, FaTrash } from "react-icons/fa";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
+import { FF_LOPS_E_10, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
 import { Button } from "../../Common/Button/Button";
 import { Dropdown } from "../../Common/Dropdown/DropdownComponent";
 import Form from "../../Common/Form/Form";
@@ -13,6 +13,8 @@ import { FaChevronRight } from "react-icons/fa";
 import "./ActionsButton.styl";
 import { useCallback } from "react";
 
+const isFFLOPSE3 = isFF(FF_LOPS_E_3);
+const isNewUI = isFF(FF_LOPS_E_10);
 const injector = inject(({ store }) => ({
   store,
   hasSelected: store.currentView?.selected?.hasSelected ?? false,
@@ -66,7 +68,6 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
 
   const ActionButton = (action, parentRef) => {
     const isDeleteAction = action.id.includes("delete");
-    const isFFLOPSE3 = isFF(FF_LOPS_E_3) && action.newStyle;
     const hasChildren = !!action.children?.length;
     const submenuRef = useRef();
     const onClick = useCallback((e) => {
@@ -81,12 +82,12 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
         tag={Menu.Item}
         size={size}
         onClick={onClick}
-        {...(isDeleteAction ? { danger: isDeleteAction } : {})}
         mod={{ 
           hasSeperator: isDeleteAction,
           hasSubMenu: action.children?.length > 0,
-          isSeperator: action.isSeperator,
+          isSeparator: action.isSeparator,
           isTitle: action.isTitle,
+          danger: isDeleteAction,
         }}
         name='actionButton'
       >
@@ -97,45 +98,55 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
       </Block>
     );
 
-    return isFFLOPSE3 ? (
-      hasChildren ? (
+    return hasChildren  ? (
+      <Dropdown.Trigger 
+        key={action.id}
+        align="top-right-outside"
+        toggle={false}
+        ref={submenuRef}
+        content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{action.children.map(ActionButton, parentRef)}</Block>}
+      >
+        {titleContainer}
+      </Dropdown.Trigger>  
+    ) : (
+      isNewUI ? (
         <Dropdown.Trigger 
           key={action.id}
           align="top-right-outside"
           toggle={false}
           ref={submenuRef}
-          content={<Block name='actionButton-submenu' tag="ul">{action.children.map(ActionButton, parentRef)}</Block>}
+          content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{(action?.children ?? []).map(ActionButton, parentRef)}</Block>}
         >
           {titleContainer}
         </Dropdown.Trigger>
-      ) : titleContainer
-    ) : (
-      <Menu.Item
-        size={size}
-        key={action.id}
-        danger={isDeleteAction}
-        onClick={() => {
-          invokeAction(action, isDeleteAction);
-        }}
-        icon={isDeleteAction && <FaTrash />}
-      >
-        {action.title}
-      </Menu.Item>
+      ) : (
+        <Menu.Item
+          size={size}
+          key={action.id}
+          danger={isDeleteAction}
+          onClick={() => {
+            invokeAction(action, isDeleteAction);
+          }}
+          className={`actionButton${action.isSeparator ? "_isSeparator" : (action.isTitle ? "_isTitle" : "")}`}
+          icon={isDeleteAction && <FaTrash />}
+        >
+          {action.title}
+        </Menu.Item>
+      )
     );
   };
 
   const actionButtons = actions.map(ActionButton);
-  const isFFLOPSE3 = isFF(FF_LOPS_E_3);
 
   return (
     <Dropdown.Trigger 
-      content={isFFLOPSE3 ? <Block tag={Menu} name="actionmenu" size="compact">{actionButtons}</Block> : <Menu size="compact">{actionButtons}</Menu>} 
+      content={isNewUI ? <Block tag={Menu} name="actionmenu" size="compact" mod={{ newUI: isNewUI }}>{actionButtons}</Block> : <Menu size="compact">{actionButtons}</Menu>} 
       disabled={!hasSelected}
       onToggle={(visible) => isFFLOPSE3 && setIsOpen(visible)}
     >
-      <Button size={size} disabled={!hasSelected} {...rest} >
+      <Button {...(isNewUI ? { className:"actionButtonPrime" } : {})} size={size} disabled={!hasSelected} {...rest}>
         {selectedCount > 0 ? selectedCount + " Tasks": "Actions"}
-        {isFFLOPSE3 ? (
+        {isNewUI ? (
           isOpen ? (
             <FaChevronUp size="12" style={{ marginLeft: 4, marginRight: -7 }} />
           ) : (

diff --git a/src/components/DataManager/Toolbar/ActionsButton.styl b/src/components/DataManager/Toolbar/ActionsButton.styl
@@ -1,41 +1,23 @@
 .actionButton
-  position relative
-  padding 8px
-  &.menu__item
-    height auto
-    color #1F1F1F
-    &.actionButton_isTitle
-      color #096DD9
-    &_look_danger
-      color #d00
-  &:not(.dm-menu__item_active):hover
-    background-color transparent
-    .menu
-      &__titleContainer
-        background-color rgba(65, 60, 74, 0.08)
-
-  &_hasSubMenu
-    .actionButton__titleContainer:hover
-      background-color rgba(9, 109, 217, 0.12)
+  --compact-height 32px
+  height var(--compact-height)
+  padding 0 13px
+  display flex
+  align-items center
   &__titleContainer
     display flex
     align-items center
-    height 100%
-    justify-content space-between
-    width 100%
     gap 8px
-    padding 4px 16px
-    border-radius 4px
-    &:hover
-      background-color rgba(65, 60, 74, 0.08)
+    justify-content space-between
   &_isTitle
     font-weight 500
     font-size 12px
     line-height 16px
     letter-spacing 0.5px
     color #096DD9
     cursor initial
-    padding 16px 8px 0
+    padding 16px 12px 8px
+    height var(--compact-height)
     .actionButton
       &__titleContainer:hover
         background-color transparent
@@ -44,7 +26,7 @@
     &:hover
       background-color transparent !important
       color #096DD9 !important
-  &_isSeperator
+  &_isSeparator
     cursor initial
     height 1px
     background-color rgba(137, 128, 152, 0.12) !important
@@ -60,6 +42,65 @@
   &__title
     flex-grow 1
     font-size 16px
+
+  &_hasSubMenu
+    color rgba(0,0,0,0.6)
+    &:hover
+      color #000
+      background-color rgba(0,0,0,0.04)
+  &_danger
+    color #d00
+
+.actionButtonPrime
+  gap 8px
+
+.actionmenu,
+.actionButton-submenu
+  &_newUI
+    .actionButton
+      position relative
+      padding 8px
+      height auto
+      &.menu__item
+        height auto
+        color #1F1F1F
+        &.actionButton_isTitle
+          color #096DD9
+        &_look_danger
+          color #d00
+      &:not(.dm-menu__item_active):hover
+        background-color transparent
+        .menu
+          &__titleContainer
+            background-color rgba(65, 60, 74, 0.08)
+
+      &_hasSubMenu
+        color #1F1F1F
+        &:hover
+        color #1F1F1F
+          background-color transparent
+        .actionButton__titleContainer:hover
+          background-color rgba(9, 109, 217, 0.12)
+      &__titleContainer
+        height 100%
+        width 100%
+        padding 4px 16px
+        border-radius 4px
+        cursor pointer
+        &:hover
+          background-color rgba(65, 60, 74, 0.08)
+      &_isTitle
+        padding 16px 8px 0
+        .actionButton__titleContainer
+          cursor default
+          &:hover
+            background transparent
+      &_isSeparator
+        height 1px
+        padding 0
+        &.menu__item
+          height 1px
+          padding 0
 
 .actionButton-submenu
   margin 0

diff --git a/src/components/DataManager/Toolbar/LabelButton.js b/src/components/DataManager/Toolbar/LabelButton.js
@@ -93,7 +93,7 @@ export const LabelButton = injector(({ store, canLabel, size, target, selectedCo
           <Button
             size={size}
             disabled={disabled}
-            mod={{ size: "medium", look: "primary", disabled }}
+            mod={{ size: size ?? "medium", look: "primary", disabled }}
             style={primaryStyle}
             onClick={onLabelAll}
           >
@@ -102,7 +102,7 @@ export const LabelButton = injector(({ store, canLabel, size, target, selectedCo
           <Button
             ref={triggerRef}
             size={size}
-            mod={{ size: "medium", look: "primary", disabled }}
+            mod={{ size: size ?? "medium", look: "primary", disabled }}
             style={triggerStyle}
             onClick={toggleOpen}
           >
@@ -112,7 +112,7 @@ export const LabelButton = injector(({ store, canLabel, size, target, selectedCo
         <Button
           size={size}
           style={secondStyle}
-          mod={{ size: "medium", disabled }}
+          mod={{ size: size ?? "medium", disabled }}
           onClick={onLabelVisible}
         >
           Label Tasks As Displayed