Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: support markdown in update messages#12273

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.

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

Already on GitHub?Sign in to your account

Merged
aslilac merged 5 commits intomainfrommarkdown-update-message
Feb 22, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
44 changes: 44 additions & 0 deletionssite/src/modules/templates/TemplateUpdateMessage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC } from "react";
import { MemoizedMarkdown } from "components/Markdown/Markdown";

interface TemplateUpdateMessageProps {
children: string;
}

export const TemplateUpdateMessage: FC<TemplateUpdateMessageProps> = ({
children,
}) => {
return (
<MemoizedMarkdown css={styles.versionMessage}>{children}</MemoizedMarkdown>
);
};

const styles = {
versionMessage: {
fontSize: 14,
lineHeight: 1.2,

"& h1, & h2, & h3, & h4, & h5, & h6": {
margin: "0 0 0.75em",
},
"& h1": {
fontSize: "1.2em",
},
"& h2": {
fontSize: "1.15em",
},
"& h3": {
fontSize: "1.1em",
},
"& h4": {
fontSize: "1.05em",
},
"& h5": {
fontSize: "1em",
},
"& h6": {
fontSize: "0.95em",
},
},
} satisfies Record<string, Interpolation<Theme>>;
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,7 @@ import {
mockApiError,
MockTemplate,
MockTemplateVersion,
MockTemplateVersionWithMarkdownMessage,
} from "testHelpers/entities";
import {
TemplateVersionPageView,
Expand DownExpand Up@@ -45,6 +46,12 @@ type Story = StoryObj<typeof TemplateVersionPageView>;

export const Default: Story = {};

export const LongVersionMessage: Story = {
args: {
currentVersion: MockTemplateVersionWithMarkdownMessage,
},
};

export const Error: Story = {
args: {
...defaultArgs,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,6 @@ import { Margins } from "components/Margins/Margins";
import {
PageHeader,
PageHeaderCaption,
PageHeaderSubtitle,
PageHeaderTitle,
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
Expand All@@ -18,6 +17,7 @@ import type { TemplateVersion } from "api/typesGenerated";
import { createDayString } from "utils/createDayString";
import { TemplateVersionFiles } from "utils/templateVersion";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";

export interface TemplateVersionPageViewProps {
versionName: string;
Expand DownExpand Up@@ -65,17 +65,17 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
>
<PageHeaderCaption>Version</PageHeaderCaption>
<PageHeaderTitle>{versionName}</PageHeaderTitle>
{currentVersion &&
currentVersion.message &&
currentVersion.message !== "" && (
<PageHeaderSubtitle>{currentVersion.message}</PageHeaderSubtitle>
)}
</PageHeader>

{!currentFiles && !error && <Loader />}

<Stack spacing={4}>
{Boolean(error) && <ErrorAlert error={error} />}
{currentVersion?.message && (
<TemplateUpdateMessage>
{currentVersion.message}
</TemplateUpdateMessage>
)}
{currentVersion && currentFiles && (
<>
<Stats>
Expand Down
49 changes: 49 additions & 0 deletionssite/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
import {
MockTemplate,
MockTemplateVersion,
MockTemplateVersionWithMarkdownMessage,
} from "testHelpers/entities";
import type { Meta, StoryObj } from "@storybook/react";
import { ChangeVersionDialog } from "./ChangeVersionDialog";

const noMessage = {
...MockTemplateVersion,
message: "",
};

const meta: Meta<typeof ChangeVersionDialog> = {
title: "pages/WorkspacePage/ChangeVersionDialog",
component: ChangeVersionDialog,
args: {
open: true,
template: MockTemplate,
templateVersions: [
MockTemplateVersion,
MockTemplateVersionWithMarkdownMessage,
noMessage,
],
},
};

export default meta;
type Story = StoryObj<typeof ChangeVersionDialog>;

export const NoVersionSelected: Story = {};

export const NoMessage: Story = {
args: {
defaultTemplateVersion: noMessage,
},
};

export const ShortMessage: Story = {
args: {
defaultTemplateVersion: MockTemplateVersion,
},
};

export const LongMessage: Story = {
args: {
defaultTemplateVersion: MockTemplateVersionWithMarkdownMessage,
},
};
23 changes: 15 additions & 8 deletionssite/src/pages/WorkspacePage/ChangeVersionDialog.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import AlertTitle from "@mui/material/AlertTitle";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import { css } from "@emotion/css";
import type { Template, TemplateVersion } from "api/typesGenerated";
import { Alert, AlertDetail } from "components/Alert/Alert";
import { Alert } from "components/Alert/Alert";
import type { DialogProps } from "components/Dialogs/Dialog";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { FormFields } from "components/Form/Form";
Expand All@@ -16,6 +16,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
import { Pill } from "components/Pill/Pill";
import { Avatar } from "components/Avatar/Avatar";
import { createDayString } from "utils/createDayString";
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";

export type ChangeVersionDialogProps = DialogProps & {
template: Template | undefined;
Expand All@@ -34,7 +35,9 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
...dialogProps
}) => {
const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
const selectedTemplateVersion = useRef<TemplateVersion | undefined>();
const selectedTemplateVersion = useRef<TemplateVersion | undefined>(
defaultTemplateVersion,
);
const version = selectedTemplateVersion.current;
const validTemplateVersions = templateVersions?.filter((version) => {
return version.job.status === "succeeded";
Expand DownExpand Up@@ -138,14 +141,18 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
/>
</FormFields>
{version && (
<Alert severity="info">
<AlertTitle>
Published by {version.created_by.username}
</AlertTitle>
<>
{version.message && (
<AlertDetail>{version.message}</AlertDetail>
<TemplateUpdateMessage>
{version.message}
</TemplateUpdateMessage>
)}
</Alert>
<Alert severity="info">
<AlertTitle>
Published by {version.created_by.username}
</AlertTitle>
</Alert>
</>
)}
</>
) : (
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,21 +22,22 @@ type NotificationsProps = {
items: NotificationItem[];
severity: ThemeRole;
icon: ReactNode;
isDefaultOpen?: boolean;
};

export const Notifications: FC<NotificationsProps> = ({
items,
severity,
icon,
isDefaultOpen,
}) => {
const theme = useTheme();

return (
<Popover mode="hover" isDefaultOpen={isDefaultOpen}>
<Popover mode="hover">
<PopoverTrigger>
<div css={styles.pillContainer}>
<div
css={styles.pillContainer}
data-testid={`${severity}-notifications`}
>
<NotificationPill items={items} severity={severity} icon={icon} />
</div>
</PopoverTrigger>
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp