Update notebook editor's join step UI (#17523)

* Move JoinStep's NotebookCell down to JoinClause

* Break JoinClause into two NotebookCells

* Update labels

* Use `space` helper function

* Simplify conditional statement

* Fix not translated string

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

@@ -17,14 +17,14 @@ import {
 import { FieldsPickerIcon, FIELDS_PICKER_STYLES } from "../FieldsPickerIcon";
 import FieldsPicker from "./FieldsPicker";
 import {
+  JoinStepRoot,
   JoinClausesContainer,
-  JoinClauseContainer,
   JoinClauseRoot,
+  JoinClauseContainer,
   JoinStrategyIcon,
   JoinTypeSelectRoot,
   JoinTypeOptionRoot,
   JoinTypeIcon,
-  JoinedTableControlRoot,
   JoinWhereConditionLabel,
   JoinOnConditionLabel,
   RemoveJoinIcon,
@@ -79,7 +79,7 @@ export default function JoinStep({
   }
 
   return (
-    <NotebookCell color={color} flexWrap="nowrap">
+    <JoinStepRoot>
       <JoinClausesContainer>
         {joins.map((join, index) => {
           const isLast = index === joins.length - 1;
@@ -103,7 +103,7 @@ export default function JoinStep({
           onClick={addNewJoinClause}
         />
       )}
-    </NotebookCell>
+    </JoinStepRoot>
   );
 }
 
@@ -169,47 +169,48 @@ function JoinClause({ color, join, updateQuery, showRemove }) {
 
   return (
     <JoinClauseRoot>
-      <NotebookCellItem color={color}>
-        {(lhsTable && lhsTable.displayName()) || `Previous results`}
-      </NotebookCellItem>
-
-      <JoinTypePicker join={join} color={color} updateQuery={updateQuery} />
-
-      <JoinTablePicker
-        join={join}
-        query={query}
-        joinedTable={joinedTable}
-        color={color}
-        updateQuery={updateQuery}
-        onSourceTableSet={onSourceTableSet}
-      />
-
-      {joinedTable && (
-        <JoinedTableControlRoot>
-          <JoinWhereConditionLabel />
+      <NotebookCell color={color} flex={1}>
+        <NotebookCellItem color={color}>
+          {lhsTable?.displayName() || t`Previous results`}
+        </NotebookCellItem>
 
-          <JoinDimensionPicker
-            color={color}
-            query={query}
-            dimension={join.parentDimension()}
-            options={join.parentDimensionOptions()}
-            onChange={onParentDimensionChange}
-            ref={parentDimensionPickerRef}
-            data-testid="parent-dimension"
-          />
+        <JoinTypePicker join={join} color={color} updateQuery={updateQuery} />
 
-          <JoinOnConditionLabel />
+        <JoinTablePicker
+          join={join}
+          query={query}
+          joinedTable={joinedTable}
+          color={color}
+          updateQuery={updateQuery}
+          onSourceTableSet={onSourceTableSet}
+        />
+      </NotebookCell>
 
-          <JoinDimensionPicker
-            color={color}
-            query={query}
-            dimension={join.joinDimension()}
-            options={join.joinDimensionOptions()}
-            onChange={onJoinDimensionChange}
-            ref={joinDimensionPickerRef}
-            data-testid="join-dimension"
-          />
-        </JoinedTableControlRoot>
+      {joinedTable && (
+        <React.Fragment>
+          <JoinWhereConditionLabel />
+          <NotebookCell color={color} flex={1}>
+            <JoinDimensionPicker
+              color={color}
+              query={query}
+              dimension={join.parentDimension()}
+              options={join.parentDimensionOptions()}
+              onChange={onParentDimensionChange}
+              ref={parentDimensionPickerRef}
+              data-testid="parent-dimension"
+            />
+            <JoinOnConditionLabel />
+            <JoinDimensionPicker
+              color={color}
+              query={query}
+              dimension={join.joinDimension()}
+              options={join.joinDimensionOptions()}
+              onChange={onJoinDimensionChange}
+              ref={joinDimensionPickerRef}
+              data-testid="join-dimension"
+            />
+          </NotebookCell>
+        </React.Fragment>
       )}
 
       {showRemove && <RemoveJoinIcon onClick={removeJoin} />}

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

@@ -3,10 +3,15 @@ import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 import Icon from "metabase/components/Icon";
 
+export const JoinStepRoot = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export const JoinClausesContainer = styled.div`
   display: flex;
   flex-direction: column;
-  flex: 1 0 auto;
+  flex: 1;
 `;
 
 export const JoinClauseContainer = styled.div`
@@ -16,7 +21,7 @@ export const JoinClauseContainer = styled.div`
 export const JoinClauseRoot = styled.div`
   display: flex;
   align-items: center;
-  flex: 1 1 auto;
+  margin-bottom: ${props => (props.isLast ? 0 : "2px")};
 `;
 
 export const JoinStrategyIcon = styled(Icon).attrs({ size: 32 })`
@@ -56,25 +61,18 @@ export const JoinTypeIcon = styled(Icon).attrs({ size: 24 })`
   color: ${props => (props.isSelected ? color("text-white") : color("brand"))};
 `;
 
-export const JoinedTableControlRoot = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const JoinWhereConditionLabel = styled.span.attrs({ children: "where" })`
-  color: ${color("text-medium")};
+export const JoinWhereConditionLabel = styled.span.attrs({ children: "on" })`
+  color: ${color("brand")};
   font-weight: bold;
-  margin-top: 6px;
-  margin-left: 10px;
-  margin-right: 14px;
+  margin: 0 ${space(2)};
 `;
 
 export const JoinOnConditionLabel = styled.span.attrs({ children: "=" })`
+  font-size: 20;
   font-weight: bold;
   color: ${color("text-medium")};
   margin-left: 2px;
   margin-right: 6px;
-  margin-top: 6px;
 `;
 
 export const RemoveJoinIcon = styled(Icon).attrs({ name: "close", size: 18 })`