Skip to content
Snippets Groups Projects
Unverified Commit 54178fe9 authored by Oisin Coveney's avatar Oisin Coveney Committed by GitHub
Browse files

Fix: Link card spacing isn't quite right on the new grid (#31715)

parent 7061a789
No related branches found
No related tags found
No related merge requests found
......@@ -171,3 +171,7 @@ export function resizeDashboardCard({ card, x, y }) {
.trigger("mouseup", { force: true });
});
}
export function createLinkCard() {
cy.icon("link").click();
}
import _ from "underscore";
import {
createLinkCard,
editDashboard,
getDashboardCard,
popover,
resizeDashboardCard,
restore,
saveDashboard,
......@@ -185,6 +188,15 @@ const TEST_QUESTIONS = [
createMockMapQuestion(),
];
const TEST_DASHBOARD_NAME = "Test Dashboard";
const TEST_QUESTION_NAME = "Test Question";
const viewports = [
[768, 800],
[1024, 800],
[1440, 800],
];
describe("scenarios > dashboard card resizing", () => {
beforeEach(() => {
restore();
......@@ -277,4 +289,84 @@ describe("scenarios > dashboard card resizing", () => {
});
});
});
describe("metabase#31701 - preventing link dashboard card overflows", () => {
viewports.forEach(([width, height]) => {
describe(`Testing on resolution ${width} x ${height}`, () => {
beforeEach(() => {
restore();
cy.signInAsAdmin();
cy.intercept("GET", "/api/search*").as("search");
cy.viewport(width, height);
});
it("should not allow links to overflow when editing dashboard", () => {
createLinkDashboard();
const entityCard = getDashboardCard(0);
const customCard = getDashboardCard(1);
const editLinkContainer = cy.findByTestId("entity-edit-display-link");
const linkContainer = cy.findByTestId("custom-edit-text-link");
assertLinkCardOverflow(editLinkContainer, entityCard);
assertLinkCardOverflow(linkContainer, customCard);
});
it("should not allow links to overflow when viewing saved dashboard", () => {
createLinkDashboard();
saveDashboard();
const entityCard = getDashboardCard(0);
const customCard = getDashboardCard(1);
const editLinkContainer = cy.findByTestId("entity-view-display-link");
const linkContainer = cy.findByTestId("custom-view-text-link");
assertLinkCardOverflow(editLinkContainer, entityCard);
assertLinkCardOverflow(linkContainer, customCard);
});
});
});
});
});
const createLinkDashboard = () => {
cy.createQuestion({
name: TEST_QUESTION_NAME,
query: {
"source-table": ORDERS_ID,
},
});
cy.createDashboard({
name: TEST_DASHBOARD_NAME,
}).then(({ body: { id: dashId } }) => {
visitDashboard(dashId);
});
editDashboard();
createLinkCard();
createLinkCard();
const entityCard = getDashboardCard(0);
const customCard = getDashboardCard(1);
entityCard.click().type(TEST_QUESTION_NAME);
popover().within(() => {
cy.findAllByTestId("search-result-item-name").first().trigger("click");
});
customCard.click().type(TEST_QUESTION_NAME);
closeLinkSearchDropdown();
};
const assertLinkCardOverflow = (card1, card2) => {
card1.then(linkElem => {
card2.then(dashCardElem => {
expect(linkElem[0].scrollHeight).to.eq(dashCardElem[0].scrollHeight);
});
});
};
const closeLinkSearchDropdown = () => {
cy.findByTestId("dashboard-parameters-and-cards").click(0, 0);
};
import styled from "@emotion/styled";
import Ellipsified from "metabase/core/components/Ellipsified";
export const EntityDisplayContainer = styled.div`
width: 100%;
......@@ -13,5 +14,9 @@ export const LeftContainer = styled.div`
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
gap: 0.5rem;
`;
export const EllipsifiedEntityContainer = styled(Ellipsified)`
flex: 1;
`;
import { t } from "ttag";
import Ellipsified from "metabase/core/components/Ellipsified";
import { Icon } from "metabase/core/components/Icon";
import { color } from "metabase/lib/colors";
import { isEmpty } from "metabase/lib/validate";
import { EntityDisplayContainer, LeftContainer } from "./EntityDisplay.styled";
import {
EllipsifiedEntityContainer,
EntityDisplayContainer,
LeftContainer,
} from "./EntityDisplay.styled";
import { WrappedUnrestrictedLinkEntity } from "./types";
export const EntityDisplay = ({
......@@ -19,7 +22,7 @@ export const EntityDisplay = ({
<EntityDisplayContainer>
<LeftContainer>
<Icon color={color("brand")} name={getSearchIconName(entity)} />
<Ellipsified>{entity?.name}</Ellipsified>
<EllipsifiedEntityContainer>{entity?.name}</EllipsifiedEntityContainer>
</LeftContainer>
{showDescription && entity?.description && (
<Icon
......@@ -36,7 +39,7 @@ export const RestrictedEntityDisplay = () => (
<EntityDisplayContainer>
<LeftContainer>
<Icon name="key" color={color("text-light")} />
<Ellipsified>{t`Sorry, you don't have permission to see this link.`}</Ellipsified>
<EllipsifiedEntityContainer>{t`Sorry, you don't have permission to see this link.`}</EllipsifiedEntityContainer>
</LeftContainer>
</EntityDisplayContainer>
);
......@@ -49,7 +52,9 @@ export const UrlLinkDisplay = ({ url }: { url?: string }) => {
<EntityDisplayContainer>
<LeftContainer>
<Icon color={color("brand")} name={urlIcon} />
<Ellipsified>{!isEmpty(url) ? url : t`Choose a link`}</Ellipsified>
<EllipsifiedEntityContainer>
{!isEmpty(url) ? url : t`Choose a link`}
</EllipsifiedEntityContainer>
</LeftContainer>
</EntityDisplayContainer>
);
......
......@@ -5,7 +5,7 @@ import { Icon } from "metabase/core/components/Icon";
import RecentsList from "metabase/nav/components/RecentsList";
export const DisplayLinkCardWrapper = styled.div`
padding: 0.5rem;
padding: 0 0.5rem;
display: flex;
width: 100%;
height: 100%;
......@@ -14,7 +14,7 @@ export const DisplayLinkCardWrapper = styled.div`
`;
export const EditLinkCardWrapper = styled.div`
padding: 0.5rem 1rem;
padding: 0 1rem;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -25,9 +25,8 @@ export const EditLinkCardWrapper = styled.div`
export const CardLink = styled(Link)`
width: 100%;
padding: 0.5rem;
padding: 0 0.5rem;
display: flex;
width: 100%;
height: 100%;
min-width: 0;
gap: 0.5rem;
......
......@@ -114,7 +114,7 @@ function LinkViz({
if (isEditing) {
return (
<EditLinkCardWrapper>
<EditLinkCardWrapper data-testid="entity-edit-display-link">
<EntityDisplay entity={wrappedEntity} showDescription={false} />
</EditLinkCardWrapper>
);
......@@ -125,6 +125,7 @@ function LinkViz({
return (
<DisplayLinkCardWrapper>
<CardLink
data-testid="entity-view-display-link"
to={wrappedEntity.getUrl()}
target={target}
rel="noreferrer"
......@@ -138,7 +139,7 @@ function LinkViz({
if (isEditing) {
return (
<EditLinkCardWrapper>
<EditLinkCardWrapper data-testid="custom-edit-text-link">
<TippyPopover
visible={inputIsFocused && !isUrlString(url)}
content={
......@@ -173,7 +174,7 @@ function LinkViz({
}
return (
<DisplayLinkCardWrapper>
<DisplayLinkCardWrapper data-testid="custom-view-text-link">
<CardLink to={url ?? ""} target="_blank" rel="noreferrer">
<UrlLinkDisplay url={url} />
</CardLink>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment