github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-06 17:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: [code-1099]: fix image upload and text in protection form and spacing (#797)

Browse Source
This commit is contained in:
Calvin Lee 2023-11-14 08:20:52 +00:00 committed by Harness
parent fcf9ce6a5d
commit 5f2c81b2af
13 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/BranchProtection/BranchProtectionForm/ProtectionRulesForm/ProtectionRulesForm.tsx
View File

@ -66,7 +66,7 @@ const ProtectionRulesForm = (props: {
name={'blockBranchDeletion'}
/>
<Text padding={{ left: 'xlarge' }} className={css.checkboxText}>
{getString('branchProtection.blockBranchCreationText')}
{getString('branchProtection.blockBranchDeletionText')}
</Text>
<hr className={css.dividerContainer} />
<FormInput.CheckBox

8
web/src/components/CommentBox/CommentBox.tsx
View File

@ -108,6 +108,7 @@ interface CommentBoxProps<T> {
enableReplyPlaceHolder?: boolean
repoMetadata: TypesRepository | undefined
standalone: boolean
routingId: string
}
export const CommentBox = <T = unknown,>({
@ -130,7 +131,8 @@ export const CommentBox = <T = unknown,>({
autoFocusAndPosition,
enableReplyPlaceHolder,
repoMetadata,
standalone
standalone,
routingId
}: CommentBoxProps<T>) => {
const { getString } = useStrings()
const [comments, setComments] = useState<CommentItem<T>[]>(commentItems)
@ -246,6 +248,7 @@ export const CommentBox = <T = unknown,>({
<Falsy>
<Container className={cx(css.newCommentContainer, { [css.hasThread]: !!comments.length })}>
<MarkdownEditorWithPreview
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
className={editorClassName}
@ -324,7 +327,7 @@ const CommentsThread = <T = unknown,>({
repoMetadata
}: CommentsThreadProps<T>) => {
const { getString } = useStrings()
const { standalone } = useAppContext()
const { standalone, routingId } = useAppContext()
const [editIndexes, setEditIndexes] = useState<Record<number, boolean>>({})
const resetStateAtIndex = useCallback(
(index: number) => {
@ -429,6 +432,7 @@ const CommentsThread = <T = unknown,>({
<Truthy>
<Container className={css.editCommentContainer}>
<MarkdownEditorWithPreview
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
value={commentItem?.content}

3
web/src/components/DiffViewer/DiffViewer.tsx
View File

@ -105,7 +105,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
commitRange,
scrollElement
}) => {
const { routes } = useAppContext()
const { routes, routingId } = useAppContext()
const { getString } = useStrings()
const viewedPath = useMemo(
() => `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/file-views`,
@ -228,6 +228,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
ReactDOM.render(
<AppWrapper>
<CommentBox
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
commentItems={comment.commentItems}

10
web/src/components/Editor/Editor.tsx
View File

@ -52,6 +52,7 @@ export interface EditorProps {
repoMetadata: TypesRepository | undefined
inGitBlame?: boolean
standalone: boolean
routingId?: string
}
export const Editor = React.memo(function CodeMirrorReactEditor({
@ -71,7 +72,8 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
darkTheme,
repoMetadata,
inGitBlame = false,
standalone
standalone,
routingId
}: EditorProps) {
const { showError } = useToaster()
const { getString } = useStrings()
@ -100,7 +102,7 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
const updateContentWithoutStateChange = () => {
setUploading(true)
if (view.current && markdownContent) {
if (view.current && markdownContent && !inGitBlame) {
const currentContent = view.current.state.doc.toString()
const markdownInsert = `![image](${markdownContent})`
// Create a transaction to update the document content
@ -200,7 +202,9 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
}
}, [filename, forMarkdown, view, languageConfig, markdownLanguageSupport])
const handleUploadCallback = (file: File) => {
handleUpload(file, setMarkdownContent, repoMetadata, showError, standalone)
if (!inGitBlame) {
handleUpload(file, setMarkdownContent, repoMetadata, showError, standalone, routingId)
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleDropForUpload = async (event: any) => {

8
web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx
View File

@ -96,6 +96,7 @@ interface MarkdownEditorWithPreviewProps {
autoFocusAndPosition?: boolean
repoMetadata: TypesRepository | undefined
standalone: boolean
routingId: string
}
export function MarkdownEditorWithPreview({
@ -114,11 +115,11 @@ export function MarkdownEditorWithPreview({
autoFocusAndPosition,
secondarySaveButton: SecondarySaveButton,
repoMetadata,
standalone
standalone,
routingId
}: MarkdownEditorWithPreviewProps) {
const { getString } = useStrings()
const fileInputRef = useRef<HTMLInputElement>(null)
const [selectedTab, setSelectedTab] = useState(MarkdownEditorTab.WRITE)
const viewRef = useRef<EditorView>()
const containerRef = useRef<HTMLDivElement>(null)
@ -366,7 +367,7 @@ export function MarkdownEditorWithPreview({
variation={ButtonVariation.PRIMARY}
disabled={false}
onClick={() => {
handleUpload(file as File, setMarkdownContent, repoMetadata, showError, standalone)
handleUpload(file as File, setMarkdownContent, repoMetadata, showError, standalone, routingId)
setOpen(false)
setFile(undefined)
}}
@ -420,6 +421,7 @@ export function MarkdownEditorWithPreview({
</Container>
<Container className={css.tabContent}>
<Editor
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
forMarkdown

3
web/src/pages/Compare/Compare.tsx
View File

@ -58,7 +58,7 @@ import css from './Compare.module.scss'
export default function Compare() {
const { getString } = useStrings()
const history = useHistory()
const { routes, standalone } = useAppContext()
const { routes, standalone, routingId } = useAppContext()
const { repoMetadata, error, loading, diffRefs } = useGetRepositoryMetadata()
const [sourceGitRef, setSourceGitRef] = useState(diffRefs.sourceGitRef)
const [targetGitRef, setTargetGitRef] = useState(diffRefs.targetGitRef)
@ -243,6 +243,7 @@ export default function Compare() {
<Layout.Vertical spacing="small">
<Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('description')}</Text>
<MarkdownEditorWithPreview
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
value={description}

4
web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss
View File

@ -160,3 +160,7 @@
.waitingContainer {
justify-content: unset !important;
}
.codeOwner {
--layout-spacing: 1px !important;
}

1
web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss.d.ts vendored
View File

@ -19,6 +19,7 @@
export declare const approvalText: string
export declare const checks: string
export declare const circle: string
export declare const codeOwner: string
export declare const codeOwnerTable: string
export declare const desc: string
export declare const layout: string

6
web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.tsx
View File

@ -44,6 +44,7 @@ import css from './CodeOwnersOverview.module.scss'
interface ChecksOverviewProps extends Pick<GitInfoProps, 'repoMetadata' | 'pullRequestMetadata'> {
prChecksDecisionResult: PRChecksDecisionResult
codeOwners?: TypesCodeOwnerEvaluation
standalone: boolean
}
enum CodeOwnerReqDecision {
@ -56,7 +57,8 @@ export function CodeOwnersOverview({
codeOwners,
repoMetadata,
pullRequestMetadata,
prChecksDecisionResult
prChecksDecisionResult,
standalone
}: ChecksOverviewProps) {
const { getString } = useStrings()
const [isExpanded, toggleExpanded] = useToggle(false)
@ -100,7 +102,7 @@ export function CodeOwnersOverview({
const { borderColor, message, overallStatus } = checkEntries(changeReqEntries, waitingEntries, approvalEntries)
return codeOwners?.evaluation_entries?.length ? (
<Container
className={css.main}
className={cx(css.main, { [css.codeOwner]: !standalone })}
margin={{ top: 'medium', bottom: pullRequestMetadata.description ? undefined : 'large' }}
style={{ '--border-color': Utils.getRealCSSColor(borderColor) } as React.CSSProperties}>
<Match expr={isExpanded}>

8
web/src/pages/PullRequest/Conversation/Conversation.tsx
View File

@ -51,6 +51,7 @@ export interface ConversationProps extends Pick<GitInfoProps, 'repoMetadata' | '
onCancelEditDescription: () => void
prChecksDecisionResult?: PRChecksDecisionResult
standalone: boolean
routingId: string
}
export const Conversation: React.FC<ConversationProps> = ({
@ -61,7 +62,8 @@ export const Conversation: React.FC<ConversationProps> = ({
showEditDescription,
onCancelEditDescription,
prChecksDecisionResult,
standalone
standalone,
routingId
}) => {
const { getString } = useStrings()
const { currentUser } = useAppContext()
@ -187,6 +189,7 @@ export const Conversation: React.FC<ConversationProps> = ({
const newCommentBox = useMemo(() => {
return (
<CommentBox
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
fluid
@ -254,6 +257,7 @@ export const Conversation: React.FC<ConversationProps> = ({
}
title={
<CommentBox
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
key={threadId}
@ -383,6 +387,7 @@ export const Conversation: React.FC<ConversationProps> = ({
)}
{codeOwners && prChecksDecisionResult && (
<CodeOwnersOverview
standalone={standalone}
codeOwners={codeOwners}
repoMetadata={repoMetadata}
pullRequestMetadata={pullRequestMetadata}
@ -392,6 +397,7 @@ export const Conversation: React.FC<ConversationProps> = ({
{(hasDescription || showEditDescription) && (
<DescriptionBox
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
pullRequestMetadata={pullRequestMetadata}

4
web/src/pages/PullRequest/Conversation/DescriptionBox.tsx
View File

@ -37,7 +37,8 @@ export const DescriptionBox: React.FC<DescriptionBoxProps> = ({
pullRequestMetadata,
onCommentUpdate: refreshPullRequestMetadata,
onCancelEditDescription,
standalone
standalone,
routingId
}) => {
const [edit, setEdit] = useState(false)
const [dirty, setDirty] = useState(false)
@ -64,6 +65,7 @@ export const DescriptionBox: React.FC<DescriptionBoxProps> = ({
<Container padding={!edit ? { left: 'small', bottom: 'small' } : undefined}>
{(edit && (
<MarkdownEditorWithPreview
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata}
value={content}

3
web/src/pages/PullRequest/PullRequest.tsx
View File

@ -47,7 +47,7 @@ const SSE_EVENTS = ['pullreq_updated']
export default function PullRequest() {
const history = useHistory()
const { getString } = useStrings()
const { routes, standalone } = useAppContext()
const { routes, standalone, routingId } = useAppContext()
const space = useGetSpaceParam()
const {
repoMetadata,
@ -240,6 +240,7 @@ export default function PullRequest() {
),
panel: (
<Conversation
routingId={routingId}
standalone={standalone}
repoMetadata={repoMetadata as TypesRepository}
pullRequestMetadata={prData as TypesPullReq}

13
web/src/utils/GitUtils.ts
View File

@ -28,6 +28,7 @@ import type {
TypesPullReq,
TypesRepository
} from 'services/code'
import { getConfig } from 'services/config'
import { getErrorMessage } from './Utils'
export interface GitInfoProps {
@ -251,12 +252,13 @@ export const handleUpload = (
setMarkdownContent: (data: string) => void,
repoMetadata: TypesRepository | undefined,
showError: (message: React.ReactNode, timeout?: number | undefined, key?: string | undefined) => void,
standalone: boolean
standalone: boolean,
routingId?: string
) => {
const reader = new FileReader()
// Set up a function to be called when the load event is triggered
reader.onload = async function () {
const markdown = await uploadImage(reader.result, showError, repoMetadata, standalone)
const markdown = await uploadImage(reader.result, showError, repoMetadata, standalone, routingId)
setMarkdownContent(markdown) // Set the markdown content
}
reader.readAsArrayBuffer(blob) // This will trigger the onload function when the reading is complete
@ -267,11 +269,14 @@ export const uploadImage = async (
fileBlob: any,
showError: (message: React.ReactNode, timeout?: number | undefined, key?: string | undefined) => void,
repoMetadata: TypesRepository | undefined,
standalone: boolean
standalone: boolean,
routingId?: string
) => {
try {
const response = await fetch(
`${window.location.origin}/${standalone ? '' : 'code/'}api/v1/repos/${repoMetadata?.path}/+/uploads/`,
`${window.location.origin}${getConfig(
`code/api/v1/repos/${repoMetadata?.path}/+/uploads${standalone || !routingId ? `` : `?routingId=${routingId}`}`
)}`,
{
method: 'POST',
headers: {