From 513b919a4be6378bd0801d788e1f94abe6882e88 Mon Sep 17 00:00:00 2001
From: Cal Herries <39073188+calherries@users.noreply.github.com>
Date: Wed, 19 Oct 2022 14:44:38 +0100
Subject: [PATCH] Fix SidebarContent padding (#26005)
---
.../SidebarContent/SidebarContent.tsx | 2 +-
.../dataref/DatabaseSchemasPane.tsx | 103 +++++++++---------
.../components/dataref/DatabaseTablesPane.tsx | 103 +++++++++---------
.../components/dataref/FieldPane.tsx | 5 +-
.../components/dataref/MainPane.jsx | 33 +++---
.../components/dataref/Pane.styled.tsx | 6 +
.../dataref/QuestionPane/QuestionPane.tsx | 79 +++++++-------
.../components/dataref/SchemaPane.tsx | 47 ++++----
.../components/dataref/TablePane.tsx | 51 +++++----
9 files changed, 229 insertions(+), 200 deletions(-)
create mode 100644 frontend/src/metabase/query_builder/components/dataref/Pane.styled.tsx
diff --git a/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx b/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx
index 89998162da7..7e944e77fb6 100644
--- a/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx
+++ b/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx
@@ -48,7 +48,7 @@ function SidebarContent({
onClose={onClose}
/>
)}
- <div className="px3">{children}</div>
+ {children}
</SidebarContentMain>
{footer}
</SidebarContentRoot>
diff --git a/frontend/src/metabase/query_builder/components/dataref/DatabaseSchemasPane.tsx b/frontend/src/metabase/query_builder/components/dataref/DatabaseSchemasPane.tsx
index f7fd0db853a..8f46de1f5a5 100644
--- a/frontend/src/metabase/query_builder/components/dataref/DatabaseSchemasPane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/DatabaseSchemasPane.tsx
@@ -16,6 +16,7 @@ import {
NodeListTitleText,
QuestionId,
} from "./NodeList.styled";
+import { PaneContent } from "./Pane.styled";
interface DatabaseSchemasPaneProps {
onBack: () => void;
@@ -44,56 +45,58 @@ const DatabaseSchemasPane = ({
onBack={onBack}
onClose={onClose}
>
- <NodeListContainer>
- {sortedModels.length ? (
- <>
- <NodeListTitle>
- <NodeListIcon name="model" />
- <NodeListTitleText>
- {ngettext(
- msgid`${sortedModels.length} model`,
- `${sortedModels.length} models`,
- sortedModels.length,
- )}
- </NodeListTitleText>
- </NodeListTitle>
- <ul>
- {sortedModels.map(model => (
- <li key={model.id}>
- <NodeListItemLink
- onClick={() => onItemClick("question", model)}
- >
- <NodeListItemIcon name="model" />
- <NodeListItemName>{model.name}</NodeListItemName>
- <QuestionId>{`#${model.id}`}</QuestionId>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
- <br></br>
- </>
- ) : null}
- <NodeListTitle>
- <NodeListIcon name="folder" />
- <NodeListTitleText>
- {ngettext(
- msgid`${schemas.length} schema`,
- `${schemas.length} schemas`,
- schemas.length,
- )}
- </NodeListTitleText>
- </NodeListTitle>
- <ul>
- {schemas.map(schema => (
- <li key={schema.id}>
- <NodeListItemLink onClick={() => onItemClick("schema", schema)}>
- <NodeListItemIcon name="folder" />
- <NodeListItemName>{schema.name}</NodeListItemName>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
- </NodeListContainer>
+ <PaneContent>
+ <NodeListContainer>
+ {sortedModels.length ? (
+ <>
+ <NodeListTitle>
+ <NodeListIcon name="model" />
+ <NodeListTitleText>
+ {ngettext(
+ msgid`${sortedModels.length} model`,
+ `${sortedModels.length} models`,
+ sortedModels.length,
+ )}
+ </NodeListTitleText>
+ </NodeListTitle>
+ <ul>
+ {sortedModels.map(model => (
+ <li key={model.id}>
+ <NodeListItemLink
+ onClick={() => onItemClick("question", model)}
+ >
+ <NodeListItemIcon name="model" />
+ <NodeListItemName>{model.name}</NodeListItemName>
+ <QuestionId>{`#${model.id}`}</QuestionId>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ <br></br>
+ </>
+ ) : null}
+ <NodeListTitle>
+ <NodeListIcon name="folder" />
+ <NodeListTitleText>
+ {ngettext(
+ msgid`${schemas.length} schema`,
+ `${schemas.length} schemas`,
+ schemas.length,
+ )}
+ </NodeListTitleText>
+ </NodeListTitle>
+ <ul>
+ {schemas.map(schema => (
+ <li key={schema.id}>
+ <NodeListItemLink onClick={() => onItemClick("schema", schema)}>
+ <NodeListItemIcon name="folder" />
+ <NodeListItemName>{schema.name}</NodeListItemName>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ </NodeListContainer>
+ </PaneContent>
</SidebarContent>
);
};
diff --git a/frontend/src/metabase/query_builder/components/dataref/DatabaseTablesPane.tsx b/frontend/src/metabase/query_builder/components/dataref/DatabaseTablesPane.tsx
index 9c83cd83bc8..750f620ada8 100644
--- a/frontend/src/metabase/query_builder/components/dataref/DatabaseTablesPane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/DatabaseTablesPane.tsx
@@ -16,6 +16,7 @@ import {
NodeListTitleText,
QuestionId,
} from "./NodeList.styled";
+import { PaneContent } from "./Pane.styled";
interface DatabaseTablesPaneProps {
onBack: () => void;
@@ -53,56 +54,58 @@ const DatabaseTablesPane = ({
onBack={onBack}
onClose={onClose}
>
- <NodeListContainer>
- {models.length ? (
- <>
- <NodeListTitle>
- <NodeListIcon name="model" />
- <NodeListTitleText>
- {ngettext(
- msgid`${models.length} model`,
- `${models.length} models`,
- models.length,
- )}
- </NodeListTitleText>
- </NodeListTitle>
- <ul>
- {models.map(model => (
- <li key={model.id}>
- <NodeListItemLink
- onClick={() => onItemClick("question", model)}
- >
- <NodeListItemIcon name="model" />
- <NodeListItemName>{model.name}</NodeListItemName>
- <QuestionId>{`#${model.id}`}</QuestionId>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
- <br></br>
- </>
- ) : null}
- <NodeListTitle>
- <NodeListIcon name="table" />
- <NodeListTitleText>
- {ngettext(
- msgid`${tables.length} table`,
- `${tables.length} tables`,
- tables.length,
- )}
- </NodeListTitleText>
- </NodeListTitle>
- <ul>
- {tables.map(table => (
- <li key={table.id}>
- <NodeListItemLink onClick={() => onItemClick("table", table)}>
- <NodeListItemIcon name="table" />
- <NodeListItemName>{table.table_name}</NodeListItemName>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
- </NodeListContainer>
+ <PaneContent>
+ <NodeListContainer>
+ {models.length ? (
+ <>
+ <NodeListTitle>
+ <NodeListIcon name="model" />
+ <NodeListTitleText>
+ {ngettext(
+ msgid`${models.length} model`,
+ `${models.length} models`,
+ models.length,
+ )}
+ </NodeListTitleText>
+ </NodeListTitle>
+ <ul>
+ {models.map(model => (
+ <li key={model.id}>
+ <NodeListItemLink
+ onClick={() => onItemClick("question", model)}
+ >
+ <NodeListItemIcon name="model" />
+ <NodeListItemName>{model.name}</NodeListItemName>
+ <QuestionId>{`#${model.id}`}</QuestionId>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ <br></br>
+ </>
+ ) : null}
+ <NodeListTitle>
+ <NodeListIcon name="table" />
+ <NodeListTitleText>
+ {ngettext(
+ msgid`${tables.length} table`,
+ `${tables.length} tables`,
+ tables.length,
+ )}
+ </NodeListTitleText>
+ </NodeListTitle>
+ <ul>
+ {tables.map(table => (
+ <li key={table.id}>
+ <NodeListItemLink onClick={() => onItemClick("table", table)}>
+ <NodeListItemIcon name="table" />
+ <NodeListItemName>{table.table_name}</NodeListItemName>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ </NodeListContainer>
+ </PaneContent>
</SidebarContent>
);
};
diff --git a/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx b/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
index 055cb9d55ef..bc769f9302d 100644
--- a/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
@@ -3,6 +3,7 @@ import React from "react";
import DimensionInfo from "metabase/components/MetadataInfo/DimensionInfo";
import SidebarContent from "metabase/query_builder/components/SidebarContent";
import Field from "metabase-lib/lib/metadata/Field";
+import { PaneContent } from "./Pane.styled";
interface FieldPaneProps {
onBack: () => void;
@@ -18,7 +19,9 @@ const FieldPane = ({ onBack, onClose, field }: FieldPaneProps) => {
onBack={onBack}
onClose={onClose}
>
- <DimensionInfo dimension={field.dimension()} showAllFieldValues />
+ <PaneContent>
+ <DimensionInfo dimension={field.dimension()} showAllFieldValues />
+ </PaneContent>
</SidebarContent>
);
};
diff --git a/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx b/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
index 06d9198e94c..274b689534c 100644
--- a/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
@@ -10,23 +10,28 @@ import {
NodeListItemName,
NodeListItemIcon,
} from "./NodeList.styled";
+import { PaneContent } from "./Pane.styled";
const MainPane = ({ databases, onClose, onItemClick }) => (
<SidebarContent title={t`Data Reference`} onClose={onClose}>
- <p className="mt2 mb3 text-spaced">
- {t`Browse the contents of your databases, tables, and columns. Pick a database to get started.`}
- </p>
- <ul>
- {databases &&
- databases.map(database => (
- <li key={database.id}>
- <NodeListItemLink onClick={() => onItemClick("database", database)}>
- <NodeListItemIcon name="database" />
- <NodeListItemName>{database.name}</NodeListItemName>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
+ <PaneContent>
+ <p className="mt2 mb3 text-spaced">
+ {t`Browse the contents of your databases, tables, and columns. Pick a database to get started.`}
+ </p>
+ <ul>
+ {databases &&
+ databases.map(database => (
+ <li key={database.id}>
+ <NodeListItemLink
+ onClick={() => onItemClick("database", database)}
+ >
+ <NodeListItemIcon name="database" />
+ <NodeListItemName>{database.name}</NodeListItemName>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ </PaneContent>
</SidebarContent>
);
diff --git a/frontend/src/metabase/query_builder/components/dataref/Pane.styled.tsx b/frontend/src/metabase/query_builder/components/dataref/Pane.styled.tsx
new file mode 100644
index 00000000000..da6e47523f5
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/dataref/Pane.styled.tsx
@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const PaneContent = styled.div`
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+`;
diff --git a/frontend/src/metabase/query_builder/components/dataref/QuestionPane/QuestionPane.tsx b/frontend/src/metabase/query_builder/components/dataref/QuestionPane/QuestionPane.tsx
index bc063d02338..33a971398b8 100644
--- a/frontend/src/metabase/query_builder/components/dataref/QuestionPane/QuestionPane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/QuestionPane/QuestionPane.tsx
@@ -15,6 +15,7 @@ import type { State } from "metabase-types/store";
import Table from "metabase-lib/lib/metadata/Table";
import Question from "metabase-lib/lib/Question";
import FieldList from "../FieldList";
+import { PaneContent } from "../Pane.styled";
import {
QuestionPaneDetail,
QuestionPaneDetailLink,
@@ -49,45 +50,47 @@ const QuestionPane = ({
onBack={onBack}
onClose={onClose}
>
- <QuestionPaneDescription>
- {question.description() ? (
- <Description>{question.description()}</Description>
- ) : (
- <EmptyDescription>{t`No description`}</EmptyDescription>
+ <PaneContent>
+ <QuestionPaneDescription>
+ {question.description() ? (
+ <Description>{question.description()}</Description>
+ ) : (
+ <EmptyDescription>{t`No description`}</EmptyDescription>
+ )}
+ </QuestionPaneDescription>
+ <QuestionPaneDetail>
+ <QuestionPaneDetailLink
+ href={question.getUrl()}
+ target="_blank"
+ rel="noreferrer"
+ >
+ <QuestionPaneIcon name="share" />
+ <QuestionPaneDetailLinkText>{t`See it`}</QuestionPaneDetailLinkText>
+ </QuestionPaneDetailLink>
+ </QuestionPaneDetail>
+ <QuestionPaneDetail>
+ <QuestionPaneIcon name="label" />
+ <QuestionPaneDetailText>{t`ID #${question.id()}`}</QuestionPaneDetailText>
+ </QuestionPaneDetail>
+ <QuestionPaneDetail>
+ <QuestionPaneIcon name="calendar" />
+ <QuestionPaneDetailText>
+ {jt`Last edited ${(
+ <DateTime
+ key="day"
+ unit="day"
+ value={question.lastEditInfo().timestamp}
+ />
+ )}`}
+ </QuestionPaneDetailText>
+ </QuestionPaneDetail>
+ {table.fields && (
+ <FieldList
+ fields={table.fields}
+ onFieldClick={f => onItemClick("field", f)}
+ />
)}
- </QuestionPaneDescription>
- <QuestionPaneDetail>
- <QuestionPaneDetailLink
- href={question.getUrl()}
- target="_blank"
- rel="noreferrer"
- >
- <QuestionPaneIcon name="share" />
- <QuestionPaneDetailLinkText>{t`See it`}</QuestionPaneDetailLinkText>
- </QuestionPaneDetailLink>
- </QuestionPaneDetail>
- <QuestionPaneDetail>
- <QuestionPaneIcon name="label" />
- <QuestionPaneDetailText>{t`ID #${question.id()}`}</QuestionPaneDetailText>
- </QuestionPaneDetail>
- <QuestionPaneDetail>
- <QuestionPaneIcon name="calendar" />
- <QuestionPaneDetailText>
- {jt`Last edited ${(
- <DateTime
- key="day"
- unit="day"
- value={question.lastEditInfo().timestamp}
- />
- )}`}
- </QuestionPaneDetailText>
- </QuestionPaneDetail>
- {table.fields && (
- <FieldList
- fields={table.fields}
- onFieldClick={f => onItemClick("field", f)}
- />
- )}
+ </PaneContent>
</SidebarContent>
);
};
diff --git a/frontend/src/metabase/query_builder/components/dataref/SchemaPane.tsx b/frontend/src/metabase/query_builder/components/dataref/SchemaPane.tsx
index 04ca2c5bfd5..48e8737cfe0 100644
--- a/frontend/src/metabase/query_builder/components/dataref/SchemaPane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/SchemaPane.tsx
@@ -14,6 +14,7 @@ import {
NodeListIcon,
NodeListTitleText,
} from "./NodeList.styled";
+import { PaneContent } from "./Pane.styled";
interface SchemaPaneProps {
onBack: () => void;
@@ -39,28 +40,30 @@ const SchemaPane = ({
onBack={onBack}
onClose={onClose}
>
- <NodeListContainer>
- <NodeListTitle>
- <NodeListIcon name="table" />
- <NodeListTitleText>
- {ngettext(
- msgid`${tables.length} table`,
- `${tables.length} tables`,
- tables.length,
- )}
- </NodeListTitleText>
- </NodeListTitle>
- <ul>
- {tables.map(table => (
- <li key={table.id}>
- <NodeListItemLink onClick={() => onItemClick("table", table)}>
- <NodeListItemIcon name="table" />
- <NodeListItemName>{table.name}</NodeListItemName>
- </NodeListItemLink>
- </li>
- ))}
- </ul>
- </NodeListContainer>
+ <PaneContent>
+ <NodeListContainer>
+ <NodeListTitle>
+ <NodeListIcon name="table" />
+ <NodeListTitleText>
+ {ngettext(
+ msgid`${tables.length} table`,
+ `${tables.length} tables`,
+ tables.length,
+ )}
+ </NodeListTitleText>
+ </NodeListTitle>
+ <ul>
+ {tables.map(table => (
+ <li key={table.id}>
+ <NodeListItemLink onClick={() => onItemClick("table", table)}>
+ <NodeListItemIcon name="table" />
+ <NodeListItemName>{table.name}</NodeListItemName>
+ </NodeListItemLink>
+ </li>
+ ))}
+ </ul>
+ </NodeListContainer>
+ </PaneContent>
</SidebarContent>
);
};
diff --git a/frontend/src/metabase/query_builder/components/dataref/TablePane.tsx b/frontend/src/metabase/query_builder/components/dataref/TablePane.tsx
index 236f005b79d..2795fb580af 100644
--- a/frontend/src/metabase/query_builder/components/dataref/TablePane.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/TablePane.tsx
@@ -14,6 +14,7 @@ import SidebarContent from "metabase/query_builder/components/SidebarContent";
import type Table from "metabase-lib/lib/metadata/Table";
import TableInfoLoader from "./TableInfoLoader";
import FieldList from "./FieldList";
+import { PaneContent } from "./Pane.styled";
interface TablePaneProps {
onBack: () => void;
@@ -33,31 +34,33 @@ const TablePane = ({ table, onItemClick, onBack, onClose }: TablePaneProps) => (
onBack={onBack}
onClose={onClose}
>
- <TableInfoLoader table={table}>
- <div className="ml1">
- {table.description ? (
- <Description>{table.description}</Description>
- ) : (
- <EmptyDescription>{t`No description`}</EmptyDescription>
- )}
- </div>
- <div className="my2">
- {table.fields.length ? (
- <>
- <FieldList
- fields={table.fields}
- onFieldClick={f => onItemClick("field", f)}
- />
- {table.connectedTables() && (
- <ConnectedTableList
- tables={table.connectedTables()}
- onTableClick={t => onItemClick("table", t)}
+ <PaneContent>
+ <TableInfoLoader table={table}>
+ <div className="ml1">
+ {table.description ? (
+ <Description>{table.description}</Description>
+ ) : (
+ <EmptyDescription>{t`No description`}</EmptyDescription>
+ )}
+ </div>
+ <div className="my2">
+ {table.fields.length ? (
+ <>
+ <FieldList
+ fields={table.fields}
+ onFieldClick={f => onItemClick("field", f)}
/>
- )}
- </>
- ) : null}
- </div>
- </TableInfoLoader>
+ {table.connectedTables() && (
+ <ConnectedTableList
+ tables={table.connectedTables()}
+ onTableClick={t => onItemClick("table", t)}
+ />
+ )}
+ </>
+ ) : null}
+ </div>
+ </TableInfoLoader>
+ </PaneContent>
</SidebarContent>
);
--
GitLab