Fleet UI: Update icons (All icons related to action buttons/table container actions) (#11945)

frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx

@@ -3,12 +3,9 @@ import { kebabCase, noop } from "lodash";
 import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 
 import { ButtonVariant } from "components/buttons/Button/Button";
+import Icon from "components/Icon/Icon";
+import { IconNames } from "components/icons";
 import Button from "../../../buttons/Button";
-import CloseIcon from "../../../../../assets/images/icon-close-vibrant-blue-16x16@2x.png";
-import DeleteIcon from "../../../../../assets/images/icon-delete-vibrant-blue-12x14@2x.png";
-import CheckIcon from "../../../../../assets/images/icon-action-check-16x15@2x.png";
-import DisableIcon from "../../../../../assets/images/icon-action-disable-14x14@2x.png";
-import TransferIcon from "../../../../../assets/images/icon-action-transfer-16x16@2x.png";
 
 const baseClass = "action-button";
 export interface IActionButtonProps {
@@ -18,7 +15,7 @@ export interface IActionButtonProps {
   targetIds?: number[]; // TODO figure out undefined case
   variant?: ButtonVariant;
   hideButton?: boolean | ((targetIds: number[]) => boolean);
-  icon?: string;
+  iconSvg?: IconNames;
   iconPosition?: string;
   indicatePremiumFeature?: boolean;
 }
@@ -42,31 +39,12 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
     targetIds = [],
     variant = "brand",
     hideButton,
-    icon,
+    iconSvg,
     iconPosition,
     indicatePremiumFeature,
   } = buttonProps;
   const onButtonClick = useActionCallback(onActionButtonClick || noop);
 
-  const iconLink = ((iconProp) => {
-    // check if using pre-defined short-hand otherwise otherwise return the prop
-    switch (iconProp) {
-      case "close":
-        return CloseIcon;
-      case "remove":
-        return CloseIcon;
-      case "delete":
-        return DeleteIcon;
-      case "check":
-        return CheckIcon;
-      case "disable":
-        return DisableIcon;
-      case "transfer":
-        return TransferIcon;
-      default:
-        return null;
-    }
-  })(icon);
   // hideButton is intended to provide a flexible way to specify show/hide conditions via a boolean or a function that evaluates to a boolean
   // currently it is typed to accept an array of targetIds but this typing could easily be expanded to include other use cases
   const isHidden = (
@@ -81,6 +59,7 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
   if (isHidden(hideButton)) {
     return null;
   }
+
   return (
     <div className={`${baseClass} ${baseClass}__${kebabCase(name)}`}>
       {indicatePremiumFeature && (
@@ -92,13 +71,9 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
         variant={variant}
       >
         <>
-          {iconPosition === "left" && iconLink && (
-            <img alt={`${name} icon`} src={iconLink} />
-          )}
+          {iconPosition === "left" && iconSvg && <Icon name={iconSvg} />}
           {buttonText}
-          {iconPosition !== "left" && iconLink && (
-            <img alt={`${name} icon`} src={iconLink} />
-          )}
+          {iconPosition !== "left" && iconSvg && <Icon name={iconSvg} />}
         </>
       </Button>
     </div>

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -372,7 +372,7 @@ const DataTable = ({
       targetIds,
       variant,
       hideButton,
-      icon,
+      iconSvg,
       iconPosition,
       indicatePremiumFeature,
     } = actionButtonProps;
@@ -387,7 +387,7 @@ const DataTable = ({
           variant={variant}
           hideButton={hideButton}
           indicatePremiumFeature={indicatePremiumFeature}
-          icon={icon}
+          iconSvg={iconSvg}
           iconPosition={iconPosition}
         />
       </div>
@@ -408,7 +408,7 @@ const DataTable = ({
       onActionButtonClick: primarySelectAction?.onActionButtonClick || noop,
       targetIds,
       variant: primarySelectAction?.variant,
-      icon: primarySelectAction?.icon,
+      iconSvg: primarySelectAction?.iconSvg,
     };
 
     return !buttonText ? null : renderActionButton(actionProps);

frontend/components/TableContainer/TableContainer.tsx

@@ -8,7 +8,7 @@ import SearchField from "components/forms/fields/SearchField";
 // @ts-ignore
 import Pagination from "components/Pagination";
 import Button from "components/buttons/Button";
-import { ButtonVariant } from "components/buttons/Button/Button";
+import Icon from "components/Icon/Icon";
 
 import DataTable from "./DataTable/DataTable";
 import TableContainerUtils from "./TableContainerUtils";
@@ -337,11 +337,8 @@ const TableContainer = ({
                 >
                   <>
                     {actionButton.buttonText}
-                    {actionButton.icon && (
-                      <img
-                        src={actionButton.icon}
-                        alt={`${actionButton.buttonText} icon`}
-                      />
+                    {actionButton.iconSvg && (
+                      <Icon name={actionButton.iconSvg} />
                     )}
                   </>
                 </Button>

frontend/components/buttons/ActionButtons/ActionButtons.tsx

@@ -7,8 +7,6 @@ import DropdownButton from "components/buttons/DropdownButton";
 import Icon from "components/Icon/Icon";
 import { IconNames } from "components/icons";
 
-import MoreIcon from "../../../../assets/images/icon-more-menu-3x13@2x.png";
-
 export interface IActionButtonProps {
   type: "primary" | "secondary";
   label: string;
@@ -65,6 +63,9 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => {
                 <Button variant="text-icon" onClick={action.onClick}>
                   <>
                     {action.label}
+                    {action.icon && (
+                      <img src={action.icon} alt={action.label} />
+                    )}
                     {action.iconSvg && <Icon name={action.iconSvg} />}
                   </>
                 </Button>
@@ -79,12 +80,7 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => {
             options={secondaryActions}
             variant="text-icon"
           >
-            More options{" "}
-            <img
-              className="more-options-icon"
-              src={MoreIcon}
-              alt="More options"
-            />
+            More options <Icon name="more" />
           </DropdownButton>
         </div>
       </div>

frontend/components/buttons/ActionButtons/_styles.scss

@@ -13,9 +13,8 @@
   }
 
   &__secondary-dropdown {
-    .more-options-icon {
-      padding-left: $pad-small;
-      padding-right: $pad-medium;
+    .icon {
+      padding-left: 6px;
     }
     .dropdown-button {
       margin-left: $pad-large;

frontend/components/icons/Columns.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface IColumnsProps {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Columns = ({
+  color = "core-fleet-blue",
+  size = "medium",
+}: IColumnsProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 2a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2H3Zm0 5a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2H3Zm-1 6a1 1 0 0 1 1-1h3a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm8-11a1 1 0 0 0 0 2h3a1 1 0 1 0 0-2h-3ZM9 8a1 1 0 0 1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1Zm1 4a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Columns;

frontend/components/icons/Copy.tsx

@@ -8,7 +8,6 @@ interface ICopy {
 }
 
 const Copy = ({ color = "core-fleet-blue", size = "medium" }: ICopy) => {
-  console.log("color for this icon", color);
   return (
     <svg
       width={ICON_SIZES[size]}

frontend/components/icons/Disable.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+
+interface IDisable {
+  color?: Colors;
+}
+
+const Disable = ({ color = "core-fleet-blue" }: IDisable) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <circle cx="8" cy="8" r="7" stroke={COLORS[color]} strokeWidth="2" />
+      <path
+        fill={COLORS[color]}
+        d="m12.243 2.343 1.414 1.415-9.9 9.899-1.413-1.414z"
+      />
+    </svg>
+  );
+};
+
+export default Disable;

frontend/components/icons/Ex.tsx

@@ -7,7 +7,7 @@ interface IExProps {
   size?: IconSizes;
 }
 
-const Ex = ({ size = "small", color = "status-error" }: IExProps) => {
+const Ex = ({ size = "small", color = "core-fleet-blue" }: IExProps) => {
   return (
     <svg
       width={ICON_SIZES[size]}

frontend/components/icons/More.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+
+interface IMoreProps {
+  color?: Colors;
+}
+
+const More = ({ color = "core-fleet-blue" }: IMoreProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default More;

frontend/components/icons/Transfer.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+
+interface ITransfer {
+  color?: Colors;
+}
+const Transfer = ({ color = "core-fleet-blue" }: ITransfer) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.707 1.707A1 1 0 0 0 4.293.293l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414-1.414L3.414 6H8a1 1 0 0 0 0-2H3.414l2.293-2.293ZM12.586 10l-2.293-2.293a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12H8a1 1 0 1 1 0-2h4.586Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Transfer;

frontend/components/icons/index.ts

@@ -2,7 +2,9 @@ import Alert from "./Alert";
 import CalendarCheck from "./CalendarCheck";
 import Check from "./Check";
 import Chevron from "./Chevron";
+import Columns from "./Columns";
 import CriticalPolicy from "./CriticalPolicy";
+import Disable from "./Disable";
 import DownCaret from "./DownCaret";
 import Ex from "./Ex";
 import EmptyHosts from "./EmptyHosts";
@@ -16,6 +18,7 @@ import EmptySoftware from "./EmptySoftware";
 import EmptyTeams from "./EmptyTeams";
 import ExternalLink from "./ExternalLink";
 import Issue from "./Issue";
+import More from "./More";
 import Plus from "./Plus";
 import PremiumFeature from "./PremiumFeature";
 import Query from "./Query";
@@ -46,6 +49,7 @@ import Error from "./Error";
 import Copy from "./Copy";
 import Eye from "./Eye";
 import Pencil from "./Pencil";
+import Transfer from "./Transfer";
 import TrashCan from "./TrashCan";
 import Profile from "./Profile";
 import Download from "./Download";
@@ -64,7 +68,9 @@ export const ICON_MAP = {
   "calendar-check": CalendarCheck,
   chevron: Chevron,
   check: Check,
+  columns: Columns,
   "critical-policy": CriticalPolicy,
+  disable: Disable,
   "down-caret": DownCaret,
   ex: Ex,
   "empty-hosts": EmptyHosts,
@@ -81,11 +87,13 @@ export const ICON_MAP = {
   "missing-hosts": MissingHosts,
   lightbulb: Lightbulb,
   issue: Issue,
+  more: More,
   plus: Plus,
   query: Query,
   copy: Copy,
   eye: Eye,
   pencil: Pencil,
+  transfer: Transfer,
   trash: TrashCan,
   success: Success,
   "success-partial": SuccessPartial,

frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx

@@ -93,14 +93,14 @@ const PackQueriesTable = ({
           actionButton={{
             name: "add query",
             buttonText: "Add query",
-            icon: "plus",
+            iconSvg: "plus",
             variant: "text-icon",
             onActionButtonClick: onAddPackQuery,
           }}
           primarySelectAction={{
             name: "remove query",
             buttonText: "Remove",
-            icon: "close",
+            iconSvg: "ex",
             variant: "text-icon",
             onActionButtonClick: onRemovePackQueries,
           }}

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -414,21 +414,21 @@ const TeamDetailsWrapper = ({
                   type: "secondary",
                   label: "Manage enroll secrets",
                   buttonVariant: "text-icon",
-                  icon: "eye",
+                  iconSvg: "eye",
                   onClick: toggleManageEnrollSecretsModal,
                 },
                 {
                   type: "secondary",
                   label: "Edit team",
                   buttonVariant: "text-icon",
-                  icon: "pencil",
+                  iconSvg: "pencil",
                   onClick: toggleEditTeamModal,
                 },
                 {
                   type: "secondary",
                   label: "Delete team",
                   buttonVariant: "text-icon",
-                  icon: "trash",
+                  iconSvg: "trash",
                   hideAction: !isGlobalAdmin,
                   onClick: toggleDeleteTeamModal,
                 },

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -95,7 +95,6 @@ import EditColumnsModal from "./components/EditColumnsModal/EditColumnsModal";
 import TransferHostModal from "../components/TransferHostModal";
 import DeleteHostModal from "../components/DeleteHostModal";
 import DeleteLabelModal from "./components/DeleteLabelModal";
-import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
 import CloseIconBlack from "../../../../assets/images/icon-close-fleet-black-16x16@2x.png";
 import LabelFilterSelect from "./components/LabelFilterSelect";
 import HostsFilterBlock from "./components/HostsFilterBlock";
@@ -1379,7 +1378,7 @@ const ManageHostsPage = ({
         onActionButtonClick: onTransferToTeamClick,
         buttonText: "Transfer",
         variant: "text-icon",
-        icon: "transfer",
+        iconSvg: "transfer",
         hideButton: !isPremiumTier || (!isGlobalAdmin && !isGlobalMaintainer),
         indicatePremiumFeature: isPremiumTier && isSandboxMode,
       },
@@ -1438,14 +1437,14 @@ const ManageHostsPage = ({
         actionButton={{
           name: "edit columns",
           buttonText: "Edit columns",
-          icon: EditColumnsIcon,
+          iconSvg: "columns",
           variant: "text-icon",
           onActionButtonClick: toggleEditColumnsModal,
         }}
         primarySelectAction={{
           name: "delete host",
           buttonText: "Delete",
-          icon: "delete",
+          iconSvg: "trash",
           variant: "text-icon",
           onActionButtonClick: onDeleteHostsClick,
         }}

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -108,7 +108,7 @@
 
         .manage-hosts__filter-dropdowns {
           display: flex;
-          margin-left: $pad-small;
+          margin-left: $pad-medium;
           .manage-hosts__status-dropdown-sandbox {
             width: auto;
             .Select-control {

frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx

@@ -90,14 +90,14 @@ const PacksTable = ({
       onActionButtonClick: onEnablePackClick,
       buttonText: "Enable",
       variant: "text-icon",
-      icon: "check",
+      iconSvg: "check",
     },
     {
       name: "disable",
       onActionButtonClick: onDisablePackClick,
       buttonText: "Disable",
       variant: "text-icon",
-      icon: "disable",
+      iconSvg: "disable",
     },
   ];
   return (
@@ -118,7 +118,7 @@ const PacksTable = ({
         primarySelectAction={{
           name: "delete pack",
           buttonText: "Delete",
-          icon: "delete",
+          iconSvg: "trash",
           variant: "text-icon",
           onActionButtonClick: onDeletePackClick,
         }}

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx

@@ -165,7 +165,7 @@ const PoliciesTable = ({
           primarySelectAction={{
             name: "delete policy",
             buttonText: "Delete",
-            icon: "delete",
+            iconSvg: "trash",
             variant: "text-icon",
             onActionButtonClick: onDeletePolicyClick,
           }}

frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx

@@ -52,7 +52,7 @@ const PoliciesTable = ({
         primarySelectAction={{
           name: "delete policy",
           buttonText: "Delete",
-          icon: "delete",
+          iconSvg: "trash",
           variant: "text-icon",
         }}
         emptyComponent={NoPolicyQueries}

frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx

@@ -51,7 +51,7 @@ const PoliciesTable = ({
         primarySelectAction={{
           name: "delete policy",
           buttonText: "Delete",
-          icon: "delete",
+          iconSvg: "trash",
           variant: "text-icon",
         }}
         emptyComponent={NoPolicyQueries}

frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx

@@ -268,7 +268,7 @@ const QueriesTable = ({
         primarySelectAction={{
           name: "delete query",
           buttonText: "Delete",
-          icon: "delete",
+          iconSvg: "trash",
           variant: "text-icon",
           onActionButtonClick: onDeleteQueryClick,
         }}

frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx

@@ -103,7 +103,6 @@ const generateTableHeaders = ({
       ),
       accessor: "name",
       Cell: (cellProps: ICellProps): JSX.Element => {
-        console.log("cellProps.row.original", cellProps.row.original);
         return (
           <LinkCell
             classes="w400"

frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTable.tsx

@@ -201,7 +201,7 @@ const ScheduleTable = ({
         primarySelectAction={{
           name: "remove scheduled query",
           buttonText: "Remove",
-          icon: "remove",
+          iconSvg: "ex",
           variant: "text-icon",
           onActionButtonClick: onRemoveScheduledQueryClick,
         }}