Loki: Fix misaligned derived fields settings (#61475)

* fix loki datasource settings

* remove unnecessary spacing

* remove unused import

public/app/plugins/datasource/loki/configuration/DerivedField.tsx

@@ -2,15 +2,15 @@ import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 import { usePrevious } from 'react-use';
 
-import { VariableSuggestion } from '@grafana/data';
+import { GrafanaTheme2, VariableSuggestion } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
-import { Button, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
+import { Button, DataLinkInput, LegacyForms, useStyles2 } from '@grafana/ui';
 
 import { DerivedFieldConfig } from '../types';
 
 const { Switch, FormField } = LegacyForms;
 
-const getStyles = stylesFactory(() => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   row: css`
     display: flex;
     align-items: baseline;
@@ -23,11 +23,12 @@ const getStyles = stylesFactory(() => ({
   `,
   urlField: css`
     flex: 1;
+    margin-right: ${theme.spacing(0.5)};
   `,
   urlDisplayLabelField: css`
     flex: 1;
   `,
-}));
+});
 
 type Props = {
   value: DerivedFieldConfig;
@@ -38,7 +39,7 @@ type Props = {
 };
 export const DerivedField = (props: Props) => {
   const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles();
+  const styles = useStyles2(getStyles);
   const [showInternalLink, setShowInternalLink] = useState(!!value.datasourceUid);
   const previousUid = usePrevious(value.datasourceUid);
 
@@ -61,10 +62,10 @@ export const DerivedField = (props: Props) => {
 
   return (
     <div className={className} data-testid="derived-field">
-      <div className={styles.row}>
+      <div className="gf-form">
         <FormField
+          labelWidth={10}
           className={styles.nameField}
-          labelWidth={5}
           // A bit of a hack to prevent using default value for the width from FormField
           inputWidth={null}
           label="Name"
@@ -73,6 +74,7 @@ export const DerivedField = (props: Props) => {
           onChange={handleChange('name')}
         />
         <FormField
+          labelWidth={10}
           className={styles.regexField}
           inputWidth={null}
           label="Regex"
@@ -91,14 +93,12 @@ export const DerivedField = (props: Props) => {
             event.preventDefault();
             onDelete();
           }}
-          className={css`
-            margin-left: 8px;
-          `}
         />
       </div>
 
-      <div className={styles.row}>
+      <div className="gf-form">
         <FormField
+          labelWidth={10}
           label={showInternalLink ? 'Query' : 'URL'}
           inputEl={
             <DataLinkInput
@@ -117,6 +117,7 @@ export const DerivedField = (props: Props) => {
         />
         <FormField
           className={styles.urlDisplayLabelField}
+          labelWidth={10}
           inputWidth={null}
           label="URL Label"
           type="text"