diff --git a/changes/issue-5315-consistent-empty-states b/changes/issue-5315-consistent-empty-states new file mode 100644 index 0000000000..f8c4cead48 --- /dev/null +++ b/changes/issue-5315-consistent-empty-states @@ -0,0 +1 @@ +* Fix policies empty state to match other empty states, fix link styling \ No newline at end of file diff --git a/cypress/integration/all/app/policiesflow.spec.ts b/cypress/integration/all/app/policiesflow.spec.ts index 6d4fa456fe..ad17a5b27b 100644 --- a/cypress/integration/all/app/policiesflow.spec.ts +++ b/cypress/integration/all/app/policiesflow.spec.ts @@ -15,9 +15,11 @@ describe("Policies flow (empty)", () => { cy.visit("/policies/manage"); }); it("creates a custom policy", () => { - cy.getAttached(".manage-policies-page__header-wrap").within(() => { - cy.findByText(/add a policy/i).click(); - }); + cy.getAttached(".policies-list-wrapper__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 }) diff --git a/cypress/integration/premium/admin.spec.ts b/cypress/integration/premium/admin.spec.ts index 3e513174d0..ce12ab873b 100644 --- a/cypress/integration/premium/admin.spec.ts +++ b/cypress/integration/premium/admin.spec.ts @@ -537,7 +537,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(".button-wrap") + cy.getAttached(".policies-list-wrapper__action-button-container") .findByRole("button", { name: /add a policy/i }) .click(); // Add a default policy diff --git a/cypress/integration/premium/maintainer.spec.ts b/cypress/integration/premium/maintainer.spec.ts index d801a75009..572add8790 100644 --- a/cypress/integration/premium/maintainer.spec.ts +++ b/cypress/integration/premium/maintainer.spec.ts @@ -230,8 +230,8 @@ describe("Premium tier - Maintainer user", () => { cy.findByText(/manage hosts/i).should("not.exist"); }); it("allows global maintainer to add a new policy", () => { - cy.getAttached(".button-wrap") - .findByRole("button", { name: /add a polic/i }) + cy.getAttached(".policies-list-wrapper__action-button-container") + .findByRole("button", { name: /add a policy/i }) .click(); // Add a default policy cy.findByText(/gatekeeper enabled/i).click(); diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx index 4e6509fd73..f1959eefa7 100644 --- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx @@ -328,6 +328,9 @@ const ManagePolicyPage = ({ } }, [availableTeams]); + const showCtaButtons = + (!!teamId && teamPolicies) || (!teamId && globalPolicies); + return !availableTeams ? ( ) : ( @@ -356,30 +359,32 @@ const ManagePolicyPage = ({ -
- {canManageAutomations && - !isLoadingWebhooks && - !isLoadingGlobalPolicies && ( - + {showCtaButtons && ( +
+ {canManageAutomations && + !isLoadingWebhooks && + !isLoadingGlobalPolicies && ( + + )} + {canAddOrRemovePolicy && ( +
+ +
)} - {canAddOrRemovePolicy && ( -
- -
- )} -
+
+ )}
{showTeamDescription ? ( @@ -404,6 +409,7 @@ const ManagePolicyPage = ({ void; onRemovePoliciesClick: (selectedTableIds: number[]) => void; resultsTitle?: string; canAddOrRemovePolicy?: boolean; @@ -33,6 +36,7 @@ interface IPoliciesListWrapperProps { const PoliciesListWrapper = ({ policiesList, isLoading, + onAddPolicyClick, onRemovePoliciesClick, resultsTitle, canAddOrRemovePolicy, @@ -85,6 +89,17 @@ const PoliciesListWrapper = ({ changes.

+ {canAddOrRemovePolicy && ( +
+ +
+ )} diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss index 1def35d281..56bb1b36ae 100644 --- a/frontend/pages/queries/ManageQueriesPage/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss @@ -1,4 +1,16 @@ .manage-queries-page { + a { + font-size: $x-small; + color: $core-vibrant-blue; + font-weight: $bold; + text-decoration: none; + + img { + transform: scale(0.5); + vertical-align: bottom; + } + } + &__header-wrap { height: 38px; display: flex; @@ -246,11 +258,6 @@ margin-bottom: $pad-medium; } - img { - width: 176px; - margin-right: $pad-xlarge; - } - p { color: $core-fleet-black; font-weight: $regular; diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx index 8b38ec58ed..907c87ed0d 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx @@ -9,6 +9,8 @@ import Button from "components/buttons/Button"; import TableContainer from "components/TableContainer"; import generateTableHeaders from "./QueriesTableConfig"; +import OpenNewTabIcon from "../../../../../../assets/images/open-new-tab-12x12@2x.png"; + const baseClass = "queries-list-wrapper"; const noQueriesClass = "no-queries"; interface IQueryTableData extends IQuery { @@ -65,11 +67,19 @@ const QueriesListWrapper = ({ {!isOnlyObserver && ( <>

- Create a new query, or go to GitHub to{" "} - - import Fleet’s standard query library + Create a new query, or{" "} + + import Fleet’s standard query library{" "} + open new tab - .