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

fix label filter showing under table header and adding no custom filter state (#7998)

Browse source
This commit is contained in:
Gabriel Hernandez 2022-09-28 15:12:37 +01:00 committed by GitHub
parent a106e1af83
commit 7147859de1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changes/issue-7917-fix-z-index-and-add-no-custom-labels-state Normal file
View file

@ -0,0 +1 @@
- This fixes the UI bug where the label filter dropdown goes under the table header and add a "no custom labels" state that shows when the user has not created any custom labels yet.

5
frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
View file

@ -1,3 +1,8 @@
/**
* This component is a custom UI for a React Select group header.
* More can be learnt about React Select custom components here:
* https://react-select.com/components
*/
import Button from "components/buttons/Button";
import { ILabel } from "interfaces/label";
import React, { useRef } from "react";

1
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
View file

@ -58,6 +58,7 @@
.label-filter-select__menu {
width: 300px;
margin-top: 0;
z-index: 2;
}
.label-filter-select__menu-list {

7
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts
View file

@ -2,8 +2,13 @@ import linuxIcon from "../../../../../../assets/images/icon-linux-fleet-black-16
import darwinIcon from "../../../../../../assets/images/icon-darwin-fleet-black-16x16@2x.png";
import windowsIcon from "../../../../../../assets/images/icon-windows-fleet-black-16x16@2x.png";
export const NO_LABELS_OPTION = {
label: "No custom labels",
isDisabled: true,
};
export const EMPTY_OPTION = {
label: "No Matching Labels",
label: "No matching labels",
isDisabled: true,
};

35
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
View file

@ -1,5 +1,5 @@
import { ILabel } from "interfaces/label";
import { EMPTY_OPTION, FILTERED_LINUX } from "./constants";
import { EMPTY_OPTION, FILTERED_LINUX, NO_LABELS_OPTION } from "./constants";
export interface IEmptyOption {
label: string;
@ -24,7 +24,26 @@ const createOptionGroup = (
};
};
export const createDropdownOptions = (labels: ILabel[], labelQuery: string) => {
/** Will create the custom label group options and handles when no labels have been created yet or
* will filter by the desired search query */
const createCustomLabelOptions = (labels: ILabel[], query: string) => {
const customLabels = labels.filter((label) => label.label_type === "regular");
let customLabelGroupOptions: ILabel[] | IEmptyOption[];
if (customLabels.length === 0) {
customLabelGroupOptions = [NO_LABELS_OPTION];
} else {
const matchingLabels = customLabels.filter((label) =>
label.display_text.toLowerCase().includes(query)
);
customLabelGroupOptions =
matchingLabels.length !== 0 ? matchingLabels : [EMPTY_OPTION];
}
return customLabelGroupOptions;
};
export const createDropdownOptions = (labels: ILabel[], query: string) => {
const builtInLabels = labels.filter(
// we filter out All Hosts as that is included in hosts status dropdown filter
(label) =>
@ -32,16 +51,12 @@ export const createDropdownOptions = (labels: ILabel[], labelQuery: string) => {
label.name !== "All Hosts" &&
!FILTERED_LINUX.includes(label.name)
);
const customLabels = labels.filter(
(label) =>
label.label_type === "regular" &&
label.display_text.toLowerCase().includes(labelQuery)
);
const customGroupOptions =
customLabels.length !== 0 ? customLabels : [EMPTY_OPTION];
const customLabels = createCustomLabelOptions(labels, query);
const options: IGroupOption[] = [
createOptionGroup("platform", "Platforms", builtInLabels),
createOptionGroup("custom", "Labels", customGroupOptions),
createOptionGroup("custom", "Labels", customLabels),
];
return options;
};