diff --git a/changes/1832-app-settings-ui b/changes/1832-app-settings-ui
new file mode 100644
index 0000000000..70e3b1a436
--- /dev/null
+++ b/changes/1832-app-settings-ui
@@ -0,0 +1 @@
+Cleaner advanced options UI
\ No newline at end of file
diff --git a/cypress/integration/all/app/settingsflow.spec.ts b/cypress/integration/all/app/settingsflow.spec.ts
index 59d25106c1..7d7a68026c 100644
--- a/cypress/integration/all/app/settingsflow.spec.ts
+++ b/cypress/integration/all/app/settingsflow.spec.ts
@@ -66,8 +66,6 @@ describe("Settings flow", () => {
.click()
.type("rachelspassword");
- cy.get("#advanced-options").click();
-
cy.findByLabelText(/domain/i)
.click()
.type("http://www.fleetdm.com");
@@ -75,12 +73,16 @@ describe("Settings flow", () => {
// can't grab button from the label because the button is a child element and doesn't have a for attribute
// couldn't figure out how to write a for attribute on kolide button
// Repeated Error Message: Timed out retrying after 4000ms: Found a label with the text of: /verify ssl certs/i, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
- cy.get(".kolide-slider__dot").click({ multiple: true });
+ cy.findByLabelText(/verify ssl certs/i).check({ force: true });
+ cy.findByLabelText(/enable starttls/i).check({ force: true });
+ cy.findByLabelText(/^host expiry$/i).check({ force: true });
cy.findByLabelText(/host expiry window/i)
.click()
.type("{selectall}{backspace}5");
+ cy.findByLabelText(/disable live queries/i).check({ force: true });
+
// Update settings
cy.findByRole("button", { name: /update settings/i }).click();
@@ -133,8 +135,6 @@ describe("Settings flow", () => {
"rachelsusername"
);
- cy.get("#advanced-options").click();
-
cy.findByLabelText(/host expiry window/i).should("have.value", "5");
cy.getEmails().then((response) => {
diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
index 83c6c7e7e7..5c1d197e28 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
@@ -60,25 +60,6 @@ const formFields = [
"agent_options",
"enable_analytics",
];
-const Header = ({ showAdvancedOptions }) => {
- const CaratIcon = (
-
- );
-
- return (
-
- Advanced Options {CaratIcon}{" "}
- Most users do not need to modify these options.
-
- );
-};
-
-Header.propTypes = { showAdvancedOptions: PropTypes.bool.isRequired };
-
class AppConfigForm extends Component {
static propTypes = {
fields: PropTypes.shape({
@@ -120,21 +101,10 @@ class AppConfigForm extends Component {
super(props);
this.state = {
- showAdvancedOptions: false,
showUsageStatsPreviewModal: false,
};
}
- onToggleAdvancedOptions = (evt) => {
- evt.preventDefault();
-
- const { showAdvancedOptions } = this.state;
-
- this.setState({ showAdvancedOptions: !showAdvancedOptions });
-
- return false;
- };
-
toggleUsageStatsPreviewModal = () => {
const { showUsageStatsPreviewModal } = this.state;
this.setState({
@@ -144,29 +114,26 @@ class AppConfigForm extends Component {
renderAdvancedOptions = () => {
const { fields } = this.props;
- const { showAdvancedOptions } = this.state;
-
- if (!showAdvancedOptions) {
- return false;
- }
return (
+
+ Most users do not need to modify these options.
+
-
-
-
+ Verify SSL certs
+ Enable STARTTLS
+ Host expiry
-
+
+ Disable live queries
+
@@ -248,13 +215,11 @@ class AppConfigForm extends Component {
render() {
const { fields, handleSubmit, smtpConfigured, enrollSecret } = this.props;
const {
- onToggleAdvancedOptions,
renderAdvancedOptions,
renderSmtpSection,
toggleUsageStatsPreviewModal,
renderUsageStatsPreviewModal,
} = this;
- const { showAdvancedOptions } = this.state;
return (
<>
@@ -554,15 +519,7 @@ class AppConfigForm extends Component {
-
+
Advanced options
{renderAdvancedOptions()}