Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add project slug tooltip to each link in the linked projects list (#2617) #2707

Merged
merged 6 commits into from
Aug 7, 2023
Merged

feat: Add project slug tooltip to each link in the linked projects list (#2617) #2707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0c0bd64
Add project slug tooltip to each link in the linked projects list.
andre-code Jul 27, 2023
552c238
include everything imported from React in a single line
andre-code Aug 2, 2023
eb37f0e
Merge branch 'master' into 2617-show-friendly-name-slug-in-other-links
andre-code Aug 2, 2023
c7d4615
Merge branch 'master' into 2617-show-friendly-name-slug-in-other-links
lorenzo-cavazzi Aug 3, 2023
5ff211b
Merge branch 'master' into 2617-show-friendly-name-slug-in-other-links
lorenzo-cavazzi Aug 4, 2023
cb9b80f
Merge branch 'master' into 2617-show-friendly-name-slug-in-other-links
lorenzo-cavazzi Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 42 additions & 20 deletions client/src/components/entities/LinkedEntitiesByItemType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
* limitations under the License.
*/

import * as React from "react";
import React, { ReactNode, useRef } from "react";
import { UncontrolledTooltip } from "reactstrap";
import "./Entities.css";
import { Link } from "react-router-dom";
import { stylesByItemType } from "../../utils/helpers/HelperFunctions";
Expand All @@ -32,8 +33,9 @@ import { EntityType } from "./Entities";
*/

export interface EntityLinksData {
title: string;
url: string;
title: string;
tooltip?: string;
}
export interface EntityLinksHeader {
data: EntityLinksData[];
Expand All @@ -43,15 +45,15 @@ export interface EntityLinksHeader {
}

export interface LinkedEntitiesByItemTypeProps {
devAccess: boolean;
itemType: EntityType;
links?: EntityLinksHeader;
devAccess: boolean;
url: string;
}
function LinkedEntitiesByItemType({
devAccess,
itemType,
links,
devAccess,
url,
}: LinkedEntitiesByItemTypeProps) {
if (!links) return null;
Expand Down Expand Up @@ -82,7 +84,6 @@ function LinkedEntitiesByItemType({
icon: <Briefcase />,
},
};
const stylesByItem = stylesByItemType(itemType);

const addDatasetLink =
devAccess && itemType === "project" ? (
Expand Down Expand Up @@ -116,21 +117,14 @@ function LinkedEntitiesByItemType({
) : null}
</small>
) : null}
{links.data.map((link) => {
// ? URl without the final slash aren't working well with the current Datasets elements
const fixedUrl = link.url.endsWith("/") ? link.url : link.url + "/";
return (
<div className="d-grid" key={link.title}>
<Link
className={`${stylesByItem.colorText} linked-entities-link text-truncate`}
to={fixedUrl}
>
{dataByItem[itemType].icon}
{link.title}
</Link>
</div>
);
})}
{links.data.map((link) => (
<LinkedItem
key={link.url}
link={link}
itemType={itemType}
icon={dataByItem[itemType].icon}
/>
))}
{links.total > 3 ? (
<SeeMoreByType
itemType={itemType}
Expand Down Expand Up @@ -179,4 +173,32 @@ function SeeMoreByType({ itemType, text, linkTo }: SeeMoreByTypeProps) {
}
}

interface LinkedItemProps {
icon: ReactNode;
itemType: EntityType;
link: EntityLinksData;
}
function LinkedItem({ icon, itemType, link }: LinkedItemProps) {
const stylesByItem = stylesByItemType(itemType);
const linkRef = useRef(null);
return (
<>
<div className="d-flex" key={link.title}>
<Link
ref={linkRef}
className={`${stylesByItem.colorText} linked-entities-link text-truncate`}
to={link.url}
>
{icon}
{link.title}
</Link>
</div>
{link.tooltip && (
<UncontrolledTooltip target={linkRef}>
{link.tooltip}
</UncontrolledTooltip>
)}
</>
);
}
export default LinkedEntitiesByItemType;
1 change: 1 addition & 0 deletions client/src/dataset/Dataset.present.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ function getLinksDatasetHeader(projects) {
linksHeader.data.push({
title: project.name,
url: `/projects/${project.path}`,
tooltip: project.path,
});
});
}
Expand Down