Skip to content
Snippets Groups Projects
Unverified Commit 51c46658 authored by Nemanja Glumac's avatar Nemanja Glumac Committed by GitHub
Browse files

Refactor `ListItem` component (#30650) 

* Remove unused props

* Remove `index` prop

* Do not pass unneeded prop that's not even defined

* Remove seven year old TODO

* Render `ListItem` with the `li` HTML element
parent cfcbb6da
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 89 additions and 115 deletions
frontend/src/metabase/components/ListItem/ListItem.jsx
+ 25
− 27
View file @ 51c46658
......@@ -8,44 +8,42 @@ import Card from "metabase/components/Card";
import S from "metabase/components/List/List.css";
import Icon from "metabase/components/Icon";
//TODO: extend this to support functionality required for questions
const ListItem = ({ index, name, description, placeholder, url, icon }) => (
<Link to={url} className="text-brand-hover">
<Card hoverable className="mb2 p3 bg-white rounded bordered">
<div className={cx(S.item)}>
<div className={S.itemIcons}>
{icon && <Icon className={S.chartIcon} name={icon} size={16} />}
</div>
<div className={S.itemBody}>
<div className={S.itemTitle}>
<Ellipsified
className={S.itemName}
tooltip={name}
tooltipMaxWidth="100%"
>
<h3>{name}</h3>
</Ellipsified>
const ListItem = ({ name, description, placeholder, url, icon }) => (
<li className="relative">
<Link to={url} className="text-brand-hover">
<Card hoverable className="mb2 p3 bg-white rounded bordered">
<div className={cx(S.item)}>
<div className={S.itemIcons}>
{icon && <Icon className={S.chartIcon} name={icon} size={16} />}
</div>
{(description || placeholder) && (
<div className={cx(S.itemSubtitle)}>
{description || placeholder}
<div className={S.itemBody}>
<div className={S.itemTitle}>
<Ellipsified
className={S.itemName}
tooltip={name}
tooltipMaxWidth="100%"
>
<h3>{name}</h3>
</Ellipsified>
</div>
)}
{(description || placeholder) && (
<div className={cx(S.itemSubtitle)}>
{description || placeholder}
</div>
)}
</div>
</div>
</div>
</Card>
</Link>
</Card>
</Link>
</li>
);
ListItem.propTypes = {
name: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
url: PropTypes.string,
description: PropTypes.string,
placeholder: PropTypes.string,
icon: PropTypes.string,
isEditing: PropTypes.bool,
field: PropTypes.object,
};
export default React.memo(ListItem);
frontend/src/metabase/components/ListItem/ListItem.unit.spec.js
+ 2
− 5
View file @ 51c46658
......@@ -6,12 +6,9 @@ import ListItem from "./ListItem";
const ITEM_NAME = "Table Foo";
const ITEM_DESCRIPTION = "Nice table description.";
function setup({ name, index = 0, ...opts }) {
function setup({ name, ...opts }) {
return renderWithProviders(
<Route
path="/"
component={() => <ListItem name={name} index={index} {...opts} />}
/>,
<Route path="/" component={() => <ListItem name={name} {...opts} />} />,
{ withRouter: true },
);
}
......
frontend/src/metabase/reference/databases/DatabaseList.jsx
+ 8
− 11
View file @ 51c46658
......@@ -59,17 +59,14 @@ class DatabaseList extends Component {
Object.keys(entities).length > 0 ? (
<div className="wrapper">
<List>
{databases.map((database, index) => (
<li className="relative" key={database.id}>
<ListItem
id={database.id}
index={index}
name={database.name}
description={database.description}
url={`/reference/databases/${database.id}`}
icon="database"
/>
</li>
{databases.map(database => (
<ListItem
key={database.id}
name={database.name}
description={database.description}
url={`/reference/databases/${database.id}`}
icon="database"
/>
))}
</List>
</div>
......
frontend/src/metabase/reference/databases/TableList.jsx
+ 8
− 11
View file @ 51c46658
......@@ -41,17 +41,14 @@ const mapDispatchToProps = {
...metadataActions,
};
const createListItem = (entity, index) => (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/databases/${entity.db_id}/tables/${entity.id}`}
icon="table2"
/>
</li>
const createListItem = entity => (
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/databases/${entity.db_id}/tables/${entity.id}`}
icon="table2"
/>
);
const createSchemaSeparator = table => (
......
frontend/src/metabase/reference/databases/TableQuestions.jsx
+ 10
− 13
View file @ 51c46658
......@@ -78,22 +78,19 @@ class TableQuestions extends Component {
<div className="wrapper wrapper--trim">
<List>
{Object.values(entities).map(
(entity, index) =>
entity =>
entity &&
entity.id &&
entity.name && (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
</li>
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
),
)}
</List>
......
frontend/src/metabase/reference/metrics/MetricList.jsx
+ 8
− 11
View file @ 51c46658
......@@ -63,20 +63,17 @@ class MetricList extends Component {
<div className="wrapper wrapper--trim">
<List>
{Object.values(entities).map(
(entity, index) =>
entity =>
entity &&
entity.id &&
entity.name && (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/metrics/${entity.id}`}
icon="ruler"
/>
</li>
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/metrics/${entity.id}`}
icon="ruler"
/>
),
)}
</List>
......
frontend/src/metabase/reference/metrics/MetricQuestions.jsx
+ 10
− 13
View file @ 51c46658
......@@ -82,22 +82,19 @@ class MetricQuestions extends Component {
<div className="wrapper wrapper--trim">
<List>
{Object.values(entities).map(
(entity, index) =>
entity =>
entity &&
entity.id &&
entity.name && (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
</li>
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
),
)}
</List>
......
frontend/src/metabase/reference/segments/SegmentList.jsx
+ 8
− 11
View file @ 51c46658
......@@ -63,20 +63,17 @@ class SegmentList extends Component {
<div className="wrapper wrapper--trim">
<List>
{Object.values(entities).map(
(entity, index) =>
entity =>
entity &&
entity.id &&
entity.name && (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/segments/${entity.id}`}
icon="segment"
/>
</li>
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={entity.description}
url={`/reference/segments/${entity.id}`}
icon="segment"
/>
),
)}
</List>
......
frontend/src/metabase/reference/segments/SegmentQuestions.jsx
+ 10
− 13
View file @ 51c46658
......@@ -81,22 +81,19 @@ class SegmentQuestions extends Component {
<div className="wrapper wrapper--trim">
<List>
{Object.values(entities).map(
(entity, index) =>
entity =>
entity &&
entity.id &&
entity.name && (
<li className="relative" key={entity.id}>
<ListItem
id={entity.id}
index={index}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
</li>
<ListItem
key={entity.id}
name={entity.display_name || entity.name}
description={t`Created ${moment(
entity.created_at,
).fromNow()} by ${entity.creator.common_name}`}
url={Urls.question(entity)}
icon={visualizations.get(entity.display).iconName}
/>
),
)}
</List>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment