Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Add sticky side nav to org settings (#433)

Browse Source 
* add stick side nav to org settings and fixes to sticky nav on other settings pages

* remove unused html

* remove unused href attr

* remove unneeded react fragment
This commit is contained in:
Gabe Hernandez
2021-03-10 17:28:58 +00:00
committed by GitHub
parent 677ecf9eaf
commit a0ebc2bdf3
10 changed files with 100 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/AuthenticatedAdminRoutes/AuthenticatedAdminRoutes.jsx
+2 -2
View File
@@ -32,9 +32,9 @@ export class AuthenticatedAdminRoutes extends Component {
}
return (
<div>
<>
{children}
</div>
</>
);
}
}
frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+8 -6
View File
@@ -158,7 +158,7 @@ class AppConfigForm extends Component {
return (
<form className={baseClass} onSubmit={handleSubmit}>
<div className={`${baseClass}__section`}>
<h2>Organization Info</h2>
<h2><a id="organization-info">Organization Info</a></h2>
<div className={`${baseClass}__inputs`}>
<InputField
{...fields.org_name}
@@ -174,7 +174,7 @@ class AppConfigForm extends Component {
</div>
</div>
<div className={`${baseClass}__section`}>
<h2>Fleet web address</h2>
<h2><a id="fleet-web-address">Fleet web address</a></h2>
<div className={`${baseClass}__inputs`}>
<InputField
{...fields.kolide_server_url}
@@ -188,7 +188,7 @@ class AppConfigForm extends Component {
</div>
<div className={`${baseClass}__section`}>
<h2>SAML Single Sign On Options</h2>
<h2><a id="saml">SAML Single Sign On Options</a></h2>
<div className={`${baseClass}__inputs`}>
<Checkbox
@@ -264,7 +264,9 @@ class AppConfigForm extends Component {
</div>
<div className={`${baseClass}__section`}>
<h2>SMTP Options <small className={`smtp-options smtp-options--${smtpConfigured ? 'configured' : 'notconfigured'}`}>STATUS: <em>{smtpConfigured ? 'CONFIGURED' : 'NOT CONFIGURED'}</em></small></h2>
<h2>
<a id="smtp">SMTP Options <small className={`smtp-options smtp-options--${smtpConfigured ? 'configured' : 'notconfigured'}`}>STATUS: <em>{smtpConfigured ? 'CONFIGURED' : 'NOT CONFIGURED'}</em></small></a>
</h2>
<div className={`${baseClass}__inputs`}>
<Checkbox
{...fields.enable_smtp}
@@ -316,7 +318,7 @@ class AppConfigForm extends Component {
</div>
</div>
<div className={`${baseClass}__section`}>
<h2>Osquery Enrollment Secrets</h2>
<h2><a id="osquery-enrollment-secrets">Osquery Enrollment Secrets</a></h2>
<div className={`${baseClass}__inputs`}>
<p className={`${baseClass}__enroll-secret-label`}>
Manage secrets with <code>fleetctl</code>. Active secrets:
@@ -325,7 +327,7 @@ class AppConfigForm extends Component {
</div>
</div>
<div className={`${baseClass}__section`}>
<h2><a href="#advancedOptions" onClick={onToggleAdvancedOptions} className={`${baseClass}__show-options`}><Header showAdvancedOptions={showAdvancedOptions} /></a></h2>
<h2><a id="advanced-options" onClick={onToggleAdvancedOptions} className={`${baseClass}__show-options`}><Header showAdvancedOptions={showAdvancedOptions} /></a></h2>
{renderAdvancedOptions()}
</div>
<Button
frontend/components/forms/admin/AppConfigForm/_styles.scss
+8
View File
@@ -1,4 +1,5 @@
.app-config-form {
&__enroll-secret-label {
font-size: 15px;
@@ -32,6 +33,13 @@
@include clearfix;
margin: 0 0 30px;
h2 {
a {
color: $black;
scroll-margin-top: 210px; // used to push down anchor to visible area when there are sticky headers
}
}
.smtp-options {
font-size: 15px;
font-weight: $bold;
frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
+19 -7
View File
@@ -55,13 +55,25 @@ class AppSettingsPage extends Component {
return (
<div className={`${baseClass} body-wrap`}>
<p className={`${baseClass}__page-description`}>Set your organization information, Configure SAML and SMTP, and view host enroll secrets.</p>
<AppConfigForm
formData={formData}
handleSubmit={onFormSubmit}
serverErrors={error}
smtpConfigured={smtpConfigured}
enrollSecret={enrollSecret}
/>
<div className={`${baseClass}__settings-form`}>
<nav>
<ul className={`${baseClass}__form-nav-list`}>
<li><a href="#organization-info">Organization info</a></li>
<li><a href="#fleet-web-address">Fleet web address</a></li>
<li><a href="#saml">SAML single sign on options</a></li>
<li><a href="#smtp">SMTP options</a></li>
<li><a href="#osquery-enrollment-secrets">Osquery enrollment secrets</a></li>
<li><a href="#advanced-options">Advanced options</a></li>
</ul>
</nav>
<AppConfigForm
formData={formData}
handleSubmit={onFormSubmit}
serverErrors={error}
smtpConfigured={smtpConfigured}
enrollSecret={enrollSecret}
/>
</div>
</div>
);
}
frontend/pages/admin/AppSettingsPage/_styles.scss
+28 -1
View File
@@ -4,7 +4,7 @@
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
margin: 40px 0 54px 0;
@include sticky-settings-description;
}
h2 {
@@ -31,4 +31,31 @@
color: $core-dark-blue-grey;
}
}
&__settings-form {
display: flex;
}
&__form-nav-list {
position: sticky;
// this is the spacing needed to make the sticky form nav position correctly when scrolling
// TODO: find a way to calculate these sticky positions this and use variables.
// will be tedious to update otherwise.
top: 207px;
width: 178px;
margin: 0;
padding: 0 110px 0 0;
list-style: none;
font-size: $x-small;
li {
margin-bottom: 16px;
}
a {
color: $black;
text-decoration: none;
}
}
}
frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx
+18 -20
View File
@@ -63,26 +63,24 @@ export class OsqueryOptionsPage extends Component {
const { onSaveOsqueryOptionsFormSubmit } = this;
return (
<div className={`${baseClass}__page-wrap`}>
<div className={`${baseClass} body-wrap`}>
<p className={`${baseClass}__page-description`}>This file describes options returned to osquery when it checks for configuration.</p>
<div className={`${baseClass}__info-banner`}>
<p>See Fleet documentation for an example file that includes the overrides option.</p>
<a
href="https://github.com/fleetdm/fleet/blob/master/docs/1-Using-Fleet/2-fleetctl-CLI.md#osquery-configuration-options"
target="_blank"
rel="noreferrer"
>
Go to Fleet docs
<img src={OpenNewTabIcon} alt="open new tab" />
</a>
</div>
<div className={`${baseClass}__form-wrapper`}>
<OsqueryOptionsForm
formData={formData}
handleSubmit={onSaveOsqueryOptionsFormSubmit}
/>
</div>
<div className={`${baseClass} body-wrap`}>
<p className={`${baseClass}__page-description`}>This file describes options returned to osquery when it checks for configuration.</p>
<div className={`${baseClass}__info-banner`}>
<p>See Fleet documentation for an example file that includes the overrides option.</p>
<a
href="https://github.com/fleetdm/fleet/blob/master/docs/1-Using-Fleet/2-fleetctl-CLI.md#osquery-configuration-options"
target="_blank"
rel="noreferrer"
>
Go to Fleet docs
<img src={OpenNewTabIcon} alt="open new tab" />
</a>
</div>
<div className={`${baseClass}__form-wrapper`}>
<OsqueryOptionsForm
formData={formData}
handleSubmit={onSaveOsqueryOptionsFormSubmit}
/>
</div>
</div>
);
frontend/pages/admin/OsqueryOptionsPage/_styles.scss
+2 -1
View File
@@ -10,7 +10,8 @@
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
margin: 40px 0 16px 0;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
&__info-banner {
frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+1 -3
View File
@@ -299,9 +299,7 @@ export class UserManagementPage extends Component {
return (
<div className={`${baseClass} body-wrap`}>
<div className={`${baseClass}__heading-wrapper`}>
<p className={`${baseClass}__page-description`}>Invite new users, customize user permissions, and disable users in Fleet.</p>
</div>
<p className={`${baseClass}__page-description`}>Invite new users, customize user permissions, and disable users in Fleet.</p>
{renderSmtpWarning()}
<div className={`${baseClass}__add-user-wrap`}>
<p className={`${baseClass}__user-count`}>{resourcesCount} users</p>
frontend/pages/admin/UserManagementPage/_styles.scss
+2 -3
View File
@@ -1,11 +1,11 @@
.user-management {
min-height: 90vh;
padding: 30px;
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
margin: 40px 0 20px 0;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
&__wrapper {
@@ -61,7 +61,6 @@
&__heading-wrapper {
width: 100%;
margin-bottom: 10px;
}
&__smtp-warning-wrapper {
frontend/styles/var/mixins.scss
+12
View File
@@ -24,3 +24,15 @@ $max-width: 2560px;
@content;
}
}
// Used to keep the settings description sticky under the main nav and sub nav.
// TODO: figure out how to calculate these values with variables. Will be tedious to change otherwise
@mixin sticky-settings-description {
position: sticky;
// this is the current spacing needed to keep the description looking correct under the sub nav when scrolling.
top: 97px;
z-index: 2;
background-color: $white;
margin: 0;
padding: 40px 0 54px 0;
}