Move `JoinStep` into its own directory (#31991)

frontend/src/metabase/query_builder/components/notebook/NotebookStep/steps.ts

@@ -5,7 +5,7 @@ import { color } from "metabase/lib/colors";
 
 import { IconName } from "metabase/core/components/Icon";
 import { DataStep } from "../steps/DataStep";
-import JoinStep from "../steps/JoinStep";
+import { JoinStep } from "../steps/JoinStep";
 import ExpressionStep from "../steps/ExpressionStep";
 import FilterStep from "../steps/FilterStep";
 import { AggregateStep } from "../steps/AggregateStep";

frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.jsx → frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.jsx

@@ -14,13 +14,13 @@ import Join from "metabase-lib/queries/structured/Join";
 import Question from "metabase-lib/Question";
 import StructuredQuery from "metabase-lib/queries/StructuredQuery";
 
-import { NotebookCellAdd, NotebookCellItem } from "../NotebookCell";
+import { NotebookCellAdd, NotebookCellItem } from "../../NotebookCell";
 import {
   FieldPickerContentContainer,
   FIELDS_PICKER_STYLES,
   FieldsPickerIcon,
-} from "../FieldsPickerIcon";
-import FieldsPicker from "./FieldsPicker";
+} from "../../FieldsPickerIcon";
+import FieldsPicker from "../FieldsPicker";
 import {
   DimensionContainer,
   DimensionSourceName,
@@ -84,7 +84,7 @@ const JOIN_OPERATOR_OPTIONS = [
   { name: "≠", value: "!=" },
 ];
 
-export default function JoinStep({
+export function JoinStep({
   color,
   query,
   step,

frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.styled.tsx → frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.styled.tsx

@@ -4,7 +4,7 @@ import { color } from "metabase/lib/colors";
 import { space, breakpointMaxMedium } from "metabase/styled-components/theme";
 import { Icon } from "metabase/core/components/Icon";
 import Button from "metabase/core/components/Button";
-import { NotebookCell } from "../NotebookCell";
+import { NotebookCell } from "../../NotebookCell";
 
 export const Row = styled.div`
   display: flex;

frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/index.ts

+export * from "./JoinStep";