diff --git a/frontend/components/BackLink/BackLink.tests.tsx b/frontend/components/BackLink/BackLink.tests.tsx index 92258f6888..f8bd037b21 100644 --- a/frontend/components/BackLink/BackLink.tests.tsx +++ b/frontend/components/BackLink/BackLink.tests.tsx @@ -7,7 +7,7 @@ describe("BackLink - component", () => { render(); const text = screen.getByText("Back to software"); - const icon = screen.getByTestId("chevron-icon"); + const icon = screen.getByTestId("chevron-left-icon"); expect(text).toBeInTheDocument(); expect(icon).toBeInTheDocument(); diff --git a/frontend/components/BackLink/BackLink.tsx b/frontend/components/BackLink/BackLink.tsx index a0a6fde581..b93ce67bd0 100644 --- a/frontend/components/BackLink/BackLink.tsx +++ b/frontend/components/BackLink/BackLink.tsx @@ -25,9 +25,8 @@ const BackLink = ({ text, path, className }: IBackLinkProps): JSX.Element => { <> {text} diff --git a/frontend/components/DataError/DataError.tsx b/frontend/components/DataError/DataError.tsx index 0794d6ee04..c84bd8a90e 100644 --- a/frontend/components/DataError/DataError.tsx +++ b/frontend/components/DataError/DataError.tsx @@ -29,7 +29,7 @@ const DataError = ({
- + Something's gone wrong. diff --git a/frontend/components/EmptyTable/EmptyTable.stories.tsx b/frontend/components/EmptyTable/EmptyTable.stories.tsx index 19db7d32c5..a1331412d8 100644 --- a/frontend/components/EmptyTable/EmptyTable.stories.tsx +++ b/frontend/components/EmptyTable/EmptyTable.stories.tsx @@ -22,7 +22,7 @@ export const Basic: Story = { args: { header: "No Data", info: "There is no data to display.", - iconName: "alert", + graphicName: "empty-queries", }, }; diff --git a/frontend/components/EmptyTable/EmptyTable.tsx b/frontend/components/EmptyTable/EmptyTable.tsx index 474e5884b4..8d0c39249c 100644 --- a/frontend/components/EmptyTable/EmptyTable.tsx +++ b/frontend/components/EmptyTable/EmptyTable.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; -import Icon from "components/Icon"; -import { IconNames } from "components/icons"; +import Graphic from "components/Graphic"; +import { GraphicNames } from "components/graphics"; const baseClass = "empty-table"; @@ -9,14 +9,14 @@ export interface IEmptyTableProps { header?: JSX.Element | string; info?: JSX.Element | string; additionalInfo?: JSX.Element | string; - iconName?: IconNames; + graphicName?: GraphicNames; primaryButton?: JSX.Element; secondaryButton?: JSX.Element; className?: string; } const EmptyTable = ({ - iconName, + graphicName, header, info, additionalInfo, @@ -28,9 +28,9 @@ const EmptyTable = ({ return (
- {iconName && ( + {graphicName && (
- +
)}
diff --git a/frontend/components/FlashMessage/FlashMessage.tsx b/frontend/components/FlashMessage/FlashMessage.tsx index 3bc8d5df0f..102b2c3601 100644 --- a/frontend/components/FlashMessage/FlashMessage.tsx +++ b/frontend/components/FlashMessage/FlashMessage.tsx @@ -89,7 +89,7 @@ const FlashMessage = ({ onClick={onRemoveFlash} > = { + title: "Components/Graphic", + component: Graphic, + args: { name: "empty-queries" }, +}; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = {}; diff --git a/frontend/components/Graphic/Graphic.tsx b/frontend/components/Graphic/Graphic.tsx new file mode 100644 index 0000000000..735d5e6777 --- /dev/null +++ b/frontend/components/Graphic/Graphic.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import classnames from "classnames"; + +import { GraphicNames, GRAPHIC_MAP } from "components/graphics"; + +interface IGraphicProps { + name: GraphicNames; + className?: string; +} + +const baseClass = "graphic"; + +const Graphic = ({ name, className }: IGraphicProps) => { + const classNames = classnames(baseClass, className); + + const GraphicComponent = GRAPHIC_MAP[name]; + + return ( +
+ +
+ ); +}; + +export default Graphic; diff --git a/frontend/components/Graphic/index.ts b/frontend/components/Graphic/index.ts new file mode 100644 index 0000000000..de83cb9f7b --- /dev/null +++ b/frontend/components/Graphic/index.ts @@ -0,0 +1 @@ +export { default } from "./Graphic"; diff --git a/frontend/components/Icon/Icon.tsx b/frontend/components/Icon/Icon.tsx index b577d5717e..aeadeb95f3 100644 --- a/frontend/components/Icon/Icon.tsx +++ b/frontend/components/Icon/Icon.tsx @@ -8,14 +8,13 @@ import { IconSizes } from "styles/var/icon_sizes"; interface IIconProps { name: IconNames; color?: Colors; - direction?: "up" | "down" | "left" | "right"; className?: string; size?: IconSizes; } const baseClass = "icon"; -const Icon = ({ name, color, direction, className, size }: IIconProps) => { +const Icon = ({ name, color, className, size }: IIconProps) => { const classNames = classnames(baseClass, className); // createPassedProps creates a props object that we pass to the specific icon @@ -25,13 +24,12 @@ const Icon = ({ name, color, direction, className, size }: IIconProps) => { return Object.assign( {}, color === undefined ? undefined : { color }, - direction === undefined ? undefined : { direction }, size === undefined ? undefined : { size } ); }; return createPassedProps(); - }, [color, direction, size]); + }, [color, size]); const IconComponent = ICON_MAP[name]; diff --git a/frontend/components/Icon/README.md b/frontend/components/Icon/README.md index d2b4a9464a..548781ef83 100644 --- a/frontend/components/Icon/README.md +++ b/frontend/components/Icon/README.md @@ -16,7 +16,7 @@ The `Icon` directory includes global styling, the global `Icon` component, and t The `icons` directory includes separate files for all SVG components for Fleet icons. -Each component can be modified to take various props including but not limited to `color` using `frontend/styles/var/colors.ts`, `size` using `frontend/styles/var/icon_sizes`, or `direction` using custom SVG paths (e.g., `Chevron.tsx`). +Each component can be modified to take various props including but not limited to `color` using `frontend/styles/var/colors.ts` or `size` using `frontend/styles/var/icon_sizes`. `index.ts` maps all icon names used in `` to its respective SVG component. diff --git a/frontend/components/InfoBanner/InfoBanner.tsx b/frontend/components/InfoBanner/InfoBanner.tsx index 1e02b38b6e..74e72c8997 100644 --- a/frontend/components/InfoBanner/InfoBanner.tsx +++ b/frontend/components/InfoBanner/InfoBanner.tsx @@ -58,7 +58,7 @@ const InfoBanner = ({ {closable && (
diff --git a/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx b/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx index f278db6f08..110c58b9c8 100644 --- a/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx +++ b/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx @@ -87,11 +87,12 @@ const PlatformCompatibility = ({ className="platform" > {platform} diff --git a/frontend/components/QueryFrequencyIndicator/QueryFrequencyIndicator.tsx b/frontend/components/QueryFrequencyIndicator/QueryFrequencyIndicator.tsx index 3f745473db..95704093d7 100644 --- a/frontend/components/QueryFrequencyIndicator/QueryFrequencyIndicator.tsx +++ b/frontend/components/QueryFrequencyIndicator/QueryFrequencyIndicator.tsx @@ -44,12 +44,12 @@ const QueryFrequencyIndicator = ({ const frequencyIcon = () => { if (frequency === 0) { return checked ? ( - + ) : ( - + ); } - return ; + return ; }; return ( diff --git a/frontend/components/QueryFrequencyIndicator/_styles.scss b/frontend/components/QueryFrequencyIndicator/_styles.scss index 544b090d89..3db8e0b2a1 100644 --- a/frontend/components/QueryFrequencyIndicator/_styles.scss +++ b/frontend/components/QueryFrequencyIndicator/_styles.scss @@ -1,6 +1,6 @@ .query-frequency-indicator { width: 130px; - display: inline-block; + display: flex; align-items: center; padding: 8px 12px; text-overflow: ellipsis; diff --git a/frontend/components/Sandbox/SandboxExpiryMessage/SandboxExpiryMessage.tsx b/frontend/components/Sandbox/SandboxExpiryMessage/SandboxExpiryMessage.tsx index 15668f9366..a8d3f130b6 100644 --- a/frontend/components/Sandbox/SandboxExpiryMessage/SandboxExpiryMessage.tsx +++ b/frontend/components/Sandbox/SandboxExpiryMessage/SandboxExpiryMessage.tsx @@ -25,7 +25,7 @@ const SandboxExpiryMessage = ({

Your Fleet Sandbox expires in {expiry}.

- +

Quick tip: Enroll a host to get started.

diff --git a/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.tsx b/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.tsx index 7185c099d3..2fb79efbae 100644 --- a/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.tsx +++ b/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.tsx @@ -47,7 +47,7 @@ const StackedWhiteBoxes = ({ return (
- +
); diff --git a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx index 95ae8d5659..e0ae3cd20d 100644 --- a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx +++ b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx @@ -31,9 +31,9 @@ interface IStatusIndicatorWithIconProps { const statusIconNameMapping: Record = { success: "success", - successPartial: "success-partial", + successPartial: "success-outline", pending: "pending", - pendingPartial: "pending-partial", + pendingPartial: "pending-outline", error: "error", }; diff --git a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tests.tsx b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tests.tsx index 756e37167d..bfba739505 100644 --- a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tests.tsx +++ b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tests.tsx @@ -18,7 +18,7 @@ describe("Issue cell", () => { /> ); - const icon = screen.queryByTestId("issue-icon"); + const icon = screen.queryByTestId("error-outline-icon"); await user.hover(screen.getByText("4")); diff --git a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx index 551b6f43d6..6ddcb3df1f 100644 --- a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx +++ b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx @@ -25,7 +25,7 @@ const IssueCell = ({ issues, rowId }: IIssueCellProps): JSX.Element => { data-for={`host-issue__${rowId.toString()}`} data-tip-disable={false} > - + diff --git a/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tests.tsx b/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tests.tsx index 6850a82321..2a450868c3 100644 --- a/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tests.tsx +++ b/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tests.tsx @@ -7,7 +7,7 @@ describe("ViewAllHostsLink - component", () => { render(); const text = screen.getByText("View all hosts"); - const icon = screen.getByTestId("chevron-icon"); + const icon = screen.getByTestId("chevron-down-icon"); expect(text).toBeInTheDocument(); expect(icon).toBeInTheDocument(); diff --git a/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tsx b/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tsx index c57c535ca6..ead1f4ede6 100644 --- a/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tsx +++ b/frontend/components/ViewAllHostsLink/ViewAllHostsLink.tsx @@ -37,9 +37,8 @@ const ViewAllHostsLink = ({ {!condensed && View all hosts} diff --git a/frontend/components/buttons/DropdownButton/DropdownButton.jsx b/frontend/components/buttons/DropdownButton/DropdownButton.jsx index 2fec8559c1..748ac671fd 100644 --- a/frontend/components/buttons/DropdownButton/DropdownButton.jsx +++ b/frontend/components/buttons/DropdownButton/DropdownButton.jsx @@ -105,7 +105,7 @@ export class DropdownButton extends Component { > {children}{" "} {showCaret && ( - + )} diff --git a/frontend/components/buttons/RevealButton/RevealButton.tests.tsx b/frontend/components/buttons/RevealButton/RevealButton.tests.tsx index 226367b41a..ff9c566a0a 100644 --- a/frontend/components/buttons/RevealButton/RevealButton.tests.tsx +++ b/frontend/components/buttons/RevealButton/RevealButton.tests.tsx @@ -40,7 +40,7 @@ describe("Reveal button", () => { /> ); - const icon = screen.queryByTestId("chevron-icon"); + const icon = screen.queryByTestId("chevron-down-icon"); expect(icon).toBeNull(); }); @@ -55,7 +55,7 @@ describe("Reveal button", () => { /> ); - const icon = screen.queryByTestId("chevron-icon"); + const icon = screen.queryByTestId("chevron-right-icon"); expect(icon?.nextSibling).toHaveTextContent(SHOW_TEXT); }); @@ -69,7 +69,7 @@ describe("Reveal button", () => { /> ); - const icon = screen.queryByTestId("chevron-icon"); + const icon = screen.queryByTestId("chevron-down-icon"); expect(icon?.previousSibling).toHaveTextContent(SHOW_TEXT); }); diff --git a/frontend/components/buttons/RevealButton/RevealButton.tsx b/frontend/components/buttons/RevealButton/RevealButton.tsx index 01b606f892..08e29460db 100644 --- a/frontend/components/buttons/RevealButton/RevealButton.tsx +++ b/frontend/components/buttons/RevealButton/RevealButton.tsx @@ -46,16 +46,14 @@ const RevealButton = ({ <> {caretPosition === "before" && ( )} {buttonText} {caretPosition === "after" && ( )} diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx index f22725e46a..c0c36f386b 100644 --- a/frontend/components/forms/fields/Dropdown/Dropdown.jsx +++ b/frontend/components/forms/fields/Dropdown/Dropdown.jsx @@ -117,7 +117,7 @@ class Dropdown extends Component { renderCustomDropdownArrow = () => { return (
- +
); }; diff --git a/frontend/components/icons/CollectingResults.tsx b/frontend/components/graphics/CollectingResults.tsx similarity index 100% rename from frontend/components/icons/CollectingResults.tsx rename to frontend/components/graphics/CollectingResults.tsx diff --git a/frontend/components/icons/EmptyHosts.tsx b/frontend/components/graphics/EmptyHosts.tsx similarity index 64% rename from frontend/components/icons/EmptyHosts.tsx rename to frontend/components/graphics/EmptyHosts.tsx index 8996f477eb..1aa2dd5f59 100644 --- a/frontend/components/icons/EmptyHosts.tsx +++ b/frontend/components/graphics/EmptyHosts.tsx @@ -3,168 +3,172 @@ import React from "react"; const EmptyHosts = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/frontend/components/graphics/EmptyIntegrations.tsx b/frontend/components/graphics/EmptyIntegrations.tsx new file mode 100644 index 0000000000..ce8c133f91 --- /dev/null +++ b/frontend/components/graphics/EmptyIntegrations.tsx @@ -0,0 +1,76 @@ +import React from "react"; + +const EmptyIntegrations = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyIntegrations; diff --git a/frontend/components/graphics/EmptyMembers.tsx b/frontend/components/graphics/EmptyMembers.tsx new file mode 100644 index 0000000000..ec9f4b1834 --- /dev/null +++ b/frontend/components/graphics/EmptyMembers.tsx @@ -0,0 +1,79 @@ +import React from "react"; + +const EmptyMembers = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyMembers; diff --git a/frontend/components/graphics/EmptyPacks.tsx b/frontend/components/graphics/EmptyPacks.tsx new file mode 100644 index 0000000000..b9b2514b6c --- /dev/null +++ b/frontend/components/graphics/EmptyPacks.tsx @@ -0,0 +1,114 @@ +import React from "react"; + +const EmptyPacks = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyPacks; diff --git a/frontend/components/graphics/EmptyPolicies.tsx b/frontend/components/graphics/EmptyPolicies.tsx new file mode 100644 index 0000000000..91ae6b83b3 --- /dev/null +++ b/frontend/components/graphics/EmptyPolicies.tsx @@ -0,0 +1,136 @@ +import React from "react"; + +const EmptyPolicies = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyPolicies; diff --git a/frontend/components/graphics/EmptyQueries.tsx b/frontend/components/graphics/EmptyQueries.tsx new file mode 100644 index 0000000000..686ef157f2 --- /dev/null +++ b/frontend/components/graphics/EmptyQueries.tsx @@ -0,0 +1,113 @@ +import React from "react"; + +const EmptyQueries = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyQueries; diff --git a/frontend/components/graphics/EmptySchedule.tsx b/frontend/components/graphics/EmptySchedule.tsx new file mode 100644 index 0000000000..5fc9a6cd54 --- /dev/null +++ b/frontend/components/graphics/EmptySchedule.tsx @@ -0,0 +1,114 @@ +import React from "react"; + +const EmptySchedule = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptySchedule; diff --git a/frontend/components/graphics/EmptySoftware.tsx b/frontend/components/graphics/EmptySoftware.tsx new file mode 100644 index 0000000000..347331a6b8 --- /dev/null +++ b/frontend/components/graphics/EmptySoftware.tsx @@ -0,0 +1,137 @@ +import React from "react"; + +const EmptySoftware = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptySoftware; diff --git a/frontend/components/graphics/EmptyTeams.tsx b/frontend/components/graphics/EmptyTeams.tsx new file mode 100644 index 0000000000..43b005c200 --- /dev/null +++ b/frontend/components/graphics/EmptyTeams.tsx @@ -0,0 +1,92 @@ +import React from "react"; + +const EmptyTeams = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default EmptyTeams; diff --git a/frontend/components/graphics/FileConfigurationProfile.tsx b/frontend/components/graphics/FileConfigurationProfile.tsx new file mode 100644 index 0000000000..b85e61fb33 --- /dev/null +++ b/frontend/components/graphics/FileConfigurationProfile.tsx @@ -0,0 +1,41 @@ +import React from "react"; + +const FileConfigurationProfile = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FileConfigurationProfile; diff --git a/frontend/components/graphics/FileP7m.tsx b/frontend/components/graphics/FileP7m.tsx new file mode 100644 index 0000000000..92df721f2d --- /dev/null +++ b/frontend/components/graphics/FileP7m.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +const FileP7m = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default FileP7m; diff --git a/frontend/components/icons/FilePdf.tsx b/frontend/components/graphics/FilePdf.tsx similarity index 86% rename from frontend/components/icons/FilePdf.tsx rename to frontend/components/graphics/FilePdf.tsx index 5507282dce..d389ca2ac5 100644 --- a/frontend/components/icons/FilePdf.tsx +++ b/frontend/components/graphics/FilePdf.tsx @@ -2,47 +2,47 @@ import React from "react"; const FilePdf = () => { return ( - - + + diff --git a/frontend/components/graphics/FilePem.tsx b/frontend/components/graphics/FilePem.tsx new file mode 100644 index 0000000000..bf4cbc803e --- /dev/null +++ b/frontend/components/graphics/FilePem.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +const FilePem = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default FilePem; diff --git a/frontend/components/icons/FilePkg.tsx b/frontend/components/graphics/FilePkg.tsx similarity index 73% rename from frontend/components/icons/FilePkg.tsx rename to frontend/components/graphics/FilePkg.tsx index eeb1dcb8c6..a839e127da 100644 --- a/frontend/components/icons/FilePkg.tsx +++ b/frontend/components/graphics/FilePkg.tsx @@ -2,132 +2,132 @@ import React from "react"; const FilePkg = () => { return ( - + diff --git a/frontend/components/graphics/FilePy.tsx b/frontend/components/graphics/FilePy.tsx new file mode 100644 index 0000000000..f8269b824b --- /dev/null +++ b/frontend/components/graphics/FilePy.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +const FilePy = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default FilePy; diff --git a/frontend/components/graphics/FileScript.tsx b/frontend/components/graphics/FileScript.tsx new file mode 100644 index 0000000000..dcdadede29 --- /dev/null +++ b/frontend/components/graphics/FileScript.tsx @@ -0,0 +1,68 @@ +import React from "react"; + +const FileScript = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FileScript; diff --git a/frontend/components/graphics/FileSh.tsx b/frontend/components/graphics/FileSh.tsx new file mode 100644 index 0000000000..ed4fb3421d --- /dev/null +++ b/frontend/components/graphics/FileSh.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +const FileSh = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default FileSh; diff --git a/frontend/components/graphics/index.ts b/frontend/components/graphics/index.ts new file mode 100644 index 0000000000..a44e2c31af --- /dev/null +++ b/frontend/components/graphics/index.ts @@ -0,0 +1,44 @@ +import EmptyQueries from "./EmptyQueries"; +import EmptyIntegrations from "./EmptyIntegrations"; +import EmptyMembers from "./EmptyMembers"; +import EmptyPolicies from "./EmptyPolicies"; +import EmptySoftware from "./EmptySoftware"; +import FileConfigurationProfile from "./FileConfigurationProfile"; +import FileSh from "./FileSh"; +import FilePy from "./FilePy"; +import FileScript from "./FileScript"; +import FilePdf from "./FilePdf"; +import FilePkg from "./FilePkg"; +import FileP7m from "./FileP7m"; +import FilePem from "./FilePem"; +import EmptyHosts from "./EmptyHosts"; +import EmptyTeams from "./EmptyTeams"; +import EmptyPacks from "./EmptyPacks"; +import EmptySchedule from "./EmptySchedule"; +import CollectingResults from "./CollectingResults"; + +export const GRAPHIC_MAP = { + // Empty state graphics + "empty-queries": EmptyQueries, + "empty-integrations": EmptyIntegrations, + "empty-members": EmptyMembers, + "empty-policies": EmptyPolicies, + "empty-software": EmptySoftware, + "empty-hosts": EmptyHosts, + "empty-teams": EmptyTeams, + "empty-packs": EmptyPacks, + "empty-schedule": EmptySchedule, + // File type graphics + "file-configuration-profile": FileConfigurationProfile, + "file-sh": FileSh, + "file-py": FilePy, + "file-script": FileScript, + "file-pdf": FilePdf, + "file-pkg": FilePkg, + "file-p7m": FileP7m, + "file-pem": FilePem, + // Other graphics + "collecting-results": CollectingResults, +}; + +export type GraphicNames = keyof typeof GRAPHIC_MAP; diff --git a/frontend/components/icons/Alert.tsx b/frontend/components/icons/Alert.tsx deleted file mode 100644 index 01d84253b9..0000000000 --- a/frontend/components/icons/Alert.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -const Alert = () => { - return ( - - - - ); -}; - -export default Alert; diff --git a/frontend/components/icons/AppleCircled.tsx b/frontend/components/icons/AppleCircled.tsx deleted file mode 100644 index 7214e63f68..0000000000 --- a/frontend/components/icons/AppleCircled.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { COLORS, Colors } from "styles/var/colors"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface IAppleCircledProps { - size?: IconSizes; - iconColor?: Colors; - bgColor?: Colors; -} -const AppleCircled = ({ - size = "extra-large", - iconColor = "ui-fleet-black-75", // default grey - bgColor = "ui-blue-10", // default light blue -}: IAppleCircledProps) => { - return ( - - - - - - ); -}; - -export default AppleCircled; diff --git a/frontend/components/icons/ArrowInternalLink.tsx b/frontend/components/icons/ArrowInternalLink.tsx index fa993fa497..ee4c84cbeb 100644 --- a/frontend/components/icons/ArrowInternalLink.tsx +++ b/frontend/components/icons/ArrowInternalLink.tsx @@ -1,21 +1,30 @@ import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; -const ArrowInternalLink = () => { +interface IArrowInternalLink { + color?: Colors; + size?: IconSizes; +} + +const ArrowInternalLink = ({ + color = "core-fleet-blue", + size = "medium", +}: IArrowInternalLink) => { return ( - ); }; diff --git a/frontend/components/icons/CalendarCheck.tsx b/frontend/components/icons/CalendarCheck.tsx index d95b0a55c2..a78f7ddaef 100644 --- a/frontend/components/icons/CalendarCheck.tsx +++ b/frontend/components/icons/CalendarCheck.tsx @@ -9,22 +9,12 @@ const CalendarCheck = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - - ); }; diff --git a/frontend/components/icons/Check.tsx b/frontend/components/icons/Check.tsx index f9d33003e2..f84a2ffd1f 100644 --- a/frontend/components/icons/Check.tsx +++ b/frontend/components/icons/Check.tsx @@ -8,25 +8,19 @@ interface ICheckProps { const Check = ({ color = "core-fleet-blue" }: ICheckProps) => { return ( - - - - - - - - + ); }; diff --git a/frontend/components/icons/Chevron.tsx b/frontend/components/icons/ChevronDown.tsx similarity index 57% rename from frontend/components/icons/Chevron.tsx rename to frontend/components/icons/ChevronDown.tsx index c9f142e449..f685286613 100644 --- a/frontend/components/icons/Chevron.tsx +++ b/frontend/components/icons/ChevronDown.tsx @@ -1,43 +1,33 @@ import React from "react"; import { COLORS, Colors } from "styles/var/colors"; -import { IconSizes, ICON_SIZES } from "styles/var/icon_sizes"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; interface IChevronProps { color?: Colors; - /** Default direction "down" */ - direction?: "up" | "down" | "left" | "right"; - size: IconSizes; + size?: IconSizes; } -const SVG_PATH = { - up: "M4 10L8 6L12 10", - down: "m4 6 4 4 4-4", - left: "M10 12L6 8L10 4", - right: "M6 4L10 8L6 12", -}; - -const Chevron = ({ +const ChevronDown = ({ color = "core-fleet-black", - direction = "down", size = "medium", }: IChevronProps) => { return ( ); }; -export default Chevron; +export default ChevronDown; diff --git a/frontend/components/icons/Issue.tsx b/frontend/components/icons/ChevronLeft.tsx similarity index 53% rename from frontend/components/icons/Issue.tsx rename to frontend/components/icons/ChevronLeft.tsx index 027c330003..15253dfe89 100644 --- a/frontend/components/icons/Issue.tsx +++ b/frontend/components/icons/ChevronLeft.tsx @@ -1,33 +1,33 @@ import React from "react"; - import { COLORS, Colors } from "styles/var/colors"; import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; -interface IErrorProps { +interface IChevronProps { color?: Colors; size?: IconSizes; } -const Issue = ({ - color = "ui-fleet-black-50", +const ChevronLeft = ({ + color = "core-fleet-black", size = "medium", -}: IErrorProps) => { +}: IChevronProps) => { return ( ); }; -export default Issue; +export default ChevronLeft; diff --git a/frontend/components/icons/ChevronRight.tsx b/frontend/components/icons/ChevronRight.tsx new file mode 100644 index 0000000000..b1aab56288 --- /dev/null +++ b/frontend/components/icons/ChevronRight.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface IChevronProps { + color?: Colors; + size?: IconSizes; +} + +const ChevronRight = ({ + color = "core-fleet-black", + size = "medium", +}: IChevronProps) => { + return ( + + + + ); +}; + +export default ChevronRight; diff --git a/frontend/components/icons/ChevronUp.tsx b/frontend/components/icons/ChevronUp.tsx new file mode 100644 index 0000000000..81ba7e5525 --- /dev/null +++ b/frontend/components/icons/ChevronUp.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface IChevronProps { + color?: Colors; + size?: IconSizes; +} + +const ChevronUp = ({ + color = "core-fleet-black", + size = "medium", +}: IChevronProps) => { + return ( + + + + ); +}; + +export default ChevronUp; diff --git a/frontend/components/icons/ChromeCircled.tsx b/frontend/components/icons/ChromeCircled.tsx deleted file mode 100644 index f4aa747794..0000000000 --- a/frontend/components/icons/ChromeCircled.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import { COLORS, Colors } from "styles/var/colors"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface IChromeCircledProps { - size: IconSizes; - iconColor?: Colors; - bgColor?: Colors; -} - -const ChromeCircled = ({ - size = "extra-large", - iconColor = "ui-fleet-black-75", // default grey - bgColor = "ui-blue-10", // default light blue -}: IChromeCircledProps) => { - return ( - - - - - - - ); -}; - -export default ChromeCircled; diff --git a/frontend/components/icons/Clock.tsx b/frontend/components/icons/Clock.tsx index c739a19aa7..af8a5ec21b 100644 --- a/frontend/components/icons/Clock.tsx +++ b/frontend/components/icons/Clock.tsx @@ -10,27 +10,21 @@ interface IClockProps { const Clock = ({ color = "ui-fleet-black-75", - size = "small", + size = "medium", }: IClockProps) => { return ( - ); diff --git a/frontend/components/icons/Ex.tsx b/frontend/components/icons/Close.tsx similarity index 79% rename from frontend/components/icons/Ex.tsx rename to frontend/components/icons/Close.tsx index 0d94f01c37..a86ae07df6 100644 --- a/frontend/components/icons/Ex.tsx +++ b/frontend/components/icons/Close.tsx @@ -7,7 +7,7 @@ interface IExProps { size?: IconSizes; } -const Ex = ({ size = "small", color = "core-fleet-blue" }: IExProps) => { +const Close = ({ size = "medium", color = "core-fleet-blue" }: IExProps) => { return ( { xmlns="http://www.w3.org/2000/svg" > { ); }; -export default Ex; +export default Close; diff --git a/frontend/components/icons/CloseFilled.tsx b/frontend/components/icons/CloseFilled.tsx new file mode 100644 index 0000000000..2889640215 --- /dev/null +++ b/frontend/components/icons/CloseFilled.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 IExCircledProps { + color?: Colors; + size?: IconSizes; +} + +const CloseFilled = ({ + size = "medium", + color = "core-fleet-blue", +}: IExCircledProps) => { + return ( + + + + ); +}; + +export default CloseFilled; diff --git a/frontend/components/icons/CriticalPolicy.tsx b/frontend/components/icons/CriticalPolicy.tsx deleted file mode 100644 index 074c596178..0000000000 --- a/frontend/components/icons/CriticalPolicy.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { COLORS, Colors } from "styles/var/colors"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface ICriticalPolicyProps { - color?: Colors; - size?: IconSizes; -} - -const CriticalPolicy = ({ - color = "core-fleet-blue", - size = "small", -}: ICriticalPolicyProps) => { - return ( - - - - - - - - - - - ); -}; - -export default CriticalPolicy; diff --git a/frontend/components/icons/DownCaret.tsx b/frontend/components/icons/DownCaret.tsx deleted file mode 100644 index 95d5dfd182..0000000000 --- a/frontend/components/icons/DownCaret.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; - -const DownCaret = () => { - return ( - - - - ); -}; - -export default DownCaret; diff --git a/frontend/components/icons/EmptyIntegrations.tsx b/frontend/components/icons/EmptyIntegrations.tsx deleted file mode 100644 index b15b2230fd..0000000000 --- a/frontend/components/icons/EmptyIntegrations.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; - -const EmptyIntegrations = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyIntegrations; diff --git a/frontend/components/icons/EmptyMembers.tsx b/frontend/components/icons/EmptyMembers.tsx deleted file mode 100644 index b4c6328fe6..0000000000 --- a/frontend/components/icons/EmptyMembers.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; - -const EmptyMembers = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyMembers; diff --git a/frontend/components/icons/EmptyPacks.tsx b/frontend/components/icons/EmptyPacks.tsx deleted file mode 100644 index 2d949841ea..0000000000 --- a/frontend/components/icons/EmptyPacks.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from "react"; - -const EmptyPacks = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyPacks; diff --git a/frontend/components/icons/EmptyPolicies.tsx b/frontend/components/icons/EmptyPolicies.tsx deleted file mode 100644 index 27b8594167..0000000000 --- a/frontend/components/icons/EmptyPolicies.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from "react"; - -const EmptyPolicies = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyPolicies; diff --git a/frontend/components/icons/EmptyQueries.tsx b/frontend/components/icons/EmptyQueries.tsx deleted file mode 100644 index 9062a89f3e..0000000000 --- a/frontend/components/icons/EmptyQueries.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from "react"; - -const EmptyQuery = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyQuery; diff --git a/frontend/components/icons/EmptySchedule.tsx b/frontend/components/icons/EmptySchedule.tsx deleted file mode 100644 index 68e4ef13b5..0000000000 --- a/frontend/components/icons/EmptySchedule.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from "react"; - -const EmptySchedule = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptySchedule; diff --git a/frontend/components/icons/EmptySoftware.tsx b/frontend/components/icons/EmptySoftware.tsx deleted file mode 100644 index d3f74e63c4..0000000000 --- a/frontend/components/icons/EmptySoftware.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React from "react"; - -const EmptySoftware = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptySoftware; diff --git a/frontend/components/icons/EmptyTeams.tsx b/frontend/components/icons/EmptyTeams.tsx deleted file mode 100644 index 226609bb98..0000000000 --- a/frontend/components/icons/EmptyTeams.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from "react"; - -const EmptyTeams = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default EmptyTeams; diff --git a/frontend/components/icons/ExCircled.tsx b/frontend/components/icons/ExCircled.tsx deleted file mode 100644 index ed698a9012..0000000000 --- a/frontend/components/icons/ExCircled.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { COLORS, Colors } from "styles/var/colors"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface IExCircledProps { - color?: Colors; - size?: IconSizes; -} - -const ExCircled = ({ - size = "medium", - color = "core-fleet-blue", -}: IExCircledProps) => { - return ( - - - - ); -}; - -export default ExCircled; diff --git a/frontend/components/icons/Eye.tsx b/frontend/components/icons/Eye.tsx index e09a6d212b..1872fc6058 100644 --- a/frontend/components/icons/Eye.tsx +++ b/frontend/components/icons/Eye.tsx @@ -9,21 +9,18 @@ interface IEye { const Eye = ({ color = "core-fleet-blue", size = "medium" }: IEye) => { return ( - - - - - - - - - + ); }; diff --git a/frontend/components/icons/FileBash.tsx b/frontend/components/icons/FileBash.tsx deleted file mode 100644 index 8ffff65e36..0000000000 --- a/frontend/components/icons/FileBash.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; - -const FileBash = () => { - return ( - - - - - - - - - - - - - - - - - ); -}; - -export default FileBash; diff --git a/frontend/components/icons/FileGeneric.tsx b/frontend/components/icons/FileGeneric.tsx deleted file mode 100644 index c038867e44..0000000000 --- a/frontend/components/icons/FileGeneric.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from "react"; - -const FileGeneric = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default FileGeneric; diff --git a/frontend/components/icons/FilePython.tsx b/frontend/components/icons/FilePython.tsx deleted file mode 100644 index b7e00f0291..0000000000 --- a/frontend/components/icons/FilePython.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; - -const FilePython = () => { - return ( - - - - - - - - - - - - - - - - - ); -}; - -export default FilePython; diff --git a/frontend/components/icons/FileZsh.tsx b/frontend/components/icons/FileZsh.tsx deleted file mode 100644 index aee2fe94ad..0000000000 --- a/frontend/components/icons/FileZsh.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; - -const FileZsh = () => { - return ( - - - - - - - - - - - - - - - - - ); -}; - -export default FileZsh; diff --git a/frontend/components/icons/Files.tsx b/frontend/components/icons/Files.tsx deleted file mode 100644 index 61a1522ce5..0000000000 --- a/frontend/components/icons/Files.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import React from "react"; - -const Files = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default Files; diff --git a/frontend/components/icons/Lightbulb.tsx b/frontend/components/icons/Lightbulb.tsx index 8f45c99bfc..91bc1cbc93 100644 --- a/frontend/components/icons/Lightbulb.tsx +++ b/frontend/components/icons/Lightbulb.tsx @@ -1,30 +1,30 @@ import React from "react"; import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; interface ILightbulbProps { color?: Colors; + size?: IconSizes; } -const Lightbulb = ({ color = "core-fleet-blue" }: ILightbulbProps) => { +const Lightbulb = ({ + size = "medium", + color = "core-fleet-blue", +}: ILightbulbProps) => { return ( - - - - - - - - - - - + ); }; diff --git a/frontend/components/icons/Pending.tsx b/frontend/components/icons/Pending.tsx index bc4e1720c7..e7be86d49f 100644 --- a/frontend/components/icons/Pending.tsx +++ b/frontend/components/icons/Pending.tsx @@ -13,16 +13,17 @@ const Pending = ({ }: IPendingProps) => { return ( ); diff --git a/frontend/components/icons/PendingOutline.tsx b/frontend/components/icons/PendingOutline.tsx new file mode 100644 index 0000000000..28228318c4 --- /dev/null +++ b/frontend/components/icons/PendingOutline.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +import { COLORS, Colors } from "styles/var/colors"; + +interface ICheckProps { + color?: Colors; +} + +const PendingOutline = ({ color = "ui-fleet-black-50" }: ICheckProps) => { + return ( + + + + ); +}; + +export default PendingOutline; diff --git a/frontend/components/icons/PendingPartial.tsx b/frontend/components/icons/PendingPartial.tsx deleted file mode 100644 index 61420d1fe4..0000000000 --- a/frontend/components/icons/PendingPartial.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -import { COLORS, Colors } from "styles/var/colors"; - -interface ICheckProps { - color?: Colors; -} - -const PendingPartial = ({ color = "ui-fleet-black-50" }: ICheckProps) => { - return ( - - - - - - - ); -}; - -export default PendingPartial; diff --git a/frontend/components/icons/Policy.tsx b/frontend/components/icons/Policy.tsx index fe5b2fc3a5..78a56df33e 100644 --- a/frontend/components/icons/Policy.tsx +++ b/frontend/components/icons/Policy.tsx @@ -1,32 +1,29 @@ import React from "react"; import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; -interface IPolicies { +interface IPolicyProps { + size?: IconSizes; color?: Colors; } -const Policy = ({ color = "core-fleet-black" }: IPolicies) => { +const Policy = ({ + color = "ui-fleet-black-75", + size = "medium", +}: IPolicyProps) => { return ( - - - - - - - - - + fillRule="evenodd" + d="M8.314.058a1 1 0 00-.631 0L1.684 2.055l-.586.196-.088.612c-.265 1.855-.27 4.716.605 7.313.886 2.628 2.729 5.1 6.188 5.791l.195.04.196-.04c3.46-.69 5.302-3.163 6.188-5.79.876-2.598.87-5.46.605-7.314l-.088-.612-.586-.196L8.314.058zM2.92 3.752l5.08-1.69 5.08 1.69c.151 1.618.07 3.822-.592 5.785-.72 2.133-2.072 3.87-4.489 4.427-2.416-.558-3.769-2.294-4.488-4.427-.662-1.963-.743-4.167-.591-5.785zm8.151 2.735a.75.75 0 10-1.14-.974L7.459 8.408 6.033 6.97a.75.75 0 00-1.066 1.056l2 2.017a.75.75 0 001.103-.041l3-3.515z" + clipRule="evenodd" + /> ); }; diff --git a/frontend/components/icons/Query.tsx b/frontend/components/icons/Query.tsx index 2c84eb871f..ec5060d3f8 100644 --- a/frontend/components/icons/Query.tsx +++ b/frontend/components/icons/Query.tsx @@ -9,17 +9,17 @@ interface IQuery { const Query = ({ color = "core-fleet-blue", size = "medium" }: IQuery) => { return ( ); diff --git a/frontend/components/icons/SuccessPartial.tsx b/frontend/components/icons/SuccessOutline.tsx similarity index 83% rename from frontend/components/icons/SuccessPartial.tsx rename to frontend/components/icons/SuccessOutline.tsx index ee2e0072dd..564679fb27 100644 --- a/frontend/components/icons/SuccessPartial.tsx +++ b/frontend/components/icons/SuccessOutline.tsx @@ -5,7 +5,7 @@ interface ICheckProps { color?: Colors; } -const SuccessPartial = ({ color = "status-success" }: ICheckProps) => { +const SuccessOutline = ({ color = "status-success" }: ICheckProps) => { return ( @@ -20,4 +20,4 @@ const SuccessPartial = ({ color = "status-success" }: ICheckProps) => { ); }; -export default SuccessPartial; +export default SuccessOutline; diff --git a/frontend/components/icons/TrashCan.tsx b/frontend/components/icons/TrashCan.tsx index d37faa4efb..3a27d59273 100644 --- a/frontend/components/icons/TrashCan.tsx +++ b/frontend/components/icons/TrashCan.tsx @@ -13,15 +13,17 @@ const TrashCan = ({ }: ITrashCanProps) => { return ( ); diff --git a/frontend/components/icons/Warning.tsx b/frontend/components/icons/Warning.tsx index a3e1ce156c..ada22f1bf0 100644 --- a/frontend/components/icons/Warning.tsx +++ b/frontend/components/icons/Warning.tsx @@ -10,21 +10,21 @@ interface IWarningProps { const Warning = ({ color = "status-warning", - size = "small", + size = "medium", }: IWarningProps) => { return ( ); diff --git a/frontend/components/icons/WindowsCircled.tsx b/frontend/components/icons/WindowsCircled.tsx deleted file mode 100644 index 08b2804b47..0000000000 --- a/frontend/components/icons/WindowsCircled.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; -import { Colors, COLORS } from "styles/var/colors"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface IWindowsCircledProps { - size: IconSizes; - iconColor?: Colors; - bgColor?: Colors; -} - -const WindowsCircled = ({ - size = "extra-large", - iconColor = "ui-fleet-black-75", // default grey - bgColor = "ui-blue-10", // default light blue -}: IWindowsCircledProps) => { - return ( - - - - - - - - - ); -}; - -export default WindowsCircled; diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts index 36ac93a842..4c785fe308 100644 --- a/frontend/components/icons/index.ts +++ b/frontend/components/icons/index.ts @@ -1,31 +1,20 @@ -import Alert from "./Alert"; import Arrow from "./Arrow"; import ArrowInternalLink from "./ArrowInternalLink"; import CalendarCheck from "./CalendarCheck"; import Check from "./Check"; -import Chevron from "./Chevron"; -import CollectingResults from "./CollectingResults"; +import ChevronLeft from "./ChevronLeft"; +import ChevronRight from "./ChevronRight"; +import ChevronUp from "./ChevronUp"; +import ChevronDown from "./ChevronDown"; import Columns from "./Columns"; -import CriticalPolicy from "./CriticalPolicy"; import Disable from "./Disable"; -import DownCaret from "./DownCaret"; -import Ex from "./Ex"; -import ExCircled from "./ExCircled"; -import EmptyHosts from "./EmptyHosts"; -import EmptyIntegrations from "./EmptyIntegrations"; -import EmptyMembers from "./EmptyMembers"; -import EmptyPacks from "./EmptyPacks"; -import EmptyPolicies from "./EmptyPolicies"; -import EmptyQueries from "./EmptyQueries"; -import EmptySchedule from "./EmptySchedule"; -import EmptySoftware from "./EmptySoftware"; -import EmptyTeams from "./EmptyTeams"; +import Close from "./Close"; +import CloseFilled from "./CloseFilled"; import ExternalLink from "./ExternalLink"; import Filter from "./Filter"; import FilterAlt from "./FilterAlt"; import FilterFunnel from "./FilterFunnel"; import Info from "./Info"; -import Issue from "./Issue"; import More from "./More"; import Plus from "./Plus"; import PremiumFeature from "./PremiumFeature"; @@ -45,17 +34,11 @@ import Centos from "./Centos"; import Ubuntu from "./Ubuntu"; import Chrome from "./Chrome"; -// Encircled -import AppleCircled from "./AppleCircled"; -import LinuxCircled from "./LinuxCircled"; -import WindowsCircled from "./WindowsCircled"; -import ChromeCircled from "./ChromeCircled"; - // Status Icons import Success from "./Success"; -import SuccessPartial from "./SuccessPartial"; +import SuccessOutline from "./SuccessOutline"; import Pending from "./Pending"; -import PendingPartial from "./PendingPartial"; +import PendingOutline from "./PendingOutline"; import ErrorOutline from "./ErrorOutline"; import Error from "./Error"; import Warning from "./Warning"; @@ -68,39 +51,22 @@ import Transfer from "./Transfer"; import TrashCan from "./TrashCan"; import Profile from "./Profile"; import Download from "./Download"; -import Files from "./Files"; import Refresh from "./Refresh"; -import FilePython from "./FilePython"; -import FileZsh from "./FileZsh"; -import FileBash from "./FileBash"; -import FileGeneric from "./FileGeneric"; -import FilePkg from "./FilePkg"; -import FilePdf from "./FilePdf"; // a mapping of the usable names of icons to the icon source. export const ICON_MAP = { - alert: Alert, arrow: Arrow, "arrow-internal-link": ArrowInternalLink, "calendar-check": CalendarCheck, - chevron: Chevron, + "chevron-left": ChevronLeft, + "chevron-right": ChevronRight, + "chevron-up": ChevronUp, + "chevron-down": ChevronDown, check: Check, - "collecting-results": CollectingResults, columns: Columns, - "critical-policy": CriticalPolicy, disable: Disable, - "down-caret": DownCaret, - ex: Ex, - "ex-circled": ExCircled, - "empty-hosts": EmptyHosts, - "empty-integrations": EmptyIntegrations, - "empty-members": EmptyMembers, - "empty-packs": EmptyPacks, - "empty-policies": EmptyPolicies, - "empty-queries": EmptyQueries, - "empty-schedule": EmptySchedule, - "empty-software": EmptySoftware, - "empty-teams": EmptyTeams, + close: Close, + "close-filled": CloseFilled, "external-link": ExternalLink, filter: Filter, "filter-alt": FilterAlt, @@ -109,7 +75,6 @@ export const ICON_MAP = { "missing-hosts": MissingHosts, lightbulb: Lightbulb, info: Info, - issue: Issue, more: More, plus: Plus, policy: Policy, @@ -121,9 +86,9 @@ export const ICON_MAP = { transfer: Transfer, trash: TrashCan, success: Success, - "success-partial": SuccessPartial, + "success-outline": SuccessOutline, pending: Pending, - "pending-partial": PendingPartial, + "pending-outline": PendingOutline, error: Error, "error-outline": ErrorOutline, warning: Warning, @@ -140,19 +105,8 @@ export const ICON_MAP = { chrome: Chrome, ChromeOS: Chrome, "premium-feature": PremiumFeature, - "apple-circled": AppleCircled, - "windows-circled": WindowsCircled, - "linux-circled": LinuxCircled, - "chrome-circled": ChromeCircled, profile: Profile, download: Download, - files: Files, - "file-python": FilePython, - "file-zsh": FileZsh, - "file-bash": FileBash, - "file-pkg": FilePkg, - "file-generic": FileGeneric, - "file-pdf": FilePdf, refresh: Refresh, }; diff --git a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx index db28681599..5a182d37e5 100644 --- a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx +++ b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx @@ -100,7 +100,7 @@ const PackQueriesTable = ({ primarySelectAction={{ name: "remove query", buttonText: "Remove", - iconSvg: "ex", + iconSvg: "close", variant: "text-icon", onActionButtonClick: onRemovePackQueries, }} diff --git a/frontend/components/queries/queryResults/AwaitingResults/AwaitingResults.tsx b/frontend/components/queries/queryResults/AwaitingResults/AwaitingResults.tsx index e807a83b6a..ace5ba68da 100644 --- a/frontend/components/queries/queryResults/AwaitingResults/AwaitingResults.tsx +++ b/frontend/components/queries/queryResults/AwaitingResults/AwaitingResults.tsx @@ -7,7 +7,7 @@ const baseClass = "awaiting-results"; const AwaitingResults = () => { return ( - +

diff --git a/frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/_styles.scss b/frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/_styles.scss index 8e04c9937e..5a3aabfd1f 100644 --- a/frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/_styles.scss +++ b/frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/_styles.scss @@ -21,8 +21,6 @@ .icon { margin-right: $pad-small; - width: 20px; - height: 20px; } } } diff --git a/frontend/interfaces/empty_table.ts b/frontend/interfaces/empty_table.ts index 931179f782..3beefcf7d3 100644 --- a/frontend/interfaces/empty_table.ts +++ b/frontend/interfaces/empty_table.ts @@ -1,7 +1,7 @@ -import { IconNames } from "components/icons"; +import { GraphicNames } from "components/graphics"; export interface IEmptyTableProps { - iconName?: IconNames; + graphicName?: GraphicNames; header?: JSX.Element | string; info?: JSX.Element | string; additionalInfo?: JSX.Element | string; diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx index 42df625f09..17e091a4a4 100644 --- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx +++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx @@ -31,7 +31,7 @@ const ScriptContent = ({ content }: IScriptContentProps) => { const StatusMessageRunning = () => (

- + Script is running. To see if the script finished, close this modal and open it again.

@@ -41,7 +41,7 @@ const StatusMessageRunning = () => ( const StatusMessageSuccess = () => (

- + Exit code: 0 (Script ran successfully.)

diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx index a1a7a91626..686be3cd8e 100644 --- a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx +++ b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx @@ -50,7 +50,7 @@ const HostsSummary = ({ const renderMacCount = (teamId?: number) => ( ( ( { isLoading={false} showUI={false} // tested title={"Windows hosts"} - iconName={"windows-circled"} + iconName={"windows"} + circledIcon tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -33,7 +34,8 @@ describe("SummaryTile - component", () => { isLoading // tested showUI title={"Windows hosts"} - iconName={"windows-circled"} + iconName={"windows"} + circledIcon tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -52,7 +54,8 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} // tested - iconName={"windows-circled"} // tested + iconName={"windows"} // tested + circledIcon tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -60,7 +63,7 @@ describe("SummaryTile - component", () => { const title = screen.getByText("Windows hosts"); const count = screen.getByText("200"); - const icon = screen.queryByTestId("windows-circled-icon"); + const icon = screen.queryByTestId("windows-icon"); expect(title).toBeInTheDocument(); expect(count).toBeInTheDocument(); @@ -74,7 +77,8 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} - iconName={"windows-circled"} + iconName={"windows"} + circledIcon path={paths.MANAGE_HOSTS_LABEL(10)} /> ); @@ -91,7 +95,8 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} - iconName={"windows-circled"} + iconName={"windows"} + circledIcon tooltip={"Hosts on any Windows device"} // tested path={paths.MANAGE_HOSTS_LABEL(10)} /> diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx index deb4cb9353..a6984654ea 100644 --- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx +++ b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx @@ -15,6 +15,7 @@ interface ISummaryTileProps { showUI: boolean; title: string; iconName: IconNames; + circledIcon?: boolean; iconColor?: Colors; path: string; tooltip?: string; @@ -31,6 +32,7 @@ const SummaryTile = ({ showUI, // false on first load only title, iconName, + circledIcon, iconColor, path, tooltip, @@ -53,11 +55,14 @@ const SummaryTile = ({ const tile = ( <> - +
+ +
{notSupported ? (
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss index a2d35d8220..ce83b54113 100644 --- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss +++ b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss @@ -27,6 +27,23 @@ white-space: nowrap; } + &__circled-icon { + display: flex; + justify-content: center; + align-items: center; + background-color: $core-vibrant-blue; + width: px-to-rem(48); + height: px-to-rem(48); + border-radius: 100%; + background: $ui-vibrant-blue-10; + margin-right: px-to-rem(12); + + .icon { + margin-left: 0 !important; + margin-right: 0; + } + } + &__count { font-size: $large; white-space: nowrap; diff --git a/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx b/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx index cf4a1566d1..dba993284a 100644 --- a/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx +++ b/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx @@ -17,7 +17,7 @@ const LearnFleet = (): JSX.Element => { target="_blank" rel="noopener noreferrer" > - Learn how to use Fleet  + Learn how to use Fleet
diff --git a/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss b/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss index ee604b3dc7..aa33cb2e2a 100644 --- a/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss +++ b/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss @@ -3,7 +3,7 @@ font-size: $x-small; } .icon { - margin-left: $pad-xsmall; + margin-left: $pad-small; vertical-align: sub; } } diff --git a/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx b/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx index ca51875742..0f6cc1d971 100644 --- a/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx +++ b/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx @@ -241,9 +241,8 @@ const WelcomeHost = ({ /> {p.name}
diff --git a/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx b/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx index c8addf49c4..e9dfa805c5 100644 --- a/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx +++ b/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { Link } from "react-router"; import Button from "components/buttons/Button"; -import LinkArrow from "../../../../../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png"; +import Icon from "components/Icon"; interface IInfoCardProps { title: string; @@ -66,7 +66,7 @@ const useInfoCard = ({ {action.text} - link arrow + ); @@ -79,7 +79,7 @@ const useInfoCard = ({ {action.text} - link arrow + ); } diff --git a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss index e556dfe3d6..6ad4ee0c03 100644 --- a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss +++ b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss @@ -64,9 +64,8 @@ text-align: right; } - #link-arrow { - height: 10px; - width: 18px; + .icon { margin-left: $pad-small; + vertical-align: sub; } } diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/CustomSettings.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/CustomSettings.tsx index eb69a5ad1e..db92bd845e 100644 --- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/CustomSettings.tsx +++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/CustomSettings.tsx @@ -127,7 +127,7 @@ const CustomSettings = ({ )} { switch (fileExtension) { case "py": - return "file-python"; - case "zsh": - return "file-zsh"; + return "file-py"; case "sh": - return "file-bash"; + return "file-sh"; default: - return "file-generic"; + return "file-script"; } }; @@ -48,7 +47,7 @@ const ScriptListItem = ({ script, onDelete }: IScriptListItemProps) => { return (
- +
{script.name} diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/ScriptUploader.tsx b/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/ScriptUploader.tsx index 531b76f7e1..a53d4135a5 100644 --- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/ScriptUploader.tsx +++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploader/ScriptUploader.tsx @@ -45,7 +45,7 @@ const ScriptPackageUploader = ({ return (
- +
{bootstrapPackage.name} diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageUploader/BootstrapPackageUploader.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageUploader/BootstrapPackageUploader.tsx index ef7f57e3e3..c332d0b12f 100644 --- a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageUploader/BootstrapPackageUploader.tsx +++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageUploader/BootstrapPackageUploader.tsx @@ -67,7 +67,7 @@ const BootstrapPackageUploader = ({

- +

{message}

{additionalInfo}

); diff --git a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaListItem/EulaListItem.tsx b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaListItem/EulaListItem.tsx index 2cd66a4ce7..d63a89a394 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaListItem/EulaListItem.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaListItem/EulaListItem.tsx @@ -6,6 +6,7 @@ import { IEulaMetadataResponse } from "services/entities/mdm"; import Icon from "components/Icon"; import Button from "components/buttons/Button"; +import Graphic from "components/Graphic"; const baseClass = "eula-list-item"; @@ -22,7 +23,7 @@ const EulaListItem = ({ eulaData, onDelete }: IEulaListItemProps) => { return (
- +
{eulaData.name} diff --git a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaUploader/EulaUploader.tsx b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaUploader/EulaUploader.tsx index a76249a795..28b22e9af7 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaUploader/EulaUploader.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EulaSection/components/EulaUploader/EulaUploader.tsx @@ -62,7 +62,7 @@ const EulaUploader = ({ onUpload }: IEulaUploaderProps) => { />

{ const emptyState = () => { const emptyIntegrations: IEmptyTableProps = { - iconName: "empty-integrations", + graphicName: "empty-integrations", header: "Set up integrations", info: "Create tickets automatically when Fleet detects new software vulnerabilities or hosts failing policies.", @@ -422,7 +422,7 @@ const Integrations = (): JSX.Element => { resultsTitle={"integrations"} emptyComponent={() => EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, additionalInfo: emptyState().additionalInfo, diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MacOSMdmCard/MacOSMdmCard.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MacOSMdmCard/MacOSMdmCard.tsx index cbab69ba7c..cd35e3f489 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MacOSMdmCard/MacOSMdmCard.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MacOSMdmCard/MacOSMdmCard.tsx @@ -41,7 +41,7 @@ const SeeDetailsMacOSMdm = ({ onClickDetails }: ITurnOffMacOSMdmProps) => {
); diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx index d92b1768d9..ab4e7f9931 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx @@ -374,13 +374,13 @@ const MembersPage = ({ location, router }: IMembersPageProps): JSX.Element => { const emptyState = () => { const emptyMembers: IEmptyTableProps = { - iconName: "empty-members", + graphicName: "empty-members", header: "This team doesn't have any members yet.", info: "Expecting to see new team members listed here? Try again in a few seconds as the system catches up.", }; if (searchString !== "") { - delete emptyMembers.iconName; + delete emptyMembers.graphicName; emptyMembers.header = "We couldn’t find any members."; emptyMembers.info = "Expecting to see members? Try again in a few seconds as the system catches up."; @@ -449,7 +449,7 @@ const MembersPage = ({ location, router }: IMembersPageProps): JSX.Element => { inputPlaceHolder={"Search"} emptyComponent={() => EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, primaryButton: emptyState().primaryButton, diff --git a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx index 373ffa523f..712fb6808a 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx @@ -219,7 +219,7 @@ const TeamManagementPage = (): JSX.Element => { const emptyState = () => { const emptyTeams: IEmptyTableProps = { - iconName: "empty-teams", + graphicName: "empty-teams", header: "Set up team permissions", info: "Keep your organization organized and efficient by ensuring every user has the correct access to the right hosts.", @@ -287,7 +287,7 @@ const TeamManagementPage = (): JSX.Element => { resultsTitle={"teams"} emptyComponent={() => EmptyTable({ - iconName: "empty-teams", + graphicName: "empty-teams", header: emptyState().header, info: emptyState().info, additionalInfo: emptyState().additionalInfo, diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 070ab3c533..93f0006325 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -1357,13 +1357,13 @@ const ManageHostsPage = ({ if (maybeEmptyHosts) { const emptyState = () => { const emptyHosts: IEmptyTableProps = { - iconName: "empty-hosts", + graphicName: "empty-hosts", header: "Devices will show up here once they’re added to Fleet.", info: "Expecting to see devices? Try again in a few seconds as the system catches up.", }; if (includesFilterQueryParam) { - delete emptyHosts.iconName; + delete emptyHosts.graphicName; emptyHosts.header = "No hosts match the current criteria"; emptyHosts.info = "Expecting to see new hosts? Try again in a few seconds as the system catches up."; @@ -1382,7 +1382,7 @@ const ManageHostsPage = ({ return ( <> {EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, additionalInfo: emptyState().additionalInfo, diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomDropdownIndicator/CustomDropdownIndicator.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomDropdownIndicator/CustomDropdownIndicator.tsx index f3005d42cb..3b5bc85c0d 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/CustomDropdownIndicator/CustomDropdownIndicator.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/CustomDropdownIndicator/CustomDropdownIndicator.tsx @@ -21,7 +21,11 @@ const CustomDropdownIndicator = ( return ( - + ); }; diff --git a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tests.tsx b/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tests.tsx index a18cc06663..d13dd566fa 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tests.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tests.tsx @@ -52,7 +52,9 @@ describe("Filter Pill Component", () => { ); - await user.click(within(screen.getByRole("button")).getByTestId("ex-icon")); + await user.click( + within(screen.getByRole("button")).getByTestId("close-icon") + ); expect(spy).toHaveBeenCalled(); }); diff --git a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx b/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx index df99faa793..184990acc4 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx @@ -64,7 +64,7 @@ const FilterPill = ({ variant={"small-text-icon"} title={label} > - +
diff --git a/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingStatusCell/MacSettingStatusCell.tsx b/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingStatusCell/MacSettingStatusCell.tsx index 0b46153c25..817796209e 100644 --- a/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingStatusCell/MacSettingStatusCell.tsx +++ b/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingStatusCell/MacSettingStatusCell.tsx @@ -41,7 +41,7 @@ const PROFILE_DISPLAY_CONFIG: ProfileDisplayConfig = { install: { pending: { statusText: "Enforcing (pending)", - iconName: "pending-partial", + iconName: "pending-outline", tooltip: (innerProps) => innerProps.isDiskEncryptionProfile ? "The hosts will receive the MDM command to turn on disk encryption " + @@ -51,7 +51,7 @@ const PROFILE_DISPLAY_CONFIG: ProfileDisplayConfig = { }, action_required: { statusText: "Action required (pending)", - iconName: "pending-partial", + iconName: "pending-outline", tooltip: TooltipInnerContentActionRequired as TooltipInnerContentFunc, }, verified: { @@ -65,7 +65,7 @@ const PROFILE_DISPLAY_CONFIG: ProfileDisplayConfig = { }, verifying: { statusText: "Verifying", - iconName: "success-partial", + iconName: "success-outline", tooltip: (innerProps) => innerProps.isDiskEncryptionProfile ? "The host acknowledged the MDM command to turn on disk encryption. " + @@ -83,7 +83,7 @@ const PROFILE_DISPLAY_CONFIG: ProfileDisplayConfig = { remove: { pending: { statusText: "Removing enforcement (pending)", - iconName: "pending-partial", + iconName: "pending-outline", tooltip: (innerProps) => innerProps.isDiskEncryptionProfile ? "The host will receive the MDM command to remove the disk encryption profile when the " + @@ -116,14 +116,14 @@ const WINDOWS_DISK_ENCRYPTION_DISPLAY_CONFIG: WindowsDiskEncryptionDisplayConfig }, verifying: { statusText: "Verifying", - iconName: "success-partial", + iconName: "success-outline", tooltip: () => "The host acknowledged the MDM command to turn on disk encryption. Fleet is verifying with osquery and retrieving " + "the disk encryption key. This may take up to one hour.", }, pending: { statusText: "Enforcing (pending)", - iconName: "pending-partial", + iconName: "pending-outline", tooltip: () => "The host will receive the MDM command to turn on disk encryption when the host comes online.", }, diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx index 926ad3acd3..facb66e8f6 100644 --- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx +++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx @@ -127,7 +127,7 @@ const HostSummary = ({ data-for="host-issue-count" data-tip-disable={false} > - + ; tooltipText: string; } @@ -34,13 +34,13 @@ const STATUS_DISPLAY_OPTIONS: StatusDisplayOptions = { "The host applied all OS settings. Fleet verified with osquery.", }, Verifying: { - iconName: "success-partial", + iconName: "success-outline", tooltipText: "The host acknowledged all MDM commands to apply OS settings. " + "Fleet is verifying the OS settings are applied with osquery.", }, Pending: { - iconName: "pending-partial", + iconName: "pending-outline", tooltipText: "The host will receive MDM command to apply OS settings when the host comes online.", }, diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx index 24a184a0d1..c69592edfe 100644 --- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx +++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx @@ -21,7 +21,7 @@ const PolicyFailingCount = ({ return failCount ? (
- + This device is failing {failCount === 1 ? " 1 policy" : ` ${failCount} policies`}
diff --git a/frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/SoftwareVulnCount.tsx b/frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/SoftwareVulnCount.tsx index 83dd3936d2..0fdace872b 100644 --- a/frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/SoftwareVulnCount.tsx +++ b/frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/SoftwareVulnCount.tsx @@ -21,7 +21,7 @@ const SoftwareVulnCount = ({ return vulnCount ? (
- + {vulnCount === 1 ? "1 software item with vulnerabilities detected" : `${vulnCount} software items with vulnerabilities detected`} diff --git a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx index a15d804718..080d7bd4f1 100644 --- a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx +++ b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx @@ -58,7 +58,7 @@ const PacksTable = ({ // TODO: useCallback search string const emptyState = () => { const emptyPacks: IEmptyTableProps = { - iconName: "empty-packs", + graphicName: "empty-packs", header: "You don't have any packs", info: "Query packs allow you to schedule recurring queries for your hosts.", @@ -73,7 +73,7 @@ const PacksTable = ({ ), }; if (searchString) { - delete emptyPacks.iconName; + delete emptyPacks.graphicName; emptyPacks.header = "No packs match the current search criteria."; emptyPacks.info = "Expecting to see packs? Try again in a few seconds as the system catches up."; @@ -125,7 +125,7 @@ const PacksTable = ({ secondarySelectActions={secondarySelectActions} emptyComponent={() => EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, primaryButton: emptyState().primaryButton, diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx index 83d1f30fda..abbfa69540 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx @@ -75,7 +75,7 @@ const PoliciesTable = ({ const emptyState = () => { const emptyPolicies: IEmptyTableProps = { - iconName: "empty-policies", + graphicName: "empty-policies", header: ( <> Ask yes or no questions about{" "} @@ -119,7 +119,7 @@ const PoliciesTable = ({ ); } if (searchQuery) { - delete emptyPolicies.iconName; + delete emptyPolicies.graphicName; delete emptyPolicies.primaryButton; emptyPolicies.header = "No policies match the current search criteria."; emptyPolicies.info = @@ -169,7 +169,7 @@ const PoliciesTable = ({ }} emptyComponent={() => EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, additionalInfo: emptyState().additionalInfo, diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx index 2d3abf32bc..e13becb62d 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx @@ -130,7 +130,9 @@ const generateTableHeaders = ( > { const emptyQueries: IEmptyTableProps = { - iconName: "empty-queries", + graphicName: "empty-queries", header: "You don't have any queries", info: "A query is a specific question you can ask about your devices.", }; if (searchQuery) { - delete emptyQueries.iconName; + delete emptyQueries.graphicName; emptyQueries.header = "No queries match the current search criteria."; emptyQueries.info = "Expecting to see queries? Try again in a few seconds as the system catches up."; @@ -306,7 +306,7 @@ const QueriesTable = ({ onQueryChange={onQueryChange} emptyComponent={() => EmptyTable({ - iconName: emptyState().iconName, + graphicName: emptyState().graphicName, header: emptyState().header, info: emptyState().info, additionalInfo: emptyState().additionalInfo, diff --git a/frontend/pages/queries/details/components/NoResults/NoResults.tsx b/frontend/pages/queries/details/components/NoResults/NoResults.tsx index 3292d2894f..3b46b6840c 100644 --- a/frontend/pages/queries/details/components/NoResults/NoResults.tsx +++ b/frontend/pages/queries/details/components/NoResults/NoResults.tsx @@ -56,7 +56,7 @@ const NoResults = ({ return ( @@ -126,7 +126,7 @@ const NoResults = ({ return ( diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx index 53fcb8da96..32516465e5 100644 --- a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx +++ b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx @@ -114,7 +114,7 @@ const QueryReport = ({ return (

You can reset this report by updating the query's SQL, or by temporarily enabling the discard data setting and disabling it again.`} @@ -142,7 +142,7 @@ const QueryReport = ({ return ( diff --git a/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx b/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx index 64d17d07d1..6cfa573679 100644 --- a/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx +++ b/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx @@ -51,12 +51,7 @@ const DiscardDataOption = ({ > <> Edit anyway - + diff --git a/frontend/pages/software/components/EmptySoftwareTable.tsx b/frontend/pages/software/components/EmptySoftwareTable.tsx index 98248fff37..8caf3b8bc2 100644 --- a/frontend/pages/software/components/EmptySoftwareTable.tsx +++ b/frontend/pages/software/components/EmptySoftwareTable.tsx @@ -64,7 +64,7 @@ const EmptySoftwareTable = ({ return (