feat: [code-980]: add branch protection alert on pr page (#770)

web/src/components/RuleViolationAlertModal/RuleViolationAlertModal.module.scss

@@ -0,0 +1,20 @@
+.dialog {
+ max-width: 500px;
+}
+
+.warningIcon {
+ padding-right: var(--spacing-medium) !important;
+}
+
+.ruleText {
+ color: var(--red-700) !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+}
+
+.ruleContainer {
+ border-radius: 4px !important;
+ background: var(--primary-bg) !important;
+ width: 380px !important;
+ height: 36px !important;
+}

web/src/components/RuleViolationAlertModal/RuleViolationAlertModal.module.scss.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http:https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const dialog: string
+export declare const ruleContainer: string
+export declare const ruleText: string
+export declare const warningIcon: string

web/src/components/RuleViolationAlertModal/RuleViolationAlertModal.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Button, ButtonVariation, Container, Dialog, Layout, Text } from '@harnessio/uicore'
+import { Color, FontVariation } from '@harnessio/design-system'
+import { useStrings } from 'framework/strings'
+import type { Violation } from 'utils/Utils'
+import css from './RuleViolationAlertModal.module.scss'
+interface ViolationAlertModalProps {
+ setOpen: (val: boolean) => void
+ open: boolean
+ title: string
+ text: string
+ rules: Violation[] | undefined
+}
+
+const RuleViolationAlertModal = (props: ViolationAlertModalProps) => {
+ const { title, text, rules, setOpen, open } = props
+ const { getString } = useStrings()
+
+ return (
+ <Dialog
+ className={css.dialog}
+ onClose={() => {
+ setOpen(false)
+ }}
+ isOpen={open}>
+ <Container>
+ <Text
+ icon={'warning-sign'}
+ iconProps={{ color: Color.RED_600, size: 20, className: css.warningIcon }}
+ font={{ variation: FontVariation.H4 }}
+ padding={{ right: 'small' }}>
+ {title}
+ </Text>
+ <Text padding={{ top: 'medium' }} font={{ variation: FontVariation.BODY2 }}>
+ {text}
+ </Text>
+ <Layout.Vertical spacing="small" padding={{ top: 'medium', bottom: 'medium' }}>
+ {rules?.map((rule, idx) => {
+ return (
+ <Container key={`violation-${idx}`} flex={{ alignItems: 'center' }} className={css.ruleContainer}>
+ <Text padding="small" className={css.ruleText}>
+ {rule.violation}
+ </Text>
+ </Container>
+ )
+ })}
+ </Layout.Vertical>
+ <Layout.Horizontal spacing="small">
+ <Button
+ variation={ButtonVariation.TERTIARY}
+ text={getString('cancel')}
+ onClick={() => {
+ setOpen(false)
+ }}></Button>
+ </Layout.Horizontal>
+ </Container>
+ </Dialog>
+ )
+}
+
+export default RuleViolationAlertModal

web/src/framework/strings/stringTypes.ts

@@ -68,10 +68,14 @@ export interface StringsMap {
  'branchProtection.enableTheRule': string
  'branchProtection.limitMergeStrategies': string
  'branchProtection.limitMergeStrategiesText': string
+ 'branchProtection.mergeCheckboxAlert': string
+ 'branchProtection.mergePrAlertText': string
+ 'branchProtection.mergePrAlertTitle': string
  'branchProtection.minNumber': string
  'branchProtection.minNumberPlaceholder': string
  'branchProtection.namePlaceholder': string
  'branchProtection.newRule': string
+ 'branchProtection.prFailedText': string
  'branchProtection.protectionSelectAll': string
  'branchProtection.reqCommentResolutionText': string
  'branchProtection.reqCommentResolutionTitle': string

web/src/i18n/strings.en.yaml

@@ -904,3 +904,7 @@ branchProtection:
  ruleCreated: Rule Created
  blockMergeWithoutPr: Block merge without pull request
  blockMergeWithoutPrText: Do not allow directly merging to the branch without a pull request
+ prFailedText: 'This branch has no conflicts with the base branch. {{ruleCount}} branch rules failed'
+ mergePrAlertTitle: Merge pull request alert
+ mergePrAlertText: 'Merge cannot be completed. {{ruleCount}} branch rules failed: '
+ mergeCheckboxAlert: Bypass branch rules and merge

web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss

@@ -31,6 +31,9 @@
  &.error {
  background-color: var(--red-50) !important;
  }
+ &.ruleViolation {
+ background-color: var(--red-50) !important;
+ }
 
  &.closed {
  background-color: var(--grey-100) !important;
@@ -91,6 +94,9 @@
  &.unchecked {
  color: #c05809 !important; // Note: No UICore color variable for this text
  }
+ &.ruleViolate {
+ color: var(--red-500) !important;
+ }
  }
 }
 
@@ -129,6 +135,16 @@
 }
 
 .btnWrapper {
+ &.hasRuleViolated button {
+ --background-color: var(--grey-50) !important;
+ --background-color-hover: var(--white) !important;
+ --background-color-active: var(--grey-100) !important;
+ }
+
+ &.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+ }
  &.hasError button {
  --background-color: var(--grey-50) !important;
  --background-color-hover: var(--white) !important;
@@ -153,3 +169,12 @@
  background: #e8e8ff !important;
  padding: 2px 5px !important;
 }
+
+.viewDetailsBtn {
+ margin-bottom: 3px !important;
+}
+
+.checkbox {
+ padding-top: 8px !important;
+ padding-right: var(--spacing-medium) !important;
+}

web/src/pages/PullRequest/Conversation/PullRequestActionsBox/PullRequestActionsBox.module.scss.d.ts

@@ -18,11 +18,13 @@
 // This is an auto-generated file
 export declare const btn: string
 export declare const btnWrapper: string
+export declare const checkbox: string
 export declare const closed: string
 export declare const disabled: string
 export declare const draft: string
 export declare const error: string
 export declare const hasError: string
+export declare const hasRuleViolated: string
 export declare const heading: string
 export declare const layout: string
 export declare const main: string
@@ -31,7 +33,10 @@ export declare const menuReviewItem: string
 export declare const mergeContainer: string
 export declare const merged: string
 export declare const popover: string
+export declare const ruleViolate: string
+export declare const ruleViolation: string
 export declare const secondaryButton: string
 export declare const sub: string
 export declare const unchecked: string
 export declare const unmergeable: string
+export declare const viewDetailsBtn: string