diff --git a/assets/images/icon-action-transfer-16x16@2x.png b/assets/images/icon-action-transfer-16x16@2x.png deleted file mode 100644 index bf0eef45fa..0000000000 Binary files a/assets/images/icon-action-transfer-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-check-purple-32x32@2x.png b/assets/images/icon-check-purple-32x32@2x.png deleted file mode 100644 index ca0be63a31..0000000000 Binary files a/assets/images/icon-check-purple-32x32@2x.png and /dev/null differ diff --git a/assets/images/icon-delete-vibrant-blue-12x14@2x.png b/assets/images/icon-delete-vibrant-blue-12x14@2x.png deleted file mode 100644 index 3e641b815e..0000000000 Binary files a/assets/images/icon-delete-vibrant-blue-12x14@2x.png and /dev/null differ diff --git a/assets/images/icon-edit-columns-16x16@2x.png b/assets/images/icon-edit-columns-16x16@2x.png deleted file mode 100644 index b6e88ad63c..0000000000 Binary files a/assets/images/icon-edit-columns-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-more-menu-3x13@2x.png b/assets/images/icon-more-menu-3x13@2x.png deleted file mode 100644 index f59c5f1d1d..0000000000 Binary files a/assets/images/icon-more-menu-3x13@2x.png and /dev/null differ diff --git a/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx b/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx index 843c18850d..89f2918b8c 100644 --- a/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx +++ b/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 (
{indicatePremiumFeature && ( @@ -92,13 +71,9 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => { variant={variant} > <> - {iconPosition === "left" && iconLink && ( - {`${name} - )} + {iconPosition === "left" && iconSvg && } {buttonText} - {iconPosition !== "left" && iconLink && ( - {`${name} - )} + {iconPosition !== "left" && iconSvg && }
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx index e0c77a57fe..91afc1f899 100644 --- a/frontend/components/TableContainer/DataTable/DataTable.tsx +++ b/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} /> @@ -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); diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx index c0fab7d5c4..81d182a80c 100644 --- a/frontend/components/TableContainer/TableContainer.tsx +++ b/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 && ( - {`${actionButton.buttonText} + {actionButton.iconSvg && ( + )} diff --git a/frontend/components/buttons/ActionButtons/ActionButtons.tsx b/frontend/components/buttons/ActionButtons/ActionButtons.tsx index dc993b03e2..eee6911e29 100644 --- a/frontend/components/buttons/ActionButtons/ActionButtons.tsx +++ b/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 => { @@ -79,12 +80,7 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => { options={secondaryActions} variant="text-icon" > - More options{" "} - More options + More options diff --git a/frontend/components/buttons/ActionButtons/_styles.scss b/frontend/components/buttons/ActionButtons/_styles.scss index b1eb037e69..0fa87ee5af 100644 --- a/frontend/components/buttons/ActionButtons/_styles.scss +++ b/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; diff --git a/frontend/components/icons/Columns.tsx b/frontend/components/icons/Columns.tsx new file mode 100644 index 0000000000..ecbe56e7ed --- /dev/null +++ b/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 ( + + + + ); +}; + +export default Columns; diff --git a/frontend/components/icons/Copy.tsx b/frontend/components/icons/Copy.tsx index f30b9fd442..d261244514 100644 --- a/frontend/components/icons/Copy.tsx +++ b/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 ( { + return ( + + + + + ); +}; + +export default Disable; diff --git a/frontend/components/icons/Ex.tsx b/frontend/components/icons/Ex.tsx index 1f2ea17748..0d94f01c37 100644 --- a/frontend/components/icons/Ex.tsx +++ b/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 ( { + return ( + + + + ); +}; + +export default More; diff --git a/frontend/components/icons/Transfer.tsx b/frontend/components/icons/Transfer.tsx new file mode 100644 index 0000000000..8413d01a88 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default Transfer; diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts index d1ba031ad5..32f539bd7a 100644 --- a/frontend/components/icons/index.ts +++ b/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, diff --git a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx index 4747c0bfcb..db28681599 100644 --- a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx +++ b/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, }} diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx index b270d501d4..4c928f5596 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx +++ b/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, }, diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index ff43ce20fb..00b81b509b 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/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, }} diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index f25f18a4b7..4045d822dc 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/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 { diff --git a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx index a377a8922c..a15d804718 100644 --- a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx +++ b/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, }} diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx index d06b231e1f..033aa29fde 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx +++ b/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, }} diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx index c0887dc46a..6ee2beab49 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx +++ b/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} diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx index 1bbc755f0c..4b43b8e529 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx +++ b/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} diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx index dd05cdf441..08b3e1896e 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx +++ b/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, }} diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx index c7c5e6ac51..26e5bcc58f 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx +++ b/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 (