@digital-ai/plugin-dai-release
Version:
Frontend functionalities for the dai-release backstage plugin
115 lines (112 loc) • 4.69 kB
JavaScript
import { DotCard, DotCardHeader, DotCardContent, DotTypography, DotCardFooter, DotChip, DotIcon, DotButton, DotAvatar, DotLink } from '@digital-ai/dot-components';
import { ChipGroup } from '../ChipGroup/ChipGroupComponent.esm.js';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
workflowCard: {
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
textAlign: "left",
"& .dot-card-content": {
paddingTop: 0,
paddingBottom: 0
},
"& .dot-card-bottom-spacing": {
padding: "0 0 16px 0",
"& .dot-card-description": {
fontSize: "14px"
}
},
"& .dot-card-top-bottom-spacing": {
padding: "16px 0"
},
"& .folder-chip-section, & .categories-chip-section": {
display: "flex",
alignItems: "center",
gap: "8px"
},
"& .categories-chip-section": {
flexWrap: "wrap"
},
"& .run-workflow-btn": {
margin: 0,
borderColor: "rgb(164, 172, 182) !important",
width: "97%",
marginTop: "30px !important"
},
"& .run-workflow-btn-dark": {
backgroundColor: "rgb(158, 182, 207) !important",
color: "rgb(0, 0, 0) !important"
},
"& .run-workflow-btn-light": {
backgroundColor: "rgb(255, 255, 255) !important"
},
"& .dot-card-header-title": {
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
whiteSpace: "normal",
overflowWrap: "break-word",
fontSize: "17px"
},
"& .dot-card-title-font": {
fontSize: "17px"
},
"& .MuiButton-root": {
textTransform: "none"
}
}
}));
const WorkflowCard = ({
workflow,
onClick,
backstageTheme
}) => {
const { id, title, author, folderTitle, logoLink, git } = workflow;
const classes = useStyles();
const handleOnOpen = () => {
onClick(id);
};
const cardLogo = logoLink ? /* @__PURE__ */ React.createElement(DotAvatar, { alt: title, imageSrc: logoLink, type: "image" }) : /* @__PURE__ */ React.createElement(DotAvatar, { alt: title, iconId: "workflow", type: "icon" });
const renderCommitLink = () => {
if (!git.commitId) return "";
const commitHash = git.commitId;
const gitLink = git.repoLink ? git.repoLink : void 0;
return /* @__PURE__ */ React.createElement("div", { className: "dot-card-bottom-spacing" }, /* @__PURE__ */ React.createElement(DotTypography, { variant: "body1" }, /* @__PURE__ */ React.createElement("strong", { style: { fontSize: "14px" } }, "Git version: "), gitLink ? /* @__PURE__ */ React.createElement(DotLink, { href: gitLink, target: "_blank" }, commitHash) : /* @__PURE__ */ React.createElement(React.Fragment, null, commitHash)));
};
return /* @__PURE__ */ React.createElement(DotCard, { className: classes.workflowCard }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
DotCardHeader,
{
avatar: cardLogo,
subheader: author ? `by ${author}` : void 0,
subheaderSize: "small",
title,
titleSize: "small",
titleMaxLines: 10,
className: "dot-card-title-font"
}
), /* @__PURE__ */ React.createElement(DotCardContent, null, /* @__PURE__ */ React.createElement("div", { className: "dot-card-bottom-spacing" }, /* @__PURE__ */ React.createElement(DotTypography, { variant: "body1", className: "dot-card-description" }, workflow?.description?.split("\n\n").map((paragraph, index) => /* @__PURE__ */ React.createElement("p", { key: index }, paragraph)))))), /* @__PURE__ */ React.createElement(DotCardFooter, null, renderCommitLink(), /* @__PURE__ */ React.createElement("div", { className: "dot-card-top-bottom-spacing folder-chip-section" }, /* @__PURE__ */ React.createElement(DotTypography, { variant: "subtitle2" }, "Folder:"), /* @__PURE__ */ React.createElement(
DotChip,
{
"data-testid": "folder-chip",
size: "small",
startIcon: /* @__PURE__ */ React.createElement(DotIcon, { iconId: "folder" }),
children: folderTitle,
charactersLimit: 18
}
)), /* @__PURE__ */ React.createElement("div", { className: "categories-chip-section" }, /* @__PURE__ */ React.createElement(ChipGroup, { labels: workflow.categories })), /* @__PURE__ */ React.createElement(
DotButton,
{
className: `run-workflow-btn
${backstageTheme === "dark" ? "run-workflow-btn-dark" : "run-workflow-btn-light"}`,
onClick: handleOnOpen,
type: "outlined"
},
"Run workflow"
)));
};
export { WorkflowCard };
//# sourceMappingURL=WorkflowCardComponent.esm.js.map