Chore: remove gf-form in grafana-ui components (#113659)

eslint-suppressions.json

@@ -602,32 +602,14 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx": {
-    "no-restricted-syntax": {
-      "count": 3
-    }
-  },
   "packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2
     },
-    "no-restricted-syntax": {
-      "count": 3
-    },
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx": {
-    "no-restricted-syntax": {
-      "count": 3
-    }
-  },
-  "packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx": {
-    "no-restricted-syntax": {
-      "count": 3
-    }
-  },
   "packages/grafana-ui/src/components/DataSourceSettings/types.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2

packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

@@ -3,6 +3,8 @@ import { t, Trans } from '@grafana/i18n';
 
 import { InlineSwitch } from '../../components/Switch/Switch';
 import { InlineField } from '../Forms/InlineField';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 
 export interface Props<T extends DataSourceJsonData>
   extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
@@ -17,31 +19,36 @@ export function AlertingSettings<T extends AlertingConfig>({ options, onOptionsC
       <h3 className="page-heading">
         <Trans i18nKey="grafana-ui.data-source-settings.alerting-settings-heading">Alerting</Trans>
       </h3>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineField
-              labelWidth={29}
-              label={t('grafana-ui.data-source-settings.alerting-settings-label', 'Manage alert rules in Alerting UI')}
-              disabled={options.readOnly}
-              tooltip={t(
-                'grafana-ui.data-source-settings.alerting-settings-tooltip',
-                'Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source.'
-              )}
-            >
-              <InlineSwitch
-                value={options.jsonData.manageAlerts !== false}
-                onChange={(event) =>
-                  onOptionsChange({
-                    ...options,
-                    jsonData: { ...options.jsonData, manageAlerts: event!.currentTarget.checked },
-                  })
-                }
-              />
-            </InlineField>
-          </div>
-        </div>
-      </div>
+      <Box marginBottom={5}>
+        <Stack direction="row" alignItems="flex-start" wrap>
+          <Box marginBottom={0.5} position="relative">
+            <Stack direction="row" alignItems="flex-start">
+              <InlineField
+                labelWidth={29}
+                label={t(
+                  'grafana-ui.data-source-settings.alerting-settings-label',
+                  'Manage alert rules in Alerting UI'
+                )}
+                disabled={options.readOnly}
+                tooltip={t(
+                  'grafana-ui.data-source-settings.alerting-settings-tooltip',
+                  'Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source.'
+                )}
+              >
+                <InlineSwitch
+                  value={options.jsonData.manageAlerts !== false}
+                  onChange={(event) =>
+                    onOptionsChange({
+                      ...options,
+                      jsonData: { ...options.jsonData, manageAlerts: event!.currentTarget.checked },
+                    })
+                  }
+                />
+              </InlineField>
+            </Stack>
+          </Box>
+        </Stack>
+      </Box>
     </>
   );
 }

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -9,6 +9,8 @@ import { useStyles2 } from '../../themes/ThemeContext';
 import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
 import { Icon } from '../Icon/Icon';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { SecretFormField } from '../SecretFormField/SecretFormField';
 
 export interface CustomHeader {
@@ -199,12 +201,14 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
     const { dataSourceConfig } = this.props;
 
     return (
-      <div className={'gf-form-group'}>
-        <div className="gf-form">
-          <h6>
-            <Trans i18nKey="grafana-ui.data-source-settings.custom-headers-title">Custom HTTP Headers</Trans>
-          </h6>
-        </div>
+      <Box marginBottom={5}>
+        <Box marginBottom={0.5} position="relative">
+          <Stack direction="row" alignItems="baseline">
+            <h6>
+              <Trans i18nKey="grafana-ui.data-source-settings.custom-headers-title">Custom HTTP Headers</Trans>
+            </h6>
+          </Stack>
+        </Box>
         <div>
           {headers.map((header, i) => (
             <CustomHeaderRow
@@ -220,20 +224,22 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
           ))}
         </div>
         {!dataSourceConfig.readOnly && (
-          <div className="gf-form">
-            <Button
-              variant="secondary"
-              icon="plus"
-              type="button"
-              onClick={(e) => {
-                this.onHeaderAdd();
-              }}
-            >
-              <Trans i18nKey="grafana-ui.data-source-settings.custom-headers-add">Add header</Trans>
-            </Button>
-          </div>
+          <Box marginBottom={0.5} position="relative">
+            <Stack direction="row" alignItems="baseline">
+              <Button
+                variant="secondary"
+                icon="plus"
+                type="button"
+                onClick={(e) => {
+                  this.onHeaderAdd();
+                }}
+              >
+                <Trans i18nKey="grafana-ui.data-source-settings.custom-headers-add">Add header</Trans>
+              </Button>
+            </Stack>
+          </Box>
         )}
-      </div>
+      </Box>
     );
   }
 }

packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx

@@ -3,6 +3,8 @@ import { t, Trans } from '@grafana/i18n';
 
 import { InlineSwitch } from '../../components/Switch/Switch';
 import { InlineField } from '../Forms/InlineField';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 
 export interface Props<T extends DataSourceJsonData>
   extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
@@ -20,30 +22,32 @@ export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
       <h3 className="page-heading">
         <Trans i18nKey="grafana-ui.data-source-settings.secure-socks-heading">Secure Socks Proxy</Trans>
       </h3>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineField
-              labelWidth={26}
-              label={t('grafana-ui.data-source-settings.secure-socks-label', 'Enabled')}
-              tooltip={t(
-                'grafana-ui.data-source-settings.secure-socks-tooltip',
-                'Connect to this datasource via the secure socks proxy.'
-              )}
-            >
-              <InlineSwitch
-                value={options.jsonData.enableSecureSocksProxy ?? false}
-                onChange={(event) =>
-                  onOptionsChange({
-                    ...options,
-                    jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
-                  })
-                }
-              />
-            </InlineField>
-          </div>
-        </div>
-      </div>
+      <Box marginBottom={5}>
+        <Stack direction="row" alignItems="flex-start" wrap>
+          <Box position="relative" marginBottom={0.5}>
+            <Stack direction="row" alignItems="flex-start">
+              <InlineField
+                labelWidth={26}
+                label={t('grafana-ui.data-source-settings.secure-socks-label', 'Enabled')}
+                tooltip={t(
+                  'grafana-ui.data-source-settings.secure-socks-tooltip',
+                  'Connect to this datasource via the secure socks proxy.'
+                )}
+              >
+                <InlineSwitch
+                  value={options.jsonData.enableSecureSocksProxy ?? false}
+                  onChange={(event) =>
+                    onOptionsChange({
+                      ...options,
+                      jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
+                    })
+                  }
+                />
+              </InlineField>
+            </Stack>
+          </Box>
+        </Stack>
+      </Box>
     </div>
   );
 }

packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx

@@ -1,4 +1,3 @@
-import { css, cx } from '@emotion/css';
 import * as React from 'react';
 
 import { KeyValue } from '@grafana/data';
@@ -6,6 +5,8 @@ import { t, Trans } from '@grafana/i18n';
 
 import { FormField } from '../FormField/FormField';
 import { Icon } from '../Icon/Icon';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 import { CertificationKey } from './CertificationKey';
@@ -53,29 +54,24 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
   const privateKeyBeginsWith = '-----BEGIN RSA PRIVATE KEY-----';
 
   return (
-    <div className="gf-form-group">
-      <div
-        className={cx(
-          'gf-form',
-          css({
-            alignItems: 'baseline',
-          })
-        )}
-      >
-        <h6>
-          <Trans i18nKey="grafana-ui.data-source-settings.tls-heading">TLS/SSL Auth Details</Trans>
-        </h6>
-        <Tooltip
-          placement="right-end"
-          content={t(
-            'grafana-ui.data-source-settings.tls-tooltip',
-            'TLS/SSL Certs are encrypted and stored in the Grafana database.'
-          )}
-          theme="info"
-        >
-          <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
-        </Tooltip>
-      </div>
+    <Box marginBottom={5}>
+      <Box marginBottom={0.5} position="relative">
+        <Stack direction="row" alignItems="baseline">
+          <h6>
+            <Trans i18nKey="grafana-ui.data-source-settings.tls-heading">TLS/SSL Auth Details</Trans>
+          </h6>
+          <Tooltip
+            placement="right-end"
+            content={t(
+              'grafana-ui.data-source-settings.tls-tooltip',
+              'TLS/SSL Certs are encrypted and stored in the Grafana database.'
+            )}
+            theme="info"
+          >
+            <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
+          </Tooltip>
+        </Stack>
+      </Box>
       <div>
         {dataSourceConfig.jsonData.tlsAuthWithCACert && (
           <CertificationKey
@@ -93,17 +89,19 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
 
         {dataSourceConfig.jsonData.tlsAuth && (
           <>
-            <div className="gf-form">
-              <FormField
-                label={t('grafana-ui.data-source-settings.tls-server-name-label', 'ServerName')}
-                labelWidth={7}
-                inputWidth={30}
-                // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
-                placeholder="domain.example.com"
-                value={hasServerName && dataSourceConfig.jsonData.serverName}
-                onChange={onServerNameLabelChange}
-              />
-            </div>
+            <Box marginBottom={0.5} position="relative">
+              <Stack direction="row" alignItems="baseline">
+                <FormField
+                  label={t('grafana-ui.data-source-settings.tls-server-name-label', 'ServerName')}
+                  labelWidth={7}
+                  inputWidth={30}
+                  // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+                  placeholder="domain.example.com"
+                  value={hasServerName && dataSourceConfig.jsonData.serverName}
+                  onChange={onServerNameLabelChange}
+                />
+              </Stack>
+            </Box>
             <CertificationKey
               hasCert={!!hasTLSClientCert}
               label={t('grafana-ui.data-source-settings.tls-client-certification-label', 'Client Cert')}
@@ -130,6 +128,6 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
           </>
         )}
       </div>
-    </div>
+    </Box>
   );
 };

packages/grafana-ui/src/components/Forms/InlineFieldRow.mdx

@@ -1,6 +1,6 @@
 # InlineFieldRow
 
-Used to align multiple `InlineField` components in one row. The row will wrap if the width of the children exceeds its own. Equivalent to the div with `gf-form-inline` class name.
+Used to align multiple `InlineField` components in one row. The row will wrap if the width of the children exceeds its own.
 Multiple `InlineFieldRow`s vertically stack on each other.
 
 ### Usage