feat: Update react-syntax-highlighter to latest version and use a11yDark style

This commit updates the react-syntax-highlighter package to the latest version and switches to the a11yDark style for syntax highlighting in the MarkdownViewer component. This update ensures compatibility with the latest features and improvements of react-syntax-highlighter and enhances the accessibility of the code snippets in the MarkdownViewer.
This commit is contained in:
Simon Larsen 2024-07-14 15:40:10 -06:00
parent c5062b5bc5
commit 0f0f2c1b81
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
7 changed files with 37 additions and 21 deletions

View File

@ -3,9 +3,8 @@ import React, { FunctionComponent, ReactElement } from "react";
import ReactMarkdown from "react-markdown";
// https://github.com/remarkjs/remark-gfm
import remarkGfm from "remark-gfm";
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
export interface ComponentProps {
text: string;
@ -78,23 +77,28 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
ul: ({ ...props }: any) => {
return <ul className="list-disc px-6 m-1" {...props} />;
},
code: (props) => {
const {children, className, node, ...rest} = props
const match = /language-(\w+)/.exec(className || '')
code: (props: any) => {
const { children, className, ...rest } = props;
const match: RegExpExecArray | null = /language-(\w+)/.exec(
className || "",
);
const content: string = String(children).replace(/\n$/, "");
return match ? (
<SyntaxHighlighter
{...rest}
PreTag="div"
children={String(children).replace(/\n$/, '')}
children={content}
language={match[1]}
style={dark}
style={a11yDark}
/>
) : (
<code {...rest} className={className}>
{children}
</code>
)
}
);
},
}}
remarkPlugins={[remarkGfm]}
>

View File

@ -347,7 +347,7 @@ const setUpRepository: PromiseVoidFunction = async (): Promise<void> => {
logger.info(
"Repository setup PR created - #" +
pullRequest.pullRequestId +
pullRequest.pullRequestNumber +
". Please megre this PR to continue using Copilot. Exiting..",
);

View File

@ -102,12 +102,14 @@ export default class CodeRepositoryUtil {
throw new BadDataException("Repository Name is required");
}
if (!this.gitHubUtil) {
const githubUtil: GitHubUtil = this.getGitHubUtil();
if (!githubUtil) {
throw new BadDataException("GitHub Util is required");
}
const pullRequest: PullRequest | undefined =
await this.gitHubUtil.getPullRequestByNumber({
await githubUtil.getPullRequestByNumber({
organizationName:
this.codeRepositoryResult.codeRepository.organizationName,
repositoryName: this.codeRepositoryResult.codeRepository.repositoryName,
@ -135,7 +137,9 @@ export default class CodeRepositoryUtil {
"/usr/src/app/Templates/.oneuptime",
);
const repoPath: string = this.getLocalRepositoryPath();
const oneUptimeConfigPath: string = LocalFile.sanitizeFilePath(
this.getLocalRepositoryPath() + "/.oneuptime",
);
// create a new branch called oneuptime-copilot-setup
@ -145,9 +149,11 @@ export default class CodeRepositoryUtil {
branchName: branchName,
});
await LocalFile.makeDirectory(oneUptimeConfigPath);
await LocalFile.copyDirectory({
source: templateFolderPath,
destination: repoPath,
destination: oneUptimeConfigPath,
});
// add all the files to the git.
@ -277,7 +283,11 @@ export default class CodeRepositoryUtil {
}
public static async executeScript(data: { script: string }): Promise<string> {
const commands: Array<string> = data.script.split("\n");
const commands: Array<string> = data.script
.split("\n")
.filter((command: string) => {
return command.trim() !== "" && !command.startsWith("#");
});
const results: Array<string> = [];

View File

@ -18,8 +18,11 @@ const PullRequestViewElement: FunctionComponent<ComponentProps> = (
`https://github.com/${props.organizationName}/${props.repositoryName}/pull/${props.pullRequestId}`,
);
return (
<Link to={to} openInNewTab={true}>
{props.pullRequestId}
<Link to={to} className="hover:underline" openInNewTab={true}>
<>
<span>#</span>
{props.pullRequestId}
</>
</Link>
);
}

View File

@ -19,7 +19,7 @@ const CopilotLastRunAt: FunctionComponent<ComponentProps> = (
{props.lastRunAt && (
<Alert
type={AlertType.INFO}
strongTitle="Last Run At: "
strongTitle="Copilot Last Ran At"
title={`${OneUptimeDate.getDateAsLocalFormattedString(props.lastRunAt)}.`}
/>
)}

View File

@ -378,6 +378,7 @@ services:
ONEUPTIME_LLM_SERVER_URL: ${COPILOT_ONEUPTIME_LLM_SERVER_URL}
DISABLE_COPILOT: ${DISABLE_COPILOT}
OPENAI_API_KEY: ${COPILOT_OPENAI_API_KEY}
LOG_LEVEL: ${LOG_LEVEL}
logging:
driver: "local"
options:

View File

@ -356,8 +356,6 @@ services:
extends:
file: ./docker-compose.base.yml
service: copilot
environment:
- LOG_LEVEL=INFO
build:
network: host
context: .