From dc490c236de92492f3ef990732368a06d52a396e Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 2 May 2025 09:14:30 -0700
Subject: [PATCH] UI: Clean up various states on the Settings page (#28752)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## For #28266

<img width="1912" alt="Screenshot 2025-05-01 at 9 48 06 PM"
src="https://github.com/user-attachments/assets/f8b66d86-79c5-4166-b328-4befc3bd51f9"
/>
<img width="1912" alt="Screenshot 2025-05-01 at 9 48 44 PM"
src="https://github.com/user-attachments/assets/c7ddf782-4cfe-45a3-b291-86a61d127264"
/>
<img width="1912" alt="Screenshot 2025-05-01 at 9 49 43 PM"
src="https://github.com/user-attachments/assets/354ccdb6-f7f9-41c6-aceb-b08d2c8b76f0"
/>
<img width="1912" alt="Screenshot 2025-05-01 at 9 51 42 PM"
src="https://github.com/user-attachments/assets/d9405f9b-1146-47ea-a18c-8047cbfecffd"
/>

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/28266-clean-up-settings               |  1 +
 .../cards/Integrations/Integrations.tsx       | 65 +++++++++++--------
 .../pages/admin/OrgSettingsPage/_styles.scss  | 20 ++++++
 .../admin/OrgSettingsPage/cards/Smtp/Smtp.tsx | 30 +++++----
 frontend/pages/admin/_styles.scss             |  2 +-
 5 files changed, 77 insertions(+), 41 deletions(-)
 create mode 100644 changes/28266-clean-up-settings

diff --git a/changes/28266-clean-up-settings b/changes/28266-clean-up-settings
new file mode 100644
index 0000000000..0bfd2bd45b
--- /dev/null
+++ b/changes/28266-clean-up-settings
@@ -0,0 +1 @@
+* Clean up various empty and configured states on the settings pages
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx b/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
index 5199de829c..496bf67abd 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
@@ -17,6 +17,7 @@ import configAPI from "services/entities/config";
 import TableContainer from "components/TableContainer";
 import TableDataError from "components/DataError";
 import SectionHeader from "components/SectionHeader";
+import Spinner from "components/Spinner";
 
 import AddIntegrationModal from "./components/AddIntegrationModal";
 import DeleteIntegrationModal from "./components/DeleteIntegrationModal";
@@ -267,6 +268,41 @@ const Integrations = (): JSX.Element => {
     [jiraIntegrations, zendeskIntegrations]
   );
 
+  const renderTable = () => {
+    if (loadingIntegrationsError) {
+      return <TableDataError />;
+    }
+    if (isLoadingIntegrations) {
+      return <Spinner />;
+    }
+    return (
+      <TableContainer
+        columnConfigs={tableHeaders}
+        data={tableData}
+        defaultSortHeader="name"
+        defaultSortDirection="asc"
+        isLoading={false}
+        actionButton={{
+          name: "add integration",
+          buttonText: "Add integration",
+          variant: "default",
+          onClick: toggleAddIntegrationModal,
+          hideButton: !tableData?.length,
+        }}
+        resultsTitle="integrations"
+        emptyComponent={() => (
+          <EmptyIntegrationsTable
+            className={noIntegrationsClass}
+            onActionButtonClick={toggleAddIntegrationModal}
+          />
+        )}
+        showMarkAllPages={false}
+        isAllPagesSelected={false}
+        disablePagination
+      />
+    );
+  };
+
   return (
     <div className={`${baseClass}`}>
       <SectionHeader title="Ticket destinations" />
@@ -274,34 +310,7 @@ const Integrations = (): JSX.Element => {
         Add or edit integrations to create tickets when Fleet detects new
         vulnerabilities.
       </p>
-      {loadingIntegrationsError ? (
-        <TableDataError />
-      ) : (
-        <TableContainer
-          columnConfigs={tableHeaders}
-          data={tableData}
-          isLoading={isLoadingIntegrations}
-          defaultSortHeader="name"
-          defaultSortDirection="asc"
-          actionButton={{
-            name: "add integration",
-            buttonText: "Add integration",
-            variant: "default",
-            onClick: toggleAddIntegrationModal,
-            hideButton: !tableData?.length,
-          }}
-          resultsTitle="integrations"
-          emptyComponent={() => (
-            <EmptyIntegrationsTable
-              className={noIntegrationsClass}
-              onActionButtonClick={toggleAddIntegrationModal}
-            />
-          )}
-          showMarkAllPages={false}
-          isAllPagesSelected={false}
-          disablePagination
-        />
-      )}
+      {renderTable()}
       {showAddIntegrationModal && (
         <AddIntegrationModal
           onCancel={toggleAddIntegrationModal}
diff --git a/frontend/pages/admin/OrgSettingsPage/_styles.scss b/frontend/pages/admin/OrgSettingsPage/_styles.scss
index 51fa723590..38d68fcecd 100644
--- a/frontend/pages/admin/OrgSettingsPage/_styles.scss
+++ b/frontend/pages/admin/OrgSettingsPage/_styles.scss
@@ -75,6 +75,26 @@
         width: calc(90% - 50px);
         margin-bottom: $pad-medium;
       }
+      &__ses-enabled {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $pad-medium;
+
+        &__content {
+          text-align: center;
+
+          p {
+            margin: 0;
+          }
+        }
+
+        &__title {
+          font-size: $small;
+          font-weight: $bold;
+          margin-bottom: $pad-small;
+        }
+      }
     }
   }
 
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx
index c3b2c80757..184fb5c7a0 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx
@@ -12,10 +12,10 @@ import Dropdown from "components/forms/fields/Dropdown";
 import InputField from "components/forms/fields/InputField";
 // @ts-ignore
 import validEmail from "components/forms/validators/valid_email";
-import EmptyTable from "components/EmptyTable";
 import CustomLink from "components/CustomLink";
 import SectionHeader from "components/SectionHeader";
 import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
+import Card from "components/Card";
 
 import {
   IAppConfigFormProps,
@@ -222,18 +222,24 @@ const Smtp = ({
   };
 
   const renderSesEnabled = () => {
-    const header = "Email already configured";
-    const info = (
-      <>
-        To configure SMTP,{" "}
-        <CustomLink
-          url={isPremiumTier ? CONTACT_FLEET_LINK : "https://fleetdm.com/slack"}
-          text="get help"
-          newTab
-        />
-      </>
+    const sesBaseClass = `${baseClass}__ses-enabled`;
+    return (
+      <Card paddingSize="xxlarge" className={sesBaseClass}>
+        <div className={`${sesBaseClass}__content`}>
+          <p className={`${sesBaseClass}__title`}>Email already configured</p>
+          <p>
+            To configure SMTP,{" "}
+            <CustomLink
+              url={
+                isPremiumTier ? CONTACT_FLEET_LINK : "https://fleetdm.com/slack"
+              }
+              text="get help"
+              newTab
+            />
+          </p>
+        </div>
+      </Card>
     );
-    return <EmptyTable header={header} info={info} />;
   };
 
   const renderSmtpForm = () => {
diff --git a/frontend/pages/admin/_styles.scss b/frontend/pages/admin/_styles.scss
index 10c4aa141c..66f1be2406 100644
--- a/frontend/pages/admin/_styles.scss
+++ b/frontend/pages/admin/_styles.scss
@@ -30,7 +30,7 @@
 
   .side-nav__card-container {
     // all side navs in the admin section we want to limit the max width
-    > * {
+    > *:not(.loading-spinner) {
       width: 100%;
       max-width: $settings-form-max-width;
     }