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

Host Details Page: Relocate host details page header and buttons (#2447)

Browse source
This commit is contained in:
RachelElysia 2021-10-11 14:59:43 -04:00 committed by GitHub
parent 2000b1b263
commit ded8feea56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changes/issue-2240-host-details-move-action-buttons Normal file
View file

@ -0,0 +1 @@
* Host details page UI cleaner with action buttons outside details table

4
cypress/integration/free/maintainer.spec.ts
View file

@ -22,7 +22,7 @@ describe(
cy.visit("/hosts/manage");
// Ensure page is loaded
// cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.contains("All hosts");
// Settings restrictions
@ -32,6 +32,8 @@ describe(
// Host manage page: No team UI, can add host and label
cy.visit("/hosts/manage");
cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.findByText(/teams/i).should("not.exist");
cy.contains("button", /add new host/i).click();
cy.findByText("select a team").should("not.exist");

8
cypress/integration/premium/maintainer.spec.ts
View file

@ -27,7 +27,7 @@ describe(
// Host manage page: Teams column, select a team
cy.visit("/hosts/manage");
cy.wait(10000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.findByText(/show enroll secret/i).should("exist");
@ -40,9 +40,9 @@ describe(
// Test host text varies
cy.findByRole("button").click();
});
cy.get(".title").within(() => {
cy.findByText("Team").should("exist");
});
cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.findByText("Team").should("exist");
cy.contains("button", /transfer/i).click();
cy.get(".Select-control").click();
cy.findByText(/create a team/i).should("not.exist");

6
cypress/integration/premium/observer.spec.ts
View file

@ -30,9 +30,9 @@ describe("Premium tier - Observer user", () => {
// Test host text varies
cy.findByRole("button").click();
});
cy.get(".title").within(() => {
cy.findByText("Team").should("exist");
});
cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.findByText("Team").should("exist");
cy.contains("button", /transfer/i).should("not.exist");
cy.contains("button", /delete/i).should("not.exist");
cy.contains("button", /query/i).click();

8
frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx
View file

@ -702,7 +702,7 @@ const HostDetailsPage = ({
<span>Back to all hosts</span>
</Link>
</div>
<div className="section title">
<div className="header title">
<div className="title__inner">
<div className="hostname-container">
<h1 className="hostname">{host?.hostname || "---"}</h1>
@ -714,6 +714,11 @@ const HostDetailsPage = ({
</p>
{renderRefetch()}
</div>
</div>
{renderActionButtons()}
</div>
<div className="section title">
<div className="title__inner">
<div className="info-flex">
<div className="info-flex__item info-flex__item--title">
<span className="info-flex__header">Status</span>
@ -743,7 +748,6 @@ const HostDetailsPage = ({
</div>
</div>
</div>
{renderActionButtons()}
</div>
<div className="section about">
<p className="section__header">About this host</p>

15
frontend/pages/hosts/HostDetailsPage/_styles.scss
View file

@ -6,7 +6,13 @@
padding-bottom: 50px;
min-width: 0;
background-color: $ui-off-white;
gap: $pad-large;
gap: $pad-medium;
.header {
flex: 100%;
display: flex;
flex-direction: column;
}
.section {
flex: 100%;
@ -140,17 +146,11 @@
.title {
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid $ui-fleet-blue-15;
margin: 0;
&__inner {
padding-bottom: $pad-medium;
}
.hostname-container {
display: flex;
align-items: flex-end;
margin-bottom: $pad-large;
}
.hostname {
@ -420,6 +420,7 @@
&__back-link {
display: flex;
align-items: center;
padding-bottom: $pad-small;
height: 16px;
font-size: $x-small;
color: $core-vibrant-blue;