make series style settings tab first (#46549)

* make series style settings tab first

* spec

e2e/support/helpers/e2e-viz-settings-helpers.js

-import { popover } from "./e2e-ui-elements-helpers";
-
 export function openSeriesSettings(field, isBreakout = false) {
   if (isBreakout) {
     cy.get("[data-testid^=draggable-item]")
@@ -13,8 +11,5 @@ export function openSeriesSettings(field, isBreakout = false) {
       .closest("[data-testid=chartsettings-field-picker]")
       .find(".Icon-ellipsis")
       .click();
-    popover().within(() => {
-      cy.findAllByRole("radiogroup").findByText("Style").click();
-    });
   }
 }

e2e/test/scenarios/visualizations-charts/line_chart.cy.spec.js

@@ -75,8 +75,6 @@ describe("scenarios > visualizations > line chart", () => {
     openSeriesSettings("Count");
 
     popover().within(() => {
-      cy.findByText("Style").click();
-
       // For line chart
       cy.findByText("Line shape").should("exist");
       cy.findByText("Line style").should("exist");
@@ -99,6 +97,25 @@ describe("scenarios > visualizations > line chart", () => {
     });
   });
 
+  it("should allow changing formatting settings", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "line",
+    });
+
+    cy.findByTestId("viz-settings-button").click();
+    openSeriesSettings("Count");
+
+    popover().within(() => {
+      cy.findByText("Formatting").click();
+
+      cy.findByText("Add a prefix").should("exist");
+      cy.findByPlaceholderText("$").type("prefix").blur();
+    });
+
+    echartsContainer().findByText("prefix0");
+  });
+
   it("should reset series settings when switching to line chart", () => {
     visitQuestionAdhoc({
       dataset_query: testQuery,

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -417,8 +417,8 @@ class ChartSettings extends Component {
         <ChartSettingsWidgetPopover
           anchor={popoverRef}
           widgets={[
-            this.getFormattingWidget(widgets),
             this.getStyleWidget(widgets),
+            this.getFormattingWidget(widgets),
           ].filter(widget => !!widget)}
           handleEndShowWidget={this.handleEndShowWidget}
         />