Update Organization Settings (#5114)

* Update Organization Settings

* Cypress: Update tab naming

client/app/pages/settings/OrganizationSettings.jsx

@@ -12,6 +12,7 @@ import recordEvent from "@/services/recordEvent";
 import OrgSettings from "@/services/organizationSettings";
 import routes from "@/services/routes";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
+import { getHorizontalFormProps, getHorizontalFormItemWithoutLabelProps } from "@/styles/formStyle";
 
 import GeneralSettings from "./components/GeneralSettings";
 import AuthSettings from "./components/AuthSettings";
@@ -73,16 +74,18 @@ function OrganizationSettings({ onError }) {
 
   return (
     <div className="row" data-test="OrganizationSettings">
-      <div className="col-md-offset-4 col-md-4">
+      <div className="m-r-20 m-l-20">
         {isLoading ? (
           <LoadingState className="" />
         ) : (
-          <Form layout="vertical" onSubmit={handleSubmit}>
+          <Form {...getHorizontalFormProps()} onSubmit={handleSubmit}>
             <GeneralSettings settings={settings} values={currentValues} onChange={handleChange} />
             <AuthSettings settings={settings} values={currentValues} onChange={handleChange} />
-            <Button className="w-100" type="primary" htmlType="submit" loading={isSaving}>
-              Save
-            </Button>
+            <Form.Item {...getHorizontalFormItemWithoutLabelProps()}>
+              <Button type="primary" htmlType="submit" loading={isSaving}>
+                Save
+              </Button>
+            </Form.Item>
           </Form>
         )}
       </div>
@@ -102,8 +105,8 @@ const OrganizationSettingsPage = wrapSettingsTab(
   "Settings.Organization",
   {
     permission: "admin",
-    title: "Settings",
-    path: "settings/organization",
+    title: "General",
+    path: "settings/general",
     order: 6,
   },
   OrganizationSettings
@@ -112,8 +115,8 @@ const OrganizationSettingsPage = wrapSettingsTab(
 routes.register(
   "Settings.Organization",
   routeWithUserSession({
-    path: "/settings/organization",
-    title: "Organization Settings",
+    path: "/settings/general",
+    title: "General Settings",
     render: pageProps => <OrganizationSettingsPage {...pageProps} />,
   })
 );

client/app/pages/settings/components/AuthSettings/PasswordLoginSettings.jsx

@@ -23,7 +23,7 @@ export default function PasswordLoginSettings(props) {
           className="m-t-15 m-b-15"
         />
       )}
-      <Form.Item>
+      <Form.Item label="Password Login">
         <Checkbox
           checked={values.auth_password_login_enabled}
           disabled={isTheOnlyAuthMethod}

client/app/pages/settings/components/AuthSettings/SAMLSettings.jsx

@@ -11,7 +11,7 @@ export default function SAMLSettings(props) {
   return (
     <DynamicComponent name="OrganizationSettings.SAMLSettings" {...props}>
       <h4>SAML</h4>
-      <Form.Item>
+      <Form.Item label="SAML Enabled">
         <Checkbox
           name="auth_saml_enabled"
           checked={values.auth_saml_enabled}

client/app/pages/settings/components/GeneralSettings/FeatureFlagsSettings.jsx

@@ -4,6 +4,8 @@ import Form from "antd/lib/form";
 import DynamicComponent from "@/components/DynamicComponent";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";
 
+import { getHorizontalFormItemWithoutLabelProps } from "@/styles/formStyle";
+
 export default function FeatureFlagsSettings(props) {
   const { values, onChange } = props;
 
@@ -17,7 +19,7 @@ export default function FeatureFlagsSettings(props) {
           Enable experimental multiple owners support
         </Checkbox>
       </Form.Item>
-      <Form.Item>
+      <Form.Item {...getHorizontalFormItemWithoutLabelProps()}>
         <Checkbox
           name="send_email_on_failed_scheduled_queries"
           checked={values.send_email_on_failed_scheduled_queries}
@@ -25,7 +27,7 @@ export default function FeatureFlagsSettings(props) {
           Email query owners when scheduled queries fail
         </Checkbox>
       </Form.Item>
-      <Form.Item>
+      <Form.Item {...getHorizontalFormItemWithoutLabelProps()}>
         <Checkbox
           name="multi_byte_search_enabled"
           checked={values.multi_byte_search_enabled}

client/app/styles/formStyle.less

@@ -0,0 +1,10 @@
+.ant-form-horizontal--labels-left {
+  .ant-form-item-label {
+    text-align: left;
+    white-space: normal;
+
+    > label::after {
+      content: none; // Do not show ":" next to label when they are aligned on left side
+    }
+  }
+}

client/app/styles/formStyle.ts

@@ -0,0 +1,18 @@
+import { FormProps } from "antd/lib/form/Form";
+import { FormItemProps } from "antd/lib/form/FormItem";
+import "./formStyle.less";
+
+export function getHorizontalFormProps(): FormProps {
+  return {
+    labelCol: { xs: { span: 24 }, sm: { span: 6 }, lg: { span: 4 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 }, lg: { span: 10 } },
+    layout: "horizontal",
+    className: "ant-form-horizontal--labels-left",
+  };
+}
+
+export function getHorizontalFormItemWithoutLabelProps(): FormItemProps {
+  return {
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12, offset: 6 }, lg: { span: 12, offset: 4 } },
+  };
+}

client/cypress/integration/settings/organization_settings_spec.js

@@ -1,7 +1,7 @@
 describe("Settings", () => {
   beforeEach(() => {
     cy.login();
-    cy.visit("/settings/organization");
+    cy.visit("/settings/general");
   });
 
   it("renders the page and takes a screenshot", () => {

client/cypress/integration/settings/settings_tabs_spec.js

@@ -8,7 +8,7 @@ describe("Settings Tabs", () => {
   };
 
   const userTabs = ["Users", "Groups", "Query Snippets", "Account"];
-  const adminTabs = ["Data Sources", "Alert Destinations", "Settings"];
+  const adminTabs = ["Data Sources", "Alert Destinations", "General"];
 
   const expectSettingsTabsToBe = expectedTabs =>
     cy.getByTestId("SettingsScreenItem").then($list => {