Frontend / UI: Update naming UI button, frontend table components (#7056)

This commit is contained in:
RachelElysia 2022-08-04 12:56:30 -04:00 committed by GitHub
parent 7ad0667b6a
commit 931564f2d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 80 additions and 84 deletions

View file

@ -0,0 +1 @@
* Rename CTA button to Remove for Remove scheduled queries

View file

@ -15,11 +15,9 @@ describe("Policies flow (empty)", () => {
cy.visit("/policies/manage");
});
it("creates a custom policy", () => {
cy.getAttached(".policies-list-wrapper__action-button-container").within(
() => {
cy.findByText(/add a policy/i).click();
}
);
cy.getAttached(".policies-table__action-button-container").within(() => {
cy.findByText(/add a policy/i).click();
});
cy.findByText(/create your own policy/i).click();
cy.getAttached(".ace_scroller")
.click({ force: true })

View file

@ -17,7 +17,7 @@ describe("Query flow (empty)", () => {
cy.visit("/queries/manage");
});
it("creates a new query", () => {
cy.getAttached(".queries-list-wrapper__create-button").click();
cy.getAttached(".queries-table__create-button").click();
cy.getAttached(".ace_scroller")
.click({ force: true })
.type("{selectall}SELECT * FROM windows_crashes;");

View file

@ -547,7 +547,7 @@ describe("Premium tier - Global Admin user", () => {
describe("Manage policies page", () => {
beforeEach(() => cy.visit("/policies/manage"));
it("allows global admin to add a new policy", () => {
cy.getAttached(".policies-list-wrapper__action-button-container")
cy.getAttached(".policies-table__action-button-container")
.findByRole("button", { name: /add a policy/i })
.click();
// Add a default policy

View file

@ -234,7 +234,7 @@ describe("Premium tier - Maintainer user", () => {
cy.findByText(/manage hosts/i).should("not.exist");
});
it("allows global maintainer to add a new policy", () => {
cy.getAttached(".policies-list-wrapper__action-button-container")
cy.getAttached(".policies-table__action-button-container")
.findByRole("button", { name: /add a policy/i })
.click();
// Add a default policy

View file

@ -10,7 +10,7 @@ import { ITarget, ITargetsAPIResponse } from "interfaces/target";
import InputField from "components/forms/fields/InputField";
// @ts-ignore
import SelectTargetsDropdown from "components/forms/fields/SelectTargetsDropdown";
import PackQueriesListWrapper from "components/queries/PackQueriesListWrapper";
import PackQueriesTable from "components/queries/PackQueriesTable";
const baseClass = "edit-pack-form";
@ -128,7 +128,7 @@ const EditPackForm = ({
targetsCount={targetsCount}
isPremiumTier={isPremiumTier}
/>
<PackQueriesListWrapper
<PackQueriesTable
onAddPackQuery={onAddPackQuery}
onEditPackQuery={onEditPackQuery}
onRemovePackQueries={onRemovePackQueries}

View file

@ -1 +0,0 @@
export { default } from "./PackQueriesListWrapper";

View file

@ -12,9 +12,9 @@ import {
} from "./PackQueriesTable/PackQueriesTableConfig";
import AddQueryIcon from "../../../../assets/images/icon-plus-16x16@2x.png";
const baseClass = "pack-queries-list-wrapper";
const baseClass = "pack-queries-table";
interface IPackQueriesListWrapperProps {
interface IPackQueriesTableProps {
onAddPackQuery: () => void;
onEditPackQuery: (selectedQuery: IScheduledQuery) => void;
onRemovePackQueries: (selectedTableQueryIds: number[]) => void;
@ -22,13 +22,13 @@ interface IPackQueriesListWrapperProps {
isLoadingPackQueries: boolean;
}
const PackQueriesListWrapper = ({
const PackQueriesTable = ({
onAddPackQuery,
onEditPackQuery,
onRemovePackQueries,
scheduledQueries,
isLoadingPackQueries,
}: IPackQueriesListWrapperProps): JSX.Element => {
}: IPackQueriesTableProps): JSX.Element => {
const [querySearchText, setQuerySearchText] = useState<string>("");
// NOTE: this is called once on the initial rendering. The initial render of
@ -115,4 +115,4 @@ const PackQueriesListWrapper = ({
);
};
export default PackQueriesListWrapper;
export default PackQueriesTable;

View file

@ -1,4 +1,4 @@
.pack-queries-list-wrapper {
.pack-queries-table {
flex-grow: 1;
padding: $pad-xlarge 0;
margin-bottom: $pad-medium;

View file

@ -0,0 +1 @@
export { default } from "./PackQueriesTable";

View file

@ -14,7 +14,7 @@ import Button from "components/buttons/Button";
import TableDataError from "components/DataError";
import Spinner from "components/Spinner";
import MainContent from "components/MainContent";
import PacksListWrapper from "./components/PacksListWrapper";
import PacksTable from "./components/PacksTable";
import DeletePackModal from "./components/DeletePackModal";
const baseClass = "manage-packs-page";
@ -43,7 +43,7 @@ const renderTable = (
const isTableDataLoading = isLoadingPacks || packs === null;
return (
<PacksListWrapper
<PacksTable
onDeletePackClick={onDeletePackClick}
onEnablePackClick={onEnablePackClick}
onDisablePackClick={onDisablePackClick}

View file

@ -1 +0,0 @@
export { default } from "./PacksListWrapper";

View file

@ -7,10 +7,10 @@ import TableContainer from "components/TableContainer";
import { IActionButtonProps } from "components/TableContainer/DataTable/ActionButton";
import { generateTableHeaders, generateDataSet } from "./PacksTableConfig";
const baseClass = "packs-list-wrapper";
const baseClass = "packs-table";
const noPacksClass = "no-packs";
interface IPacksListWrapperProps {
interface IPacksTableProps {
onDeletePackClick: (selectedTablePackIds: number[]) => void;
onEnablePackClick: (selectedTablePackIds: number[]) => void;
onDisablePackClick: (selectedTablePackIds: number[]) => void;
@ -21,14 +21,14 @@ interface IPacksListWrapperProps {
isLoading: boolean;
}
const PacksListWrapper = ({
const PacksTable = ({
onDeletePackClick,
onEnablePackClick,
onDisablePackClick,
onCreatePackClick,
packs,
isLoading,
}: IPacksListWrapperProps): JSX.Element => {
}: IPacksTableProps): JSX.Element => {
const [filteredPacks, setFilteredPacks] = useState<IPack[] | undefined>(
packs
);
@ -133,4 +133,4 @@ const PacksListWrapper = ({
);
};
export default PacksListWrapper;
export default PacksTable;

View file

@ -1,4 +1,4 @@
.packs-list-wrapper {
.packs-table {
.data-table-block {
.data-table__table {
thead {

View file

@ -0,0 +1 @@
export { default } from "./PacksTable";

View file

@ -25,7 +25,7 @@ import TeamsDropdown from "components/TeamsDropdown";
import TableDataError from "components/DataError";
import MainContent from "components/MainContent";
import PoliciesListWrapper from "./components/PoliciesListWrapper";
import PoliciesTable from "./components/PoliciesTable";
import ManageAutomationsModal from "./components/ManageAutomationsModal";
import AddPolicyModal from "./components/AddPolicyModal";
import DeletePoliciesModal from "./components/DeletePoliciesModal";
@ -418,7 +418,7 @@ const ManagePolicyPage = ({
(isFetchingTeamPolicies ? (
<Spinner />
) : (
<PoliciesListWrapper
<PoliciesTable
policiesList={teamPolicies || []}
isLoading={
isFetchingTeamPolicies ||
@ -438,7 +438,7 @@ const ManagePolicyPage = ({
(isFetchingGlobalPolicies ? (
<Spinner />
) : (
<PoliciesListWrapper
<PoliciesTable
policiesList={globalPolicies || []}
isLoading={isFetchingGlobalPolicies || isFetchingConfig}
onAddPolicyClick={onAddPolicyClick}
@ -475,7 +475,7 @@ const ManagePolicyPage = ({
(isFetchingGlobalPolicies ? (
<Spinner />
) : (
<PoliciesListWrapper
<PoliciesTable
isLoading={isFetchingGlobalPolicies}
policiesList={globalPolicies || []}
onDeletePoliciesClick={noop}

View file

@ -1 +0,0 @@
export { default } from "./PoliciesListWrapper";

View file

@ -12,7 +12,7 @@ import TableContainer from "components/TableContainer";
import { generateTableHeaders, generateDataSet } from "./PoliciesTableConfig";
import policyImage from "../../../../../../assets/images/no-policy-323x138@2x.png";
const baseClass = "policies-list-wrapper";
const baseClass = "policies-table";
const noPoliciesClass = "no-policies";
const TAGGED_TEMPLATES = {
@ -21,7 +21,7 @@ const TAGGED_TEMPLATES = {
},
};
interface IPoliciesListWrapperProps {
interface IPoliciesTableProps {
policiesList: IPolicyStats[];
isLoading: boolean;
onAddPolicyClick?: () => void;
@ -33,7 +33,7 @@ interface IPoliciesListWrapperProps {
currentAutomatedPolicies?: number[];
}
const PoliciesListWrapper = ({
const PoliciesTable = ({
policiesList,
isLoading,
onAddPolicyClick,
@ -43,7 +43,7 @@ const PoliciesListWrapper = ({
tableType,
currentTeam,
currentAutomatedPolicies,
}: IPoliciesListWrapperProps): JSX.Element => {
}: IPoliciesTableProps): JSX.Element => {
const { MANAGE_HOSTS } = paths;
const { config } = useContext(AppContext);
@ -147,4 +147,4 @@ const PoliciesListWrapper = ({
);
};
export default PoliciesListWrapper;
export default PoliciesTable;

View file

@ -0,0 +1 @@
export { default } from "./PoliciesTable";

View file

@ -1 +0,0 @@
export { default } from "./PolicyQueriesErrorsListWrapper";

View file

@ -8,22 +8,22 @@ import {
generateDataSet,
} from "./PolicyQueriesErrorsTableConfig";
const baseClass = "policies-queries-list-wrapper";
const baseClass = "policies-queries-table";
const noPolicyQueries = "no-policy-queries";
interface IPoliciesListWrapperProps {
interface IPoliciesTableProps {
errorsList: ICampaignError[];
isLoading: boolean;
resultsTitle?: string;
canAddOrDeletePolicy?: boolean;
}
const PoliciesListWrapper = ({
const PoliciesTable = ({
errorsList,
isLoading,
resultsTitle,
canAddOrDeletePolicy,
}: IPoliciesListWrapperProps): JSX.Element => {
}: IPoliciesTableProps): JSX.Element => {
const NoPolicyQueries = () => {
return (
<div className={`${noPolicyQueries}__inner`}>
@ -60,4 +60,4 @@ const PoliciesListWrapper = ({
);
};
export default PoliciesListWrapper;
export default PoliciesTable;

View file

@ -1,4 +1,4 @@
.policies-queries-list-wrapper {
.policies-queries-table {
border-collapse: collapse;
a {

View file

@ -0,0 +1 @@
export { default } from "./PolicyQueriesErrorsTable";

View file

@ -1 +0,0 @@
export { default } from "./PolicyQueriesListWrapper";

View file

@ -8,22 +8,22 @@ import {
generateDataSet,
} from "./PolicyQueriesTableConfig";
const baseClass = "policies-queries-list-wrapper";
const baseClass = "policies-queries-table";
const noPolicyQueries = "no-policy-queries";
interface IPoliciesListWrapperProps {
interface IPoliciesTableProps {
policyHostsList: IHostPolicyQuery[];
isLoading: boolean;
resultsTitle?: string;
canAddOrDeletePolicy?: boolean;
}
const PoliciesListWrapper = ({
const PoliciesTable = ({
policyHostsList,
isLoading,
resultsTitle,
canAddOrDeletePolicy,
}: IPoliciesListWrapperProps): JSX.Element => {
}: IPoliciesTableProps): JSX.Element => {
const NoPolicyQueries = () => {
return (
<div className={`${noPolicyQueries}__inner`}>
@ -59,4 +59,4 @@ const PoliciesListWrapper = ({
);
};
export default PoliciesListWrapper;
export default PoliciesTable;

View file

@ -1,4 +1,4 @@
.policies-queries-list-wrapper {
.policies-queries-table {
border-collapse: collapse;
a {

View file

@ -0,0 +1 @@
export { default } from "./PolicyQueriesTable";

View file

@ -14,8 +14,8 @@ import Spinner from "components/Spinner";
import TabsWrapper from "components/TabsWrapper";
import InfoBanner from "components/InfoBanner";
import TooltipWrapper from "components/TooltipWrapper";
import PolicyQueryListWrapper from "../PolicyQueriesListWrapper/PolicyQueriesListWrapper";
import PolicyQueriesErrorsListWrapper from "../PolicyQueriesErrorsListWrapper/PolicyQueriesErrorsListWrapper";
import PolicyQueryTable from "../PolicyQueriesTable/PolicyQueriesTable";
import PolicyQueriesErrorsTable from "../PolicyQueriesErrorsTable/PolicyQueriesErrorsTable";
import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";
@ -174,7 +174,7 @@ const QueryResults = ({
</Button>
</div>
</div>
<PolicyQueryListWrapper
<PolicyQueryTable
isLoading={false}
policyHostsList={hostsOnline}
resultsTitle="hosts"
@ -204,7 +204,7 @@ const QueryResults = ({
</Button>
</div>
</div>
<PolicyQueriesErrorsListWrapper
<PolicyQueriesErrorsTable
isLoading={false}
errorsList={errors}
resultsTitle="errors"

View file

@ -24,7 +24,7 @@ import Dropdown from "components/forms/fields/Dropdown";
import Spinner from "components/Spinner";
import TableDataError from "components/DataError";
import MainContent from "components/MainContent";
import QueriesListWrapper from "./components/QueriesListWrapper";
import QueriesTable from "./components/QueriesTable";
import DeleteQueryModal from "./components/DeleteQueryModal";
const baseClass = "manage-queries-page";
@ -214,7 +214,7 @@ const ManageQueriesPage = ({
{!isTableDataLoading && fleetQueriesError ? (
<TableDataError />
) : (
<QueriesListWrapper
<QueriesTable
queriesList={queriesList}
isLoading={isTableDataLoading}
onCreateQueryClick={onCreateQueryClick}

View file

@ -1,5 +1,4 @@
.manage-queries-page {
&__header-wrap {
height: 38px;
display: flex;
@ -112,7 +111,7 @@
}
}
.queries-list-wrapper {
.queries-table {
.data-table-block {
.data-table__table {
thead {
@ -251,11 +250,11 @@
margin-bottom: $pad-large;
a {
font-size: $x-small;
color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
}
font-size: $x-small;
color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
}
}
.no-filter-results {
@ -265,8 +264,6 @@
}
}
&__inner-text {
width: 485px;
img {

View file

@ -1 +0,0 @@
export { default } from "./QueriesListWrapper";

View file

@ -11,13 +11,13 @@ import generateTableHeaders from "./QueriesTableConfig";
import OpenNewTabIcon from "../../../../../../assets/images/open-new-tab-12x12@2x.png";
const baseClass = "queries-list-wrapper";
const baseClass = "queries-table";
const noQueriesClass = "no-queries";
interface IQueryTableData extends IQuery {
performance: string;
platforms: string[];
}
interface IQueriesListWrapperProps {
interface IQueriesTableProps {
queriesList: IQueryTableData[] | null;
isLoading: boolean;
onDeleteQueryClick: (selectedTableQueryIds: number[]) => void;
@ -28,7 +28,7 @@ interface IQueriesListWrapperProps {
isOnlyObserver?: boolean;
}
const QueriesListWrapper = ({
const QueriesTable = ({
queriesList,
isLoading,
onDeleteQueryClick,
@ -37,7 +37,7 @@ const QueriesListWrapper = ({
customControl,
selectedDropdownFilter,
isOnlyObserver,
}: IQueriesListWrapperProps): JSX.Element | null => {
}: IQueriesTableProps): JSX.Element | null => {
const { currentUser } = useContext(AppContext);
const [searchString, setSearchString] = useState<string>("");
@ -139,4 +139,4 @@ const QueriesListWrapper = ({
) : null;
};
export default QueriesListWrapper;
export default QueriesTable;

View file

@ -0,0 +1 @@
export { default } from "./QueriesTable";

View file

@ -29,7 +29,7 @@ import Spinner from "components/Spinner";
import TeamsDropdown from "components/TeamsDropdown";
import TableDataError from "components/DataError";
import MainContent from "components/MainContent";
import ScheduleListWrapper from "./components/ScheduleListWrapper";
import ScheduleTable from "./components/ScheduleTable";
import ScheduleEditorModal from "./components/ScheduleEditorModal";
import RemoveScheduledQueryModal from "./components/RemoveScheduledQueryModal";
@ -55,7 +55,7 @@ const renderTable = (
return allScheduledQueriesError || errorQueries ? (
<TableDataError />
) : (
<ScheduleListWrapper
<ScheduleTable
router={router}
onRemoveScheduledQueryClick={onRemoveScheduledQueryClick}
onEditScheduledQueryClick={onEditScheduledQueryClick}
@ -82,7 +82,7 @@ const renderAllTeamsTable = (
<TableDataError />
) : (
<div className={`${baseClass}__all-teams-table`}>
<ScheduleListWrapper
<ScheduleTable
router={router}
inheritedQueries
allScheduledQueriesList={allTeamsScheduledQueriesList}

View file

@ -88,7 +88,7 @@
}
}
.schedule-list-wrapper {
.schedule-table {
.data-table-block {
.data-table__table {
thead {

View file

@ -1 +0,0 @@
export { default } from "./ScheduleListWrapper";

View file

@ -21,7 +21,7 @@ import {
} from "./ScheduleTableConfig";
import scheduleSvg from "../../../../../../assets/images/no-schedule-322x138@2x.png";
const baseClass = "schedule-list-wrapper";
const baseClass = "schedule-table";
const noScheduleClass = "no-schedule";
const TAGGED_TEMPLATES = {
@ -29,7 +29,7 @@ const TAGGED_TEMPLATES = {
return `${teamId ? `/?team_id=${teamId}` : ""}`;
},
};
interface IScheduleListWrapperProps {
interface IScheduleTableProps {
router: InjectedRouter; // v3
onRemoveScheduledQueryClick?: (selectIds: number[]) => void;
onEditScheduledQueryClick?: (selectedQuery: IEditScheduledQuery) => void;
@ -42,7 +42,7 @@ interface IScheduleListWrapperProps {
loadingTeamQueriesTableData: boolean;
}
const ScheduleListWrapper = ({
const ScheduleTable = ({
router,
onRemoveScheduledQueryClick,
allScheduledQueriesList,
@ -53,7 +53,7 @@ const ScheduleListWrapper = ({
selectedTeamData,
loadingInheritedQueriesTableData,
loadingTeamQueriesTableData,
}: IScheduleListWrapperProps): JSX.Element => {
}: IScheduleTableProps): JSX.Element => {
const { MANAGE_PACKS, MANAGE_HOSTS } = paths;
const handleAdvanced = () => router.push(MANAGE_PACKS);
@ -186,12 +186,12 @@ const ScheduleListWrapper = ({
disablePagination
onPrimarySelectActionClick={onRemoveScheduledQueryClick}
primarySelectActionButtonVariant="text-icon"
primarySelectActionButtonIcon="delete"
primarySelectActionButtonText={"Delete"}
primarySelectActionButtonIcon="remove"
primarySelectActionButtonText={"Remove"}
emptyComponent={NoScheduledQueries}
/>
</div>
);
};
export default ScheduleListWrapper;
export default ScheduleTable;

View file

@ -0,0 +1 @@
export { default } from "./ScheduleTable";