Migrate "enterprise" from grid-styled (#20256)

enterprise/frontend/src/metabase-enterprise/auth/components/SettingsSAMLForm.jsx

@@ -3,7 +3,6 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { t } from "ttag";
 import _ from "underscore";
-import { Box } from "grid-styled";
 
 import { updateSettings } from "metabase/admin/settings/settings";
 import { settingToFormField } from "metabase/admin/settings/utils";
@@ -21,6 +20,7 @@ import CopyWidget from "metabase/components/CopyWidget";
 import GroupMappingsWidget from "metabase/admin/settings/components/widgets/GroupMappingsWidget";
 
 import MetabaseSettings from "metabase/lib/settings";
+import { SAMLFormSection } from "./SettingsSAMLForm.styled";
 
 @connect(null, { updateSettings })
 export default class SettingsSAMLForm extends Component {
@@ -67,7 +67,7 @@ export default class SettingsSAMLForm extends Component {
           type="boolean"
           showEnabledLabel={false}
         />
-        <Box className="bordered rounded" px={3} pt={3} pb={2} mb={2}>
+        <SAMLFormSection>
           <h3 className="mb0">{t`Configure your identity provider (IdP)`}</h3>
           <p className="mb4 mt1 text-medium">{t`Your identity provider will need the following info about Metabase.`}</p>
 
@@ -97,9 +97,9 @@ export default class SettingsSAMLForm extends Component {
             title={t`User's last name attribute`}
             type={({ field }) => <CopyWidget {...field} />}
           />
-        </Box>
+        </SAMLFormSection>
 
-        <Box className="bordered rounded" px={3} pt={3} pb={2} mb={2}>
+        <SAMLFormSection>
           <h3 className="mb0">{t`Tell Metabase about your identity provider`}</h3>
           <p className="mb4 mt1 text-medium">{t`Metabase will need the following info about your provider.`}</p>
           <FormField
@@ -124,9 +124,9 @@ export default class SettingsSAMLForm extends Component {
             {...settingField("saml-identity-provider-issuer")}
             title={t`SAML Identity Provider Issuer`}
           />
-        </Box>
+        </SAMLFormSection>
 
-        <Box className="bordered rounded" px={3} pt={3} pb={1} mb={2}>
+        <SAMLFormSection isSSLSection={true}>
           <FormSection title={t`Sign SSO requests (optional)`} collapsible>
             <FormField
               {...settingField("saml-keystore-path")}
@@ -143,9 +143,9 @@ export default class SettingsSAMLForm extends Component {
               title={t`SAML Keystore Alias`}
             />
           </FormSection>
-        </Box>
+        </SAMLFormSection>
 
-        <Box className="bordered rounded" px={3} pt={3} pb={2} mb={2}>
+        <SAMLFormSection>
           <h3 className="mb0">{t`Synchronize group membership with your SSO`}</h3>
           <p className="mb4 mt1 text-medium">
             {t`To enable this, you'll need to create mappings to tell Metabase which group(s) your users should
@@ -173,7 +173,7 @@ export default class SettingsSAMLForm extends Component {
             {...settingField("saml-attribute-group")}
             title={t`Group attribute name`}
           />
-        </Box>
+        </SAMLFormSection>
 
         <div>
           <FormMessage />

enterprise/frontend/src/metabase-enterprise/auth/components/SettingsSAMLForm.styled.tsx

+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+
+export interface SAMLFormSectionProps {
+  isSSLSection?: boolean;
+}
+
+export const SAMLFormSection = styled.div<SAMLFormSectionProps>`
+  padding: 1rem 2rem ${props => (props.isSSLSection ? "0.5rem" : "1rem")};
+  margin-bottom: 1rem;
+  border: 1px solid ${color("border")};
+  border-radius: 0.5rem;
+`;