Alerting: Style nits for the simple query mode (#93930)

* Style nits for the simple query mode

* update translations

* update text

* update translations

* update disable word to deactivate

* update preview text when not advanced options

* update text

* update text

.betterer.results

@@ -2089,8 +2089,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
     ],
     "public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],

public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx

@@ -45,6 +45,7 @@ export const RuleEditorSection = ({
                   label="Advanced options"
                   showLabel
                   transparent
+                  className={styles.reverse}
                 />
               </Text>
             )}
@@ -74,4 +75,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   fullWidth: css({
     width: '100%',
   }),
+  reverse: css({
+    flexDirection: 'row-reverse',
+    gap: theme.spacing(1),
+  }),
 });

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -20,6 +20,7 @@ import {
   useStyles2,
 } from '@grafana/ui';
 import { Text } from '@grafana/ui/src/components/Text/Text';
+import { t, Trans } from 'app/core/internationalization';
 import { EvalFunction } from 'app/features/alerting/state/alertDef';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import {
@@ -655,7 +656,9 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
                     onClick={() => runQueriesPreview()}
                     disabled={emptyQueries}
                   >
-                    Preview
+                    {isAdvancedMode
+                      ? t('alerting.queryAndExpressionsStep.preview', 'Preview')
+                      : t('alerting.queryAndExpressionsStep.previewCondition', 'Preview alert rule condition')}
                   </Button>
                 )}
               </Stack>
@@ -673,9 +676,19 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
 
       <ConfirmModal
         isOpen={showResetModeModal}
-        title="Switching to simple mode"
+        title="Deactivate advanced options"
-        body="The selected queries and expressions cannot be converted to simple mode. Switching will remove them. Do you want to proceed?"
+        body={
-        confirmText="Yes"
+          <div>
+            <Text element="p">
+              <Trans i18nKey="alerting.queryAndExpressionsStep.disableAdvancedOptions.text">
+                The selected queries and expressions cannot be converted to default. If you deactivate advanced options,
+                your query and condition will be reset to default settings.
+              </Trans>
+            </Text>
+            <br />
+          </div>
+        }
+        confirmText="Deactivate"
         icon="exclamation-triangle"
         onConfirm={() => {
           setValue('editorSettings', { simplifiedQueryEditor: true });

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SimpleCondition.tsx

@@ -103,7 +103,7 @@ export const SimpleConditionEditor = ({
             <Trans i18nKey="alerting.simpleCondition.alertCondition">Alert condition</Trans>
           </Text>
         </header>
-        <InlineFieldRow>
+        <InlineFieldRow className={styles.condition.container}>
           <InlineField label="WHEN">
             <Select
               options={reducerTypes}
@@ -114,7 +114,12 @@ export const SimpleConditionEditor = ({
           </InlineField>
           <InlineField label="OF QUERY">
             <Stack direction="row" gap={1} alignItems="center">
-              <ButtonSelect options={thresholdFunctions} onChange={onEvalFunctionChange} value={thresholdFunction} />
+              <ButtonSelect
+                className={styles.buttonSelectText}
+                options={thresholdFunctions}
+                onChange={onEvalFunctionChange}
+                value={thresholdFunction}
+              />
               {isRange ? (
                 <>
                   <Input
@@ -123,7 +128,7 @@ export const SimpleConditionEditor = ({
                     value={simpleCondition.evaluator.params[0]}
                     onChange={(event) => onEvaluateValueChange(event, 0)}
                   />
-                  <div>
+                  <div className={styles.condition.button}>
                     <Trans i18nKey="alerting.simpleCondition.ofQuery.To">TO</Trans>
                   </div>
                   <Input
@@ -223,6 +228,12 @@ export function getSimpleConditionFromExpressions(expressions: Array<AlertQuery<
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  buttonSelectText: css({
+    color: theme.colors.primary.text,
+    fontSize: theme.typography.bodySmall.fontSize,
+    textTransform: 'uppercase',
+    padding: `0 ${theme.spacing(1)}`,
+  }),
   condition: {
     wrapper: css({
       display: 'flex',
@@ -231,11 +242,32 @@ const getStyles = (theme: GrafanaTheme2) => ({
       height: 'fit-content',
       borderRadius: theme.shape.radius.default,
     }),
+    container: css({
+      display: 'flex',
+      flexDirection: 'row',
+      padding: theme.spacing(1),
+      flex: 1,
+      width: '100%',
+    }),
     header: css({
       background: theme.colors.background.secondary,
       padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
       borderBottom: `solid 1px ${theme.colors.border.weak}`,
       flex: 1,
     }),
+    button: css({
+      height: '32px',
+      color: theme.colors.primary.text,
+      fontSize: theme.typography.bodySmall.fontSize,
+      textTransform: 'uppercase',
+      display: 'flex',
+      alignItems: 'center',
+      borderRadius: theme.shape.radius.default,
+      fontWeight: theme.typography.fontWeightBold,
+      border: `1px solid ${theme.colors.border.medium}`,
+      whiteSpace: 'nowrap',
+      padding: `0 ${theme.spacing(1)}`,
+      backgroundColor: theme.colors.background.primary,
+    }),
   },
 });

public/locales/en-US/grafana.json

@@ -216,6 +216,13 @@
       "badge-tooltip-provenance": "This resource has been provisioned via {{provenance}} and cannot be edited through the UI",
       "badge-tooltip-standard": "This resource has been provisioned and cannot be edited through the UI"
     },
+    "queryAndExpressionsStep": {
+      "disableAdvancedOptions": {
+        "text": "The selected queries and expressions cannot be converted to default. If you deactivate advanced options, your query and condition will be reset to default settings."
+      },
+      "preview": "Preview",
+      "previewCondition": "Preview alert rule condition"
+    },
     "rule-groups": {
       "delete": {
         "success": "Successfully deleted rule group"

public/locales/pseudo-LOCALE/grafana.json

@@ -216,6 +216,13 @@
       "badge-tooltip-provenance": "Ŧĥįş řęşőūřčę ĥäş þęęʼn přővįşįőʼnęđ vįä {{provenance}} äʼnđ čäʼnʼnőŧ þę ęđįŧęđ ŧĥřőūģĥ ŧĥę ŮĨ",
       "badge-tooltip-standard": "Ŧĥįş řęşőūřčę ĥäş þęęʼn přővįşįőʼnęđ äʼnđ čäʼnʼnőŧ þę ęđįŧęđ ŧĥřőūģĥ ŧĥę ŮĨ"
     },
+    "queryAndExpressionsStep": {
+      "disableAdvancedOptions": {
+        "text": "Ŧĥę şęľęčŧęđ qūęřįęş äʼnđ ęχpřęşşįőʼnş čäʼnʼnőŧ þę čőʼnvęřŧęđ ŧő đęƒäūľŧ. Ĩƒ yőū đęäčŧįväŧę äđväʼnčęđ őpŧįőʼnş, yőūř qūęřy äʼnđ čőʼnđįŧįőʼn ŵįľľ þę řęşęŧ ŧő đęƒäūľŧ şęŧŧįʼnģş."
+      },
+      "preview": "Přęvįęŵ",
+      "previewCondition": "Přęvįęŵ äľęřŧ řūľę čőʼnđįŧįőʼn"
+    },
     "rule-groups": {
       "delete": {
         "success": "Ŝūččęşşƒūľľy đęľęŧęđ řūľę ģřőūp"