Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 00:49:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 106

Restyle button for policy filter & software filter (#2679)

Browse source
This commit is contained in:
gillespi314 2021-10-27 12:15:13 -05:00 committed by GitHub
parent 5561bd6731
commit cf0baa7ab0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
changes/issue-2638-restyle-button Normal file
View file

@ -0,0 +1,2 @@
* Restyle UI for filter-by-software and filter-by-policy buttons on manage hosts page to localize
clear filter click to "x" icon

89
frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
View file

@ -77,7 +77,7 @@ import AddHostModal from "./components/AddHostModal";
import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
import PencilIcon from "../../../../assets/images/icon-pencil-14x14@2x.png";
import TrashIcon from "../../../../assets/images/icon-trash-14x14@2x.png";
import CloseIcon from "../../../../assets/images/icon-action-close-16x15@2x.png";
import CloseIcon from "../../../../assets/images/icon-close-vibrant-blue-16x16@2x.png";
import PolicyIcon from "../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";
interface IManageHostsProps {
@ -902,27 +902,24 @@ const ManageHostsPage = ({
);
const renderPoliciesFilterBlock = () => {
const buttonText = (
<>
<img src={PolicyIcon} alt="Policy" />
{policy?.query_name}
<img src={CloseIcon} alt="Remove policy filter" />
</>
);
return (
<div className={`${baseClass}__policies-filter-block`}>
<PoliciesFilter
policyResponse={policyResponse}
onChange={handleChangePoliciesFilter}
/>
<Button
className={`${baseClass}__clear-policies-filter`}
onClick={handleClearPoliciesFilter}
variant={"small-text-icon"}
title={policy?.query_name}
>
{buttonText}
</Button>
<div className={`${baseClass}__policies-filter-name-card`}>
<img src={PolicyIcon} alt="Policy" />
{policy?.query_name}
<Button
className={`${baseClass}__clear-policies-filter`}
onClick={handleClearPoliciesFilter}
variant={"small-text-icon"}
title={policy?.query_name}
>
<img src={CloseIcon} alt="Remove policy filter" />
</Button>
</div>
</div>
);
};
@ -933,37 +930,39 @@ const ManageHostsPage = ({
const buttonText = name && version ? `${name} ${version}` : "";
return (
<div className={`${baseClass}__software-filter-block`}>
<Button
className={`${baseClass}__clear-software-filter`}
onClick={handleClearSoftwareFilter}
variant={"small-text-icon"}
title={name}
>
<span className="software-filter-button">
<span
className="software-filter-tooltip"
data-tip
data-for="software-filter-tooltip"
data-tip-disable={!name || !version}
>
<div>
<span
className="software-filter-tooltip"
data-tip
data-for="software-filter-tooltip"
data-tip-disable={!name || !version}
>
<div className={`${baseClass}__software-filter-name-card`}>
{buttonText}
<img src={CloseIcon} alt="Remove software filter" />
</span>
<ReactTooltip
place="bottom"
type="dark"
effect="solid"
backgroundColor="#3e4771"
id="software-filter-tooltip"
data-html
>
<span className={`tooltip__tooltip-text`}>
{`Hosts with ${name}`},<br />
{`${version} installed`}
</span>
</ReactTooltip>
<Button
className={`${baseClass}__clear-policies-filter`}
onClick={handleClearSoftwareFilter}
variant={"small-text-icon"}
title={buttonText}
>
<img src={CloseIcon} alt="Remove policy filter" />
</Button>
</div>
</span>
</Button>
<ReactTooltip
place="bottom"
type="dark"
effect="solid"
backgroundColor="#3e4771"
id="software-filter-tooltip"
data-html
>
<span className={`tooltip__tooltip-text`}>
{`Hosts with ${name}`},<br />
{`${version} installed`}
</span>
</ReactTooltip>
</div>
</div>
);
}

52
frontend/pages/hosts/ManageHostsPage/_styles.scss
View file

@ -172,26 +172,48 @@
}
}
&__policies-filter-name-card,
&__software-filter-name-card {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border: 1px solid $ui-fleet-black-25;
border-radius: 4px;
box-shadow: none;
margin-left: $pad-medium;
color: $core-fleet-black;
font-size: $xx-small;
font-weight: $bold;
cursor: default;
img {
width: 12px;
height: 12px;
margin-right: 6px;
}
button {
height: auto;
padding: 0px;
border: none;
margin-left: $pad-small;
img {
padding: 0px;
margin: 0px;
}
}
}
&__software-filter-name-card {
margin-left: 0px;
}
&__enroll-hosts {
padding: $pad-small;
margin-right: $pad-small;
}
&__software-filter-block {
.button--small-text-icon {
margin-left: 0;
padding-left: 12px;
}
.software-filter-button {
display: inline-flex;
align-items: center;
}
.software-filter-tooltip {
display: inline-flex;
align-items: center;
}
}
.issues__header,
.host-issue {
img {