fix(metrics): Introduce new styles to alias field

static/app/components/metrics/queryFieldGroup.tsx

@@ -1,14 +1,19 @@
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/button';
 import {ComboBox as _ComboBox} from 'sentry/components/comboBox';
 import {
   CompactSelect as _CompactSelect,
   type MultipleSelectProps,
   type SelectKey,
   type SingleSelectProps,
 } from 'sentry/components/compactSelect';
+import {DebouncedInput as _DebouncedInput} from 'sentry/components/modals/metricWidgetViewerModal/queries';
 import _SmartSearchBar from 'sentry/components/smartSearchBar';
+import {Tooltip} from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
+import {IconDelete} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 
 export function QueryFieldGroup({children}: React.HTMLAttributes<HTMLDivElement>) {
@@ -57,6 +62,24 @@ function CompactSelect<Value extends SelectKey>(props: CompactSelectProps<Value>
   );
 }
 
+function DeleteButton({title, onClick}: {onClick: () => void; title: string}) {
+  return (
+    <Tooltip title={title} delay={SLOW_TOOLTIP_DELAY}>
+      <StyledButton
+        icon={<IconDelete size="xs" />}
+        aria-label={title}
+        onClick={onClick}
+      />
+    </Tooltip>
+  );
+}
+
+const StyledButton = styled(Button)`
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+`;
+
 const ComboBox = styled(_ComboBox)`
   input: {
     border-radius: 0;
@@ -111,7 +134,14 @@ const Label = styled('span')`
   }
 `;
 
+const DebouncedInput = styled(_DebouncedInput)`
+  border-radius: 0;
+  z-index: 1;
+`;
+
 QueryFieldGroup.Label = Label;
 QueryFieldGroup.CompactSelect = CompactSelect;
 QueryFieldGroup.ComboBox = ComboBox;
 QueryFieldGroup.SmartSearchBar = SmartSearchBar;
+QueryFieldGroup.DebouncedInput = DebouncedInput;
+QueryFieldGroup.DeleteButton = DeleteButton;

static/app/components/modals/metricWidgetViewerModal/queries.tsx

@@ -1,4 +1,4 @@
-import {memo, useCallback, useMemo, useState} from 'react';
+import {Fragment, memo, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 
@@ -11,6 +11,7 @@ import {CreateMetricAlertFeature} from 'sentry/components/metrics/createMetricAl
 import {EquationInput} from 'sentry/components/metrics/equationInput';
 import {EquationSymbol} from 'sentry/components/metrics/equationSymbol';
 import {QueryBuilder} from 'sentry/components/metrics/queryBuilder';
+import {QueryFieldGroup} from 'sentry/components/metrics/queryFieldGroup';
 import {getQuerySymbol, QuerySymbol} from 'sentry/components/metrics/querySymbol';
 import {Tooltip} from 'sentry/components/tooltip';
 import {DEFAULT_DEBOUNCE_DURATION, SLOW_TOOLTIP_DELAY} from 'sentry/constants';
@@ -27,7 +28,7 @@ import {
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {isCustomMetric} from 'sentry/utils/metrics';
-import {hasMetricAlertFeature} from 'sentry/utils/metrics/features';
+import {hasMetricAlertFeature, hasMetricsNewInputs} from 'sentry/utils/metrics/features';
 import {MetricExpressionType} from 'sentry/utils/metrics/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
@@ -446,26 +447,44 @@ function ExpressionAliasForm({
 }) {
   return (
     <ExpressionAliasWrapper hasOwnRow={hasContextMenu}>
-      <StyledLabel>as</StyledLabel>
-      <StyledDebouncedInput
-        type="text"
-        value={expression.alias}
-        onChange={e => onChange(e.target.value)}
-        placeholder={t('Add alias')}
-      />
-      <Tooltip title={t('Clear alias')} delay={SLOW_TOOLTIP_DELAY}>
-        <StyledButton
-          icon={<IconDelete size="xs" />}
-          aria-label={t('Clear Alias')}
-          onClick={() => onChange(undefined)}
-        />
-      </Tooltip>
+      {hasMetricsNewInputs(useOrganization()) ? (
+        <QueryFieldGroup>
+          <QueryFieldGroup.Label>As</QueryFieldGroup.Label>
+          <QueryFieldGroup.DebouncedInput
+            type="text"
+            value={expression.alias}
+            onChange={e => onChange(e.target.value)}
+            placeholder={t('Add alias')}
+          />
+          <QueryFieldGroup.DeleteButton
+            title={t('Clear Alias')}
+            onClick={() => onChange(undefined)}
+          />
+        </QueryFieldGroup>
+      ) : (
+        <Fragment>
+          <StyledLabel>as</StyledLabel>
+          <StyledDebouncedInput
+            type="text"
+            value={expression.alias}
+            onChange={e => onChange(e.target.value)}
+            placeholder={t('Add alias')}
+          />
+          <Tooltip title={t('Clear alias')} delay={SLOW_TOOLTIP_DELAY}>
+            <StyledButton
+              icon={<IconDelete size="xs" />}
+              aria-label={t('Clear Alias')}
+              onClick={() => onChange(undefined)}
+            />
+          </Tooltip>
+        </Fragment>
+      )}
     </ExpressionAliasWrapper>
   );
 }
 
 // TODO: Move this to a shared component
-function DebouncedInput({
+export function DebouncedInput({
   onChange,
   wait = DEFAULT_DEBOUNCE_DURATION,
   ...inputProps