Refactor EditorTabs component (#45705)

* Refactor EditoTabs
- get rid of options prop
- use named export

* Remove unused data-testid

* Remove redundant id and aria-labelledby

* Remove redundant props spread

* Bring back data-testid in use
- Thanks VSCode for randomly showing me search results or not...

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx

@@ -53,7 +53,7 @@ import {
 } from "./DatasetEditor.styled";
 import DatasetFieldMetadataSidebar from "./DatasetFieldMetadataSidebar";
 import DatasetQueryEditor from "./DatasetQueryEditor";
-import EditorTabs from "./EditorTabs";
+import { EditorTabs } from "./EditorTabs";
 import { TabHintToast } from "./TabHintToast";
 import { EDITOR_TAB_INDEXES } from "./constants";
 
@@ -496,16 +496,8 @@ function DatasetEditor(props) {
           isMetric ? null : (
             <EditorTabs
               currentTab={datasetEditorTab}
+              disabledMetadata={!resultsMetadata}
               onChange={onChangeEditorTab}
-              options={[
-                { id: "query", name: t`Query`, icon: "notebook" },
-                {
-                  id: "metadata",
-                  name: t`Metadata`,
-                  icon: "label",
-                  disabled: !resultsMetadata,
-                },
-              ]}
             />
           )
         }

frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.tsx

-import type { IconName } from "metabase/ui";
+import { t } from "ttag";
+
 import { Icon } from "metabase/ui";
 
-import { TabBar, Tab, RadioInput } from "./EditorTabs.styled";
+import { RadioInput, Tab, TabBar } from "./EditorTabs.styled";
 
 type Props = {
   currentTab: string;
-  options: {
-    id: string;
-    name: string;
-    icon: IconName;
-    disabled?: boolean;
-  }[];
+  disabledMetadata: boolean;
   onChange: (optionId: string) => void;
 };
 
-function EditorTabs({ currentTab, options, onChange, ...props }: Props) {
-  const inputId = "editor-tabs";
-
+export function EditorTabs({ currentTab, disabledMetadata, onChange }: Props) {
   return (
-    <TabBar {...props}>
-      {options.map(option => {
-        const selected = currentTab === option.id;
-        const id = `${inputId}-${option.id}`;
-        const labelId = `${id}-label`;
-        return (
-          <li key={option.id}>
-            <Tab
-              id={labelId}
-              htmlFor={id}
-              selected={selected}
-              disabled={option.disabled}
-            >
-              <Icon name={option.icon} />
-              <RadioInput
-                id={id}
-                name={inputId}
-                value={option.id}
-                checked={selected}
-                onChange={() => {
-                  onChange(option.id);
-                }}
-                aria-labelledby={labelId}
-                disabled={option.disabled}
-                data-testid={id}
-              />
-              <span data-testid={`${id}-name`}>{option.name}</span>
-            </Tab>
-          </li>
-        );
-      })}
+    <TabBar>
+      <li>
+        <Tab htmlFor="editor-tabs-query" selected={currentTab === "query"}>
+          <Icon name="notebook" />
+          <RadioInput
+            id="editor-tabs-query"
+            name="editor-tabs"
+            value="query"
+            checked={currentTab === "query"}
+            onChange={() => {
+              onChange("query");
+            }}
+          />
+          <span data-testid="editor-tabs-query-name">{t`Query`}</span>
+        </Tab>
+      </li>
+
+      <li>
+        <Tab
+          htmlFor="editor-tabs-metadata"
+          selected={currentTab === "metadata"}
+          disabled={disabledMetadata}
+        >
+          <Icon name="notebook" />
+          <RadioInput
+            id="editor-tabs-metadata"
+            name="editor-tabs"
+            value="metadata"
+            checked={currentTab === "metadata"}
+            onChange={() => {
+              onChange("metadata");
+            }}
+            disabled={disabledMetadata}
+            data-testid="editor-tabs-metadata"
+          />
+          <span data-testid="editor-tabs-metadata-name">{t`Metadata`}</span>
+        </Tab>
+      </li>
     </TabBar>
   );
 }
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default EditorTabs;

frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./EditorTabs";
+export * from "./EditorTabs";