+
+ {shebang}
}
+ {state.diffMode ? (
+
+ {children}
+ {!hideDefaultSplitHeader && defaultValue &&
+ )
+}
+
+const ThemeChanger = ({}) => {
+ const { readOnly, state, dispatch } = useCodeEditorContext()
+ function handleChangeTheme(e) {
+ dispatch({ type: 'setTheme', value: e.target.value })
+ }
+
+ const themes = ['vs', 'vs-dark']
+ return (
+
+ )
+}
+
+const LanguageChanger = ({}) => {
+ const { readOnly, handleLanguageChange, state } = useCodeEditorContext()
+ if (state.noParsing) return null
+ return (
+
+ {
+ // ReactGA.event({
+ // 'category': 'JSON-YAML Switch',
+ // 'action': `${event.target.value} view`,
+ // })
+ handleLanguageChange(event.target.value)
+ }}
+ >
+ JSON
+ YAML
+
+
+ )
+}
+
+const ValidationError = () => {
+ const { error } = useCodeEditorContext()
+ return error ? {error}
: null
+}
+
+const Warning: React.FC
+
+)
+
+const ErrorBar: React.FC
+
+)
+
+const Information: React.FC
+
+)
+
+const Clipboard = () => {
+ const { state } = useCodeEditorContext()
+ return (
+
+ )
+}
+
+const SplitPane = ({}) => {
+ const { state, dispatch, readOnly } = useCodeEditorContext()
+ function handleToggle(e) {
+ if (readOnly) return
+ dispatch({ type: 'setDiff', value: !state.diffMode })
+ }
+ return (
+
+
+ {state.diffMode ? 'Hide comparison' : 'Compare with default'}
+
+ )
+}
+// TODO: CodeEditor should be composed of CodeEditorPlaceholder
+const CodeEditorPlaceholder = ({ className = '', style = {}, customLoader }): JSX.Element => {
+ const { height } = useCodeEditorContext()
+
+ if (customLoader) {
+ return customLoader
+ }
+
+ return (
+
+
+ )
+}
+
+CodeEditor.LanguageChanger = LanguageChanger
+CodeEditor.ThemeChanger = ThemeChanger
+CodeEditor.ValidationError = ValidationError
+CodeEditor.Clipboard = Clipboard
+CodeEditor.Header = Header
+CodeEditor.Warning = Warning
+CodeEditor.ErrorBar = ErrorBar
+CodeEditor.Information = Information
+
+export default CodeEditor
diff --git a/src/Common/CodeEditor/codeEditor.scss b/src/Common/CodeEditor/codeEditor.scss
new file mode 100644
index 000000000..aa19ac91d
--- /dev/null
+++ b/src/Common/CodeEditor/codeEditor.scss
@@ -0,0 +1,151 @@
+.code-editor__header {
+ height: 40px;
+ background: var(--N100);
+ padding: 0 16px;
+ border-bottom: 1px solid var(--N200);
+
+ .radio-group {
+ height: 24px;
+ overflow: hidden;
+ }
+
+ .radio-group input[type=checkbox]:checked+.radio__item-label {
+ background: var(--N700);
+ border-radius: 0;
+ color: var(--white);
+ }
+
+ .radio__item-label {
+ padding: 0 8px;
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ line-height: 24px;
+ cursor: pointer;
+ }
+
+ .radio-group {
+ padding: 0;
+ }
+
+ .code-editor__split-pane {
+ color: var(--N700);
+ margin-left: auto;
+ fill: var(--N700);
+ }
+
+ label.form__error {
+ margin-left: 8px;
+ }
+
+ button.clipboard {
+ margin-left: auto;
+ height: 20px;
+ width: 20px;
+ padding: 0;
+ background: transparent;
+ border: unset;
+ outline: unset;
+
+ svg {
+ height: 100%;
+ width: 100%;
+ }
+
+ &:active {
+ svg {
+ height: 90%;
+ width: 90%;
+
+ path {
+ fill: green;
+ }
+ }
+ }
+ }
+}
+
+.code-editor__header-error {
+ padding: 8px 16px;
+ font-size: 12px;
+ border: solid 1px #d6dbdf;
+ background-color: var(--R100);
+ font-weight: normal;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.33;
+ letter-spacing: normal;
+ color: #f32e2e;
+}
+
+.code-editor-container {
+ width: 100%;
+ border: 1px solid #d6dbdf;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.react-monaco-editor-container {
+ min-height: 300px;
+}
+
+.code-editor__warning {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.33;
+ letter-spacing: normal;
+ color: var(--Y700);
+ height: auto;
+ padding: 8px 16px;
+ border-bottom: 1px solid #d6dbdf;
+ background-color: var(--Y100);
+}
+
+.code-editor__information {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.33;
+ letter-spacing: normal;
+ color: var(--N900);
+ height: auto;
+ padding: 8px 16px;
+ border-bottom: 1px solid #d6dbdf;
+ background-color: var(--B100);
+}
+
+.code-editor__information-info-icon {
+ width: 16px;
+ height: 16px;
+ margin: 0 8px 0 0;
+ vertical-align: bottom;
+}
+
+.code-editor__toggle {
+ .toggle__switch {
+ width: 32px;
+ margin: 0 12px;
+ }
+
+ color: var(--white);
+}
+
+.diff-icon {
+ height: 20px;
+ width: 20px;
+ margin-right: 4px;
+ background: url('../../Assets/Icon/ic-compare.svg');
+}
+
+.code-editor__error {
+ background-color: #fde7e7;
+ color: #862020;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.33;
+ padding: 8px 16px;
+ border-bottom: 1px solid #d6dbdf;
+}
+
+.monaco-editor-hover {
+ margin-left: 40px;
+}
diff --git a/src/Common/Common.service.ts b/src/Common/Common.service.ts
index 1f2ca5aa0..ba0be0dc0 100644
--- a/src/Common/Common.service.ts
+++ b/src/Common/Common.service.ts
@@ -1,7 +1,7 @@
-import moment from 'moment';
-import {get, post} from './Api';
+import moment from 'moment'
+import { get, post } from './Api'
import { ROUTES } from './Constants'
-import { sortCallback } from './Helper';
+import { sortCallback } from './Helper'
import {
TeamList,
ResponseType,
@@ -17,23 +17,21 @@ import {
} from './Types'
export const getTeamListMin = (): Promise
+
+
+
+
-
- )
- }
+ const renderFormErrorWithIcon = (error: string) => (
+
+
+ )
const getInputError = () => {
if (!error?.length) {
return null
- } else {
- if (typeof error === 'object') {
- return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
- }
- return renderFormErrorWithIcon(error)
}
+ if (typeof error === 'object') {
+ return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
+ }
+ return renderFormErrorWithIcon(error)
}
const renderInputLabelConditionally = () => {
if (typeof label === 'string') {
return {label}
- } else {
- return label
}
+ return label
}
const renderInputLabel = () => {
if (!label) {
return null
- } else {
- return (
-
- )
}
+ return (
+
+ )
}
return (
diff --git a/src/Common/CustomInput/index.ts b/src/Common/CustomInput/index.ts
index e3cd15cd2..492bec94b 100644
--- a/src/Common/CustomInput/index.ts
+++ b/src/Common/CustomInput/index.ts
@@ -1,2 +1,2 @@
export * from './CustomInput'
-export * from './Types'
\ No newline at end of file
+export * from './Types'
diff --git a/src/Common/CustomTagSelector/PropagateTagInfo.tsx b/src/Common/CustomTagSelector/PropagateTagInfo.tsx
index 559b36d35..f1457444a 100644
--- a/src/Common/CustomTagSelector/PropagateTagInfo.tsx
+++ b/src/Common/CustomTagSelector/PropagateTagInfo.tsx
@@ -6,33 +6,31 @@ import { TippyTheme } from '../Types'
import { DOCUMENTATION } from '../Constants'
export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
- const additionalInfo = () => {
- return (
-
-
diff --git a/src/Common/CustomTagSelector/ResizableTagTextArea.tsx b/src/Common/CustomTagSelector/ResizableTagTextArea.tsx
index a7f9a4d9d..eb7bce70c 100644
--- a/src/Common/CustomTagSelector/ResizableTagTextArea.tsx
+++ b/src/Common/CustomTagSelector/ResizableTagTextArea.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { useThrottledEffect } from '../Helper'
import { ResizableTagTextAreaProps } from './Types'
-export function ResizableTagTextArea({
+export const ResizableTagTextArea = ({
className,
minHeight,
maxHeight,
@@ -16,7 +16,7 @@ export function ResizableTagTextArea({
dependentRef,
dataTestId,
handleKeyDown,
-}: ResizableTagTextAreaProps) {
+}: ResizableTagTextAreaProps) => {
const [text, setText] = useState('')
useEffect(() => {
@@ -30,9 +30,9 @@ export function ResizableTagTextArea({
const reInitHeight = () => {
if (document.activeElement !== refVar.current) return
- refVar.current.style.height = minHeight + 'px'
+ refVar.current.style.height = `${minHeight}px`
if (dependentRef) {
- dependentRef.current.style.height = minHeight + 'px'
+ dependentRef.current.style.height = `${minHeight}px`
}
let nextHeight = refVar.current.scrollHeight
if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
@@ -44,18 +44,18 @@ export function ResizableTagTextArea({
if (maxHeight && nextHeight > maxHeight) {
nextHeight = maxHeight
}
- refVar.current.style.height = nextHeight + 'px'
+ refVar.current.style.height = `${nextHeight}px`
if (dependentRef) {
- dependentRef.current.style.height = nextHeight + 'px'
+ dependentRef.current.style.height = `${nextHeight}px`
}
}
useThrottledEffect(reInitHeight, 500, [text])
const handleOnBlur = (event) => {
- refVar.current.style.height = minHeight + 'px'
+ refVar.current.style.height = `${minHeight}px`
if (dependentRef) {
- dependentRef.current.style.height = minHeight + 'px'
+ dependentRef.current.style.height = `${minHeight}px`
}
onBlur && onBlur(event)
}
diff --git a/src/Common/CustomTagSelector/TagDetails.tsx b/src/Common/CustomTagSelector/TagDetails.tsx
index 6cbac27c5..9d566ba3f 100644
--- a/src/Common/CustomTagSelector/TagDetails.tsx
+++ b/src/Common/CustomTagSelector/TagDetails.tsx
@@ -41,7 +41,7 @@ export const TagDetails = ({
return (
- {(context) => {
- return (
-
- );
- }}
+ {(context) => (
+
+ )}
- );
+ )
}
}
diff --git a/src/Common/Dialogs/ForceDeleteDialog.tsx b/src/Common/Dialogs/ForceDeleteDialog.tsx
index 95216ea4f..cfe9efc91 100644
--- a/src/Common/Dialogs/ForceDeleteDialog.tsx
+++ b/src/Common/Dialogs/ForceDeleteDialog.tsx
@@ -1,15 +1,22 @@
import React from 'react'
-import { ForceDeleteDialogType } from './Types';
-import { DeleteDialog } from './DeleteDialog';
+import { ForceDeleteDialogType } from './Types'
+import { DeleteDialog } from './DeleteDialog'
-export default function ForceDeleteDialog({ onClickDelete, closeDeleteModal, forceDeleteDialogTitle, forceDeleteDialogMessage }: ForceDeleteDialogType) {
+export default function ForceDeleteDialog({
+ onClickDelete,
+ closeDeleteModal,
+ forceDeleteDialogTitle,
+ forceDeleteDialogMessage,
+}: ForceDeleteDialogType) {
return (
-
- Add a tag and click on the
-
- Use these tags to filter/identify resources via CLI or in other Kubernetes tools.
+ const additionalInfo = () => (
+
+
+ )
return (
+
+ Add a tag and click on the
+
- )
- }
+ Use these tags to filter/identify resources via CLI or in other Kubernetes tools.
+
@@ -68,7 +68,11 @@ export const TagDetails = ({
refVar={valueRef}
dependentRef={keyRef}
/>
-
+
diff --git a/src/Common/CustomTagSelector/TagLabelSelect.tsx b/src/Common/CustomTagSelector/TagLabelSelect.tsx
index b4b2dde9e..9a0f47e76 100644
--- a/src/Common/CustomTagSelector/TagLabelSelect.tsx
+++ b/src/Common/CustomTagSelector/TagLabelSelect.tsx
@@ -5,16 +5,11 @@ import { DEFAULT_TAG_DATA } from '../Constants'
import { TagLabelSelectType } from './Types'
import { TagDetails } from './TagDetails'
-export const TagLabelSelect = ({
- isCreateApp,
- labelTags,
- setLabelTags,
- tabIndex = 0
-}: TagLabelSelectType) => {
+export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex = 0 }: TagLabelSelectType) => {
const setTagData = (index, tagValue): void => {
const _tags = [...labelTags]
const _tagValue = tagValue
- if(_tagValue.key.startsWith("devtron.ai/")){
+ if (_tagValue.key.startsWith('devtron.ai/')) {
_tagValue.propagate = false
}
_tags[index] = _tagValue
@@ -40,7 +35,11 @@ export const TagLabelSelect = ({
-
{popupMenuBody}
diff --git a/src/Common/CustomTagSelector/TagSelector.utils.ts b/src/Common/CustomTagSelector/TagSelector.utils.ts
index 159736066..c826321af 100644
--- a/src/Common/CustomTagSelector/TagSelector.utils.ts
+++ b/src/Common/CustomTagSelector/TagSelector.utils.ts
@@ -59,10 +59,9 @@ export const validateKubernetesKey = (key: string) => {
if (noOfSlashInKey > 1) {
invalidMessageList.push('Key: Max 1 ( / ) allowed')
} else {
- let name = key
+ const name = key
if (noOfSlashInKey === 1) {
- const [prefix, name]=key.split('/')
-
+ const [prefix, name] = key.split('/')
}
}
}
diff --git a/src/Common/CustomTagSelector/Types.ts b/src/Common/CustomTagSelector/Types.ts
index 2673b45a4..8ca9648fd 100644
--- a/src/Common/CustomTagSelector/Types.ts
+++ b/src/Common/CustomTagSelector/Types.ts
@@ -68,5 +68,5 @@ export interface ResizableTagTextAreaProps {
refVar?: React.MutableRefObject
dependentRef?: React.MutableRefObject
dataTestId?: string
- handleKeyDown?: any
+ handleKeyDown?: any
}
diff --git a/src/Common/CustomTagSelector/ValidationRules.ts b/src/Common/CustomTagSelector/ValidationRules.ts
index 6ae3b9980..a6062818e 100644
--- a/src/Common/CustomTagSelector/ValidationRules.ts
+++ b/src/Common/CustomTagSelector/ValidationRules.ts
@@ -20,25 +20,23 @@ export class ValidationRules {
const errorList = []
if (!key) {
errorList.push('Key is required')
- } else {
- if(!key.startsWith("devtron.ai/")){
- const re = new RegExp('/', 'g')
- const noOfSlashInKey = key.match(re)?.length
- if (noOfSlashInKey > 1) {
- errorList.push('Key: Max 1 ( / ) allowed')
- } else if (noOfSlashInKey === 1) {
- const [prefix, name] = key.split('/')
- errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
- if (prefix.length > 253) {
- errorList.push('Prefix: Can be max 253 characters')
- }
- const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
- if (!validPrefix) {
- errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
- }
- } else {
- errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+ } else if (!key.startsWith('devtron.ai/')) {
+ const re = new RegExp('/', 'g')
+ const noOfSlashInKey = key.match(re)?.length
+ if (noOfSlashInKey > 1) {
+ errorList.push('Key: Max 1 ( / ) allowed')
+ } else if (noOfSlashInKey === 1) {
+ const [prefix, name] = key.split('/')
+ errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+ if (prefix.length > 253) {
+ errorList.push('Prefix: Can be max 253 characters')
}
+ const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+ if (!validPrefix) {
+ errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+ }
+ } else {
+ errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
}
}
return { isValid: errorList.length === 0, messages: errorList }
@@ -48,10 +46,8 @@ export class ValidationRules {
const errorList = []
if (!value) {
errorList.push('Value is required')
- } else {
- if(!key.startsWith("devtron.ai/")){
- errorList.push(...validateTagValue(value))
- }
+ } else if (!key.startsWith('devtron.ai/')) {
+ errorList.push(...validateTagValue(value))
}
return { isValid: errorList.length === 0, messages: errorList }
}
diff --git a/src/Common/CustomTagSelector/index.ts b/src/Common/CustomTagSelector/index.ts
index 2926b991b..52ac2f1a9 100644
--- a/src/Common/CustomTagSelector/index.ts
+++ b/src/Common/CustomTagSelector/index.ts
@@ -1,6 +1,6 @@
-export {default as PropagateTagInfo} from './PropagateTagInfo'
+export { default as PropagateTagInfo } from './PropagateTagInfo'
export * from './TagDetails'
export * from './TagLabelSelect'
export * from './TagLabelValueSelector'
export * from './ResizableTagTextArea'
-export * from './Types'
\ No newline at end of file
+export * from './Types'
diff --git a/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx b/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
index 9df596f1f..aacb5f26d 100644
--- a/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
+++ b/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
-import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
+import { ReactComponent as ICClear } from '../../../Assets/Icon/ic-error-cross.svg'
import DebouncedSearch from '../DebouncedSearch'
jest.mock('../../helpers/Helpers', () => ({
diff --git a/src/Common/DeleteComponentModal/DeleteComponent.tsx b/src/Common/DeleteComponentModal/DeleteComponent.tsx
index 5215e9f05..ed0818267 100644
--- a/src/Common/DeleteComponentModal/DeleteComponent.tsx
+++ b/src/Common/DeleteComponentModal/DeleteComponent.tsx
@@ -6,8 +6,7 @@ import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
import { ServerErrors } from '../ServerError'
import { DeleteComponentProps } from './types'
-
-function DeleteComponent({
+const DeleteComponent = ({
setDeleting,
toggleConfirmation,
deleteComponent,
@@ -20,7 +19,7 @@ function DeleteComponent({
reload,
configuration = '',
closeCustomComponent,
-}: DeleteComponentProps) {
+}: DeleteComponentProps) => {
const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
const { push } = useHistory()
@@ -55,35 +54,31 @@ function DeleteComponent({
}
}
- const renderCannotDeleteDialogModal = () => {
- return (
-
-
-
-
-
- )
- }
+ const renderCannotDeleteDialogModal = () => (
+
+
+
+
+
+ )
- const renderDeleteDialog = () => {
- return (
- toggleConfirmation(false)}
- dataTestId="delete-dialog"
- >
-
-
-
- )
- }
+ const renderDeleteDialog = () => (
+ toggleConfirmation(false)}
+ dataTestId="delete-dialog"
+ >
+
+
+
+ )
return (
- {(context) => {
- return (
-
- );
- }}
+ {(context) => (
+
+ )}
- );
+ )
}
}
@@ -73,14 +71,12 @@ export class DialogFormSubmit extends Component<{ tabIndex: number }> {
render() {
return (
+
+
+ }
+ >
+ {option(tag, index)}
+
+ )
const renderSuggestions = (): JSX.Element => {
if (tagOptions?.length) {
@@ -186,8 +182,8 @@ export const TagLabelValueSelector = ({
{popupMenuBody && (
diff --git a/src/Common/CustomTagSelector/TagLabelValueSelector.tsx b/src/Common/CustomTagSelector/TagLabelValueSelector.tsx
index b979fd6b4..992285458 100644
--- a/src/Common/CustomTagSelector/TagLabelValueSelector.tsx
+++ b/src/Common/CustomTagSelector/TagLabelValueSelector.tsx
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'
+import Tippy from '@tippyjs/react'
import PopupMenu from '../PopupMenu'
import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
@@ -6,7 +7,6 @@ import { KEY_VALUE } from '../Constants'
import { stopPropagation } from '../Helper'
import { ResizableTagTextArea } from './ResizableTagTextArea'
import { SuggestedTagOptionType, TagLabelValueSelectorType } from './Types'
-import Tippy from '@tippyjs/react'
import { ValidationRules } from './ValidationRules'
export const TagLabelValueSelector = ({
@@ -107,38 +107,34 @@ export const TagLabelValueSelector = ({
return null
}
- const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
- return (
-
-
- }
- >
- {option(tag, index)}
-
- )
- }
+ const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => (
+
- {tag.label}
-
- )
- }
+ const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => (
+
+ {tag.label}
+
+ )
- const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
- return (
- {tag.label}
- {tag.description}
- {tag.label}
+ {tag.description}
+ {confirmationDialogDescription}
-{confirmationDialogDescription}
+Are you sure you want to delete this {configuration ? configuration : component}?
-Are you sure you want to delete this {configuration || component}?
+
{!showCannotDeleteDialogModal && renderDeleteDialog()}
diff --git a/src/Common/DeleteComponentModal/types.ts b/src/Common/DeleteComponentModal/types.ts
index 133b9a4e1..ab84301a7 100644
--- a/src/Common/DeleteComponentModal/types.ts
+++ b/src/Common/DeleteComponentModal/types.ts
@@ -12,4 +12,4 @@ export interface DeleteComponentProps {
configuration?: string
dataTestid?: string
closeCustomComponent?: () => void
-}
\ No newline at end of file
+}
diff --git a/src/Common/DevtronProgressing/DevtronProgressing.tsx b/src/Common/DevtronProgressing/DevtronProgressing.tsx
index 0fba8c734..b6935af00 100644
--- a/src/Common/DevtronProgressing/DevtronProgressing.tsx
+++ b/src/Common/DevtronProgressing/DevtronProgressing.tsx
@@ -2,10 +2,8 @@ import React from 'react'
import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
import { DevtronProgressingProps } from './types'
-export function DevtronProgressing({ classes, parentClasses }: DevtronProgressingProps): JSX.Element {
- return (
-
-
- )
-}
+const ConfirmationDialog = ({ className = '', children }: ConfirmationDialogType) => (
+
+
+)
-function Icon({ src, className = '' }: ConfirmationDialogIconType) {
- return 
-}
+const Icon = ({ src, className = '' }: ConfirmationDialogIconType) => (
+
+)
-function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
- return (
- & { Description?: React.FC } = function (props) {
+export const DeleteDialog: React.FC & { Description?: React.FC } = (props) => {
const handleDelete = (e: React.MouseEvent) => {
if (props.shouldStopPropagation) {
e.stopPropagation()
@@ -62,8 +62,6 @@ export const DeleteDialog: React.FC & { Description?: React.F
)
}
-function DeleteDialogDescription(props) {
- return <>{props.children}
-}
+const DeleteDialogDescription = (props) => <>{props.children}
DeleteDialog.Description = DeleteDialogDescription
diff --git a/src/Common/Dialogs/DialogForm.tsx b/src/Common/Dialogs/DialogForm.tsx
index 4309b761b..7648e1e0b 100644
--- a/src/Common/Dialogs/DialogForm.tsx
+++ b/src/Common/Dialogs/DialogForm.tsx
@@ -1,28 +1,28 @@
-import React, { Component, createContext } from 'react';
-import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../Assets/Icon/ic-cross.svg';
+import React, { Component, createContext } from 'react'
+import { VisibleModal } from '../Modals/VisibleModal'
+import close from '../../Assets/Icon/ic-cross.svg'
import { Progressing } from '../Progressing'
-import { DialogFormProps } from './Types';
-//TODO: may not need context
-const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });
+import { DialogFormProps } from './Types'
+// TODO: may not need context
+const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} })
export class DialogForm extends Component {
constructor(props) {
- super(props);
- this.escFunction = this.escFunction.bind(this);
+ super(props)
+ this.escFunction = this.escFunction.bind(this)
}
componentDidMount() {
- document.addEventListener('keydown', this.escFunction);
+ document.addEventListener('keydown', this.escFunction)
}
componentWillUnmount() {
- document.removeEventListener('keydown', this.escFunction);
+ document.removeEventListener('keydown', this.escFunction)
}
escFunction(event) {
if (event.keyCode === 27 && this.props.closeOnESC) {
- this.props.close(event);
+ this.props.close(event)
}
}
@@ -46,26 +46,24 @@ export class DialogForm extends Component {
-
- )
-}
+export const DevtronProgressing = ({ classes, parentClasses }: DevtronProgressingProps): JSX.Element => (
+
+
+)
diff --git a/src/Common/Dialogs/ConfirmationDialog.tsx b/src/Common/Dialogs/ConfirmationDialog.tsx
index 826dc2731..cb4ce1874 100644
--- a/src/Common/Dialogs/ConfirmationDialog.tsx
+++ b/src/Common/Dialogs/ConfirmationDialog.tsx
@@ -1,32 +1,33 @@
import React from 'react'
import { VisibleModal2 } from '../Modals/VisibleModal2'
-import { ConfirmationDialogBodyType, ConfirmationDialogButtonGroupType, ConfirmationDialogIconType, ConfirmationDialogType } from './Types'
+import {
+ ConfirmationDialogBodyType,
+ ConfirmationDialogButtonGroupType,
+ ConfirmationDialogIconType,
+ ConfirmationDialogType,
+} from './Types'
-function ConfirmationDialog({ className = '', children }: ConfirmationDialogType) {
- return (
- {children}
- {children}
+
-
- )
-}
+const Body = ({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) => (
+ {title}
- {subtitle &&{subtitle}
}
- {children}
-
+
+)
-function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
- return {title}
+ {subtitle &&{subtitle}
}
+ {children}
+ {children}
-}
+const ButtonGroup = ({ children }: ConfirmationDialogButtonGroupType) => (
+ {children}
+)
ConfirmationDialog.Icon = Icon
ConfirmationDialog.Body = Body
diff --git a/src/Common/Dialogs/DeleteDialog.tsx b/src/Common/Dialogs/DeleteDialog.tsx
index 167705de1..e0d284fba 100644
--- a/src/Common/Dialogs/DeleteDialog.tsx
+++ b/src/Common/Dialogs/DeleteDialog.tsx
@@ -4,7 +4,7 @@ import { Progressing } from '../Progressing'
import ConfirmationDialog from './ConfirmationDialog'
import { DeleteDialogProps } from './Types'
-export const DeleteDialog: React.FC
-
-
+ deletePrefix="Force "
+ >
+
diff --git a/src/Common/Dialogs/Types.ts b/src/Common/Dialogs/Types.ts
index e5030de29..86297ca35 100644
--- a/src/Common/Dialogs/Types.ts
+++ b/src/Common/Dialogs/Types.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode } from 'react'
export interface DeleteDialogProps {
title: string
@@ -15,10 +15,10 @@ export interface DeleteDialogProps {
}
export interface ForceDeleteDialogType {
- onClickDelete: () => void
- closeDeleteModal: () => void
- forceDeleteDialogTitle: string
- forceDeleteDialogMessage: string
+ onClickDelete: () => void
+ closeDeleteModal: () => void
+ forceDeleteDialogTitle: string
+ forceDeleteDialogMessage: string
}
export interface ConfirmationDialogType {
className?: string
@@ -37,11 +37,11 @@ export interface ConfirmationDialogButtonGroupType {
children: any
}
export interface DialogFormProps {
- className: string;
- title: string;
- isLoading: boolean;
- closeOnESC?: boolean;
- close: (event) => void;
- onSave: (event) => void;
- headerClassName?: string;
+ className: string
+ title: string
+ isLoading: boolean
+ closeOnESC?: boolean
+ close: (event) => void
+ onSave: (event) => void
+ headerClassName?: string
}
diff --git a/src/Common/Dialogs/index.ts b/src/Common/Dialogs/index.ts
index fa564be39..1a3c06c68 100644
--- a/src/Common/Dialogs/index.ts
+++ b/src/Common/Dialogs/index.ts
@@ -1,4 +1,4 @@
export { default as ConfirmationDialog } from './ConfirmationDialog'
export * from './DeleteDialog'
export * from './DialogForm'
-export { default as ForceDeleteDialog } from './ForceDeleteDialog'
\ No newline at end of file
+export { default as ForceDeleteDialog } from './ForceDeleteDialog'
diff --git a/src/Common/EmptyState/EmptyState.tsx b/src/Common/EmptyState/EmptyState.tsx
deleted file mode 100644
index 1d605d0b9..000000000
--- a/src/Common/EmptyState/EmptyState.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import './emptyState.scss';
-import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
-
-function EmptyState({ children, className = '' }) {
- return (
-
Error: {forceDeleteDialogMessage}
Do you want to force delete?
- {children}
-
- )
-}
-
-function Image({ children }) {
- return children
-}
-
-function Title({ children }) {
- return children
-}
-
-function Subtitle({ children, className }: { children: any; className?: string }) {
- return {children}
-} - -function Button({ children }) { - return children -} - -const Loading: React.FC<{ text: string }> = function (props) { - return <> -{props.text}
- -} - -EmptyState.Image = Image -EmptyState.Title = Title -EmptyState.Subtitle = Subtitle -EmptyState.Button = Button -EmptyState.Loading = Loading - -export default EmptyState diff --git a/src/Common/EmptyState/GenericEmptyState.tsx b/src/Common/EmptyState/GenericEmptyState.tsx index 105afeebc..dbabefa90 100644 --- a/src/Common/EmptyState/GenericEmptyState.tsx +++ b/src/Common/EmptyState/GenericEmptyState.tsx @@ -4,7 +4,7 @@ import { GenericEmptyStateType, ImageType } from '../Types' import './emptyState.scss' -function GenericEmptyState({ +const GenericEmptyState = ({ title, image, subTitle, @@ -21,7 +21,7 @@ function GenericEmptyState({ layout = 'column', contentClassName = '', imageStyles = {}, -}: GenericEmptyStateType): JSX.Element { +}: GenericEmptyStateType): JSX.Element => { const isRowLayout = layout === 'row' const getImageSize = () => { @@ -35,9 +35,7 @@ function GenericEmptyState({ return (= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
@@ -45,7 +43,7 @@ function GenericEmptyState({
{!SvgImage ? (
!noImage && (
- )
+ return (
dependencies: dependencyArray,
})
const mounted = useRef(true)
- const dependencies: any[] = useMemo(() => {
- return [...dependencyArray, shouldRun]
- }, [...dependencyArray, shouldRun])
+ const dependencies: any[] = useMemo(() => [...dependencyArray, shouldRun], [...dependencyArray, shouldRun])
const reload = () => {
async function call() {
@@ -434,9 +531,8 @@ export function useAsync(
export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
if (lastDeployed) {
return handleUTCTime(lastDeployed, true)
- } else {
- return isArgoInstalled ? '' : 'Not deployed'
}
+ return isArgoInstalled ? '' : 'Not deployed'
}
/**
@@ -489,20 +585,19 @@ export const customStyles = {
}),
}
-export const getFilteredChartVersions = (charts, selectedChartType) => {
+export const getFilteredChartVersions = (charts, selectedChartType) =>
// Filter chart versions based on selected chart type
- return charts
+ charts
.filter((item) => item?.chartType === selectedChartType.value)
.map((item) => ({
value: item?.chartVersion,
label: item?.chartVersion,
chartRefId: item.chartRefId,
}))
-}
function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
// It recursively removes empty object keys and empty array keys
- for (let key in obj) {
+ for (const key in obj) {
if (Array.isArray(obj[key])) {
// Check if the array is empty
if (obj[key].length !== 0) {
@@ -531,28 +626,28 @@ function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
-
+
const jsonCopy = JSON.parse(JSON.stringify(json))
const originaljsonCopy = JSON.parse(JSON.stringify(json))
- let removedPatches = []
- let patches = jsonPathArray.flatMap((jsonPath) => {
+ const removedPatches = []
+ const patches = jsonPathArray.flatMap((jsonPath) => {
const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
- //reversing patches to handle correct array index deletion
+ // reversing patches to handle correct array index deletion
pathsToRemove.reverse()
return pathsToRemove.map((result) => {
- //storing removed patches to have functionality of undo
+ // storing removed patches to have functionality of undo
removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
return { op: 'remove', path: result.pointer }
})
})
- let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
+ const { newDocument } = jsonpatch.applyPatch(jsonCopy, patches)
if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
return { newDocument, removedPatches: removedPatches.reverse() }
}
export function getLockedJSON(json, jsonPathArray: string[]) {
const jsonCopy = JSON.parse(JSON.stringify(json))
- let resultJson = {}
+ const resultJson = {}
jsonPathArray.forEach((jsonPath) => {
const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
elements.forEach((element) => {
@@ -560,16 +655,17 @@ export function getLockedJSON(json, jsonPathArray: string[]) {
const lastPath = pathArray.pop()
let current = resultJson
for (let i = 0; i < pathArray.length; i++) {
- let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
+ const key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
if (!current[key]) {
- current[key] = isNaN(Number(pathArray[i + 1]??lastPath)) ? {} : []
+ current[key] = isNaN(Number(pathArray[i + 1] ?? lastPath)) ? {} : []
}
current = current[key]
}
- let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
+ const key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
current[key] = element.value
})
})
+ // eslint-disable-next-line dot-notation
return resultJson['$']
}
diff --git a/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx b/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
index 4a412d71e..05cbafa61 100644
--- a/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
+++ b/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
@@ -2,12 +2,10 @@ import { useState, useEffect } from 'react'
let timeout
-const getSize = () => {
- return {
- width: window.innerWidth,
- height: window.innerHeight,
- }
-}
+const getSize = () => ({
+ width: window.innerWidth,
+ height: window.innerHeight,
+})
export const useWindowSize = () => {
const [windowSize, setWindowSize] = useState(getSize)
@@ -17,7 +15,7 @@ export const useWindowSize = () => {
window.cancelAnimationFrame(timeout)
}
- timeout = window.requestAnimationFrame(function () {
+ timeout = window.requestAnimationFrame(() => {
setWindowSize(getSize())
})
}
diff --git a/src/Common/ImageTags.Types.ts b/src/Common/ImageTags.Types.ts
index e553df93b..17de01a6a 100644
--- a/src/Common/ImageTags.Types.ts
+++ b/src/Common/ImageTags.Types.ts
@@ -13,13 +13,12 @@ export interface ImageComment {
artifactId: number
}
-
export interface ImageTaggingContainerType {
ciPipelineId?: number
artifactId?: number
imageComment?: ImageComment
imageReleaseTags?: ReleaseTag[]
- updateCurrentAppMaterial? : (matId:number, releaseTags?:ReleaseTag[], imageComment?:ImageComment) => void
+ updateCurrentAppMaterial?: (matId: number, releaseTags?: ReleaseTag[], imageComment?: ImageComment) => void
appReleaseTagNames?: string[]
tagsEditable?: boolean
forceReInit?: boolean
@@ -41,4 +40,4 @@ export interface ImageButtonType {
isSuperAdmin: any
duplicateTag?: boolean
hideHardDelete?: boolean
-}
\ No newline at end of file
+}
diff --git a/src/Common/ImageTags.tsx b/src/Common/ImageTags.tsx
index 1bd639739..44a7a70a9 100644
--- a/src/Common/ImageTags.tsx
+++ b/src/Common/ImageTags.tsx
@@ -1,4 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import Tippy from '@tippyjs/react'
import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
@@ -7,7 +9,6 @@ import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
import { ReactComponent as EditIcon } from '../Assets/Icon/ic-pencil.svg'
import { ReactComponent as Redo } from '../Assets/Icon/ic-arrow-counter-clockwise.svg'
import { ReactComponent as Minus } from '../Assets/Icon/ic-minus.svg'
-import { toast } from 'react-toastify'
import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
import { ReactComponent as Warning } from '../Assets/Icon/ic-error-exclamation.svg'
@@ -17,7 +18,6 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageT
import { showError, stopPropagation } from './Helper'
import { TippyCustomized } from './TippyCustomized'
import { setImageTags } from './Common.service'
-import Tippy from '@tippyjs/react'
import { Progressing } from './Progressing'
export const ImageTagsContainer = ({
@@ -34,15 +34,15 @@ export const ImageTagsContainer = ({
toggleCardMode,
hideHardDelete,
forceReInit,
- isSuperAdmin
+ isSuperAdmin,
}: ImageTaggingContainerType) => {
- const [initialTags, setInitialTags] = useState(imageReleaseTags ? imageReleaseTags : [])
+ const [initialTags, setInitialTags] = useState(imageReleaseTags || [])
const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
- const [existingTags, setExistingTags] = useState(appReleaseTagNames ? appReleaseTagNames : [])
+ const [existingTags, setExistingTags] = useState(appReleaseTagNames || [])
const [newDescription, setNewDescription] = useState(imageComment ? imageComment.comment : '')
const [isEditing, setIsEditing] = useState(false)
const [showTagsWarning, setShowTagsWarning] = useState(false)
- const [displayedTags, setDisplayedTags] = useState(imageReleaseTags ? imageReleaseTags : [])
+ const [displayedTags, setDisplayedTags] = useState(imageReleaseTags || [])
const [tagErrorMessage, setTagErrorMessage] = useState('')
const [createTags, setCreateTags] = useState([])
const [softDeleteTags, setSoftDeleteTags] = useState([])
@@ -51,22 +51,20 @@ export const ImageTagsContainer = ({
const [textInput, setTextInput] = useState('')
const [loading, setLoading] = useState(false)
-
useEffect(() => {
reInitState()
}, [imageReleaseTags, imageComment, tagsEditable])
useEffect(() => {
- setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+ setExistingTags(appReleaseTagNames || [])
}, [appReleaseTagNames])
-
const reInitState = () => {
if (forceReInit || !isEditing) {
- setInitialTags(imageReleaseTags ? imageReleaseTags : [])
+ setInitialTags(imageReleaseTags || [])
setInitialDescription(imageComment ? imageComment.comment : '')
setNewDescription(imageComment ? imageComment.comment : '')
- setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+ setDisplayedTags(imageReleaseTags || [])
setIsEditing(false)
}
}
@@ -97,7 +95,7 @@ export const ImageTagsContainer = ({
setTagErrorMessage('')
}
- const validateTag = (lowercaseValue) : boolean => {
+ const validateTag = (lowercaseValue): boolean => {
if (
lowercaseValue.length == 0 ||
lowercaseValue.length >= 128 ||
@@ -120,9 +118,9 @@ export const ImageTagsContainer = ({
return true
}
- const handleTagCreate = (newValue) : ReleaseTag[] => {
+ const handleTagCreate = (newValue): ReleaseTag[] => {
const lowercaseValue = newValue.toLowerCase().trim()
- if(validateTag(lowercaseValue)) {
+ if (validateTag(lowercaseValue)) {
const newTag: ReleaseTag = {
id: 0,
tagName: lowercaseValue,
@@ -148,7 +146,7 @@ export const ImageTagsContainer = ({
deleted: !updatedTags[index].deleted,
}
const updatedTag = updatedTags[index]
- let updatedSoftDeleteTags = [...softDeleteTags]
+ const updatedSoftDeleteTags = [...softDeleteTags]
const tagIndex = updatedSoftDeleteTags.findIndex((tag) => tag.tagName === updatedTag.tagName)
if (tagIndex !== -1) {
// Tag already exists in softDeleteTags array, remove it
@@ -206,13 +204,13 @@ export const ImageTagsContainer = ({
const payload = {
createTags: tagsToBeCreated,
- softDeleteTags: softDeleteTags,
+ softDeleteTags,
imageComment: {
id: 0,
comment: newDescription.trim(),
artifactId: 0,
},
- hardDeleteTags: hardDeleteTags,
+ hardDeleteTags,
}
// set loading state true
@@ -242,7 +240,7 @@ export const ImageTagsContainer = ({
handleEditClick()
setShowTagsWarning(false)
setTagErrorMessage('')
- if(updateCurrentAppMaterial)updateCurrentAppMaterial(artifactId,tags,res.result?.imageComment)
+ if (updateCurrentAppMaterial) updateCurrentAppMaterial(artifactId, tags, res.result?.imageComment)
})
.catch((err) => {
// Fix toast message
@@ -253,50 +251,45 @@ export const ImageTagsContainer = ({
showError(err)
}
})
- .finally(()=>{
+ .finally(() => {
setLoading(false)
})
}
- const renderInfoCard = (): JSX.Element => {
- return (
-
-
- )
- }
-
- const getBuildContextAdditionalContent = () => {
- return (
-
{msg}
diff --git a/src/Common/ErrorScreenNotFound.tsx b/src/Common/ErrorScreenNotFound.tsx index 17a553395..a312ce068 100644 --- a/src/Common/ErrorScreenNotFound.tsx +++ b/src/Common/ErrorScreenNotFound.tsx @@ -1,28 +1,26 @@ import React from 'react' -import notFound from '../Assets/Img/ic-empty-error@2x.png' import { useHistory } from 'react-router-dom' +import notFound from '../Assets/Img/ic-empty-error@2x.png' import { ERROR_EMPTY_SCREEN } from './Constants' import GenericEmptyState from './EmptyState/GenericEmptyState' -function ErrorScreenNotFound() { - const {push} = useHistory() +const ErrorScreenNotFound = () => { + const { push } = useHistory() const redirectToHome = () => { push('/app/list') } - const renderGenerateButton = () => { - return ( - - ) - } + const renderGenerateButton = () => ( + + ) return (
-
-
-
+
+ )
+
+ const getBuildContextAdditionalContent = () => (
+
) : (
-
+
)
}
@@ -456,8 +449,10 @@ export const ImageTagsContainer = ({
className="flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10"
data-testid="image-tags-container-hover"
>
- Release tags allow you to tag container images with readable and relatable tags eg. v1.0.
- -
-
- - A release tag can only be added if a workflow has CD pipelines deploying to Production - environments. - -
- Multiple tags can be added to an image. -
- Multiple images in an application cannot have the same tag. -
- - Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has - been added. - -
+
- )
- }
+
+
+ )
const creatableRef = useRef(null)
@@ -306,7 +299,7 @@ export const ImageTagsContainer = ({
Release tags allow you to tag container images with readable and relatable tags eg. v1.0.
+ -
+
- + A release tag can only be added if a workflow has CD pipelines deploying to Production environments. + +
- Multiple tags can be added to an image. +
- Multiple images in an application cannot have the same tag. +
- + Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been + added. + +
- {initialDescription &&
{initialDescription}
}
+
+ {initialDescription && (
+
{initialDescription}
+ )}
{initialTags?.map((tag, index) => (
{
if (duplicateTag) {
return 'cr-5 bcr-1 er-2'
- } else if (isSoftDeleted) {
+ }
+ if (isSoftDeleted) {
return 'cy-7 bcy-1 dc__strike-through ey-2'
- } else {
- return 'cn-9'
}
+ return 'cn-9'
}
return (
@@ -538,7 +533,7 @@ export const ImageTagButton = ({
) : (
@@ -556,7 +551,7 @@ export const ImageTagButton = ({
)}
{text}
-
+
{
const renderLink = () => {
if (!linkText) {
return null
- } else if (redirectLink) {
+ }
+ if (redirectLink) {
if (internalLink) {
return (
{linkText}
@@ -49,7 +51,11 @@ function InfoColourBar({
return (
linkOnClick && (
-
+ {
- modalRef = document.getElementById('full-screen-modal');
+ modalRef = document.getElementById('full-screen-modal')
componentDidMount() {
- if (this.props.noBackground)
- this.modalRef.classList.add("show");
- else this.modalRef.classList.add("show-with-bg");
+ if (this.props.noBackground) this.modalRef.classList.add('show')
+ else this.modalRef.classList.add('show-with-bg')
}
componentWillUnmount() {
- this.modalRef.classList.remove("show");
- this.modalRef.classList.remove("show-with-bg");
+ this.modalRef.classList.remove('show')
+ this.modalRef.classList.remove('show-with-bg')
}
render() {
- const { className = "", onHide = null } = { ...this.props };
+ const { className = '', onHide = null } = { ...this.props }
return ReactDOM.createPortal(
,
+ document.getElementById('full-screen-modal'),
+ )
}
-}
\ No newline at end of file
+}
diff --git a/src/Common/Modals/VisibleModal.tsx b/src/Common/Modals/VisibleModal.tsx
index cdfcbec43..bf770506d 100644
--- a/src/Common/Modals/VisibleModal.tsx
+++ b/src/Common/Modals/VisibleModal.tsx
@@ -46,7 +46,11 @@ export class VisibleModal extends React.Component<{
render() {
return ReactDOM.createPortal(
-
{linkText}
)
diff --git a/src/Common/Modals/Modal.tsx b/src/Common/Modals/Modal.tsx
index 0b6ebac99..6640cc519 100644
--- a/src/Common/Modals/Modal.tsx
+++ b/src/Common/Modals/Modal.tsx
@@ -35,7 +35,7 @@ export const Modal = ({
}
useEffect(() => {
document.addEventListener('click', handleClick)
- let modal = document.getElementById('visible-modal')
+ const modal = document.getElementById('visible-modal')
if (modal) modal.classList.add('show')
if (noBackDrop) modal.classList.add('no-back-drop')
if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })
diff --git a/src/Common/Modals/OpaqueModal.tsx b/src/Common/Modals/OpaqueModal.tsx
index 59c138518..c872d49da 100644
--- a/src/Common/Modals/OpaqueModal.tsx
+++ b/src/Common/Modals/OpaqueModal.tsx
@@ -1,36 +1,43 @@
import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
import closeIcon from '../../Assets/Icon/ic-cross.svg'
export interface OpaqueModalProps {
- className?: string;
- onHide?: any;
- noBackground?: boolean;
+ className?: string
+ onHide?: any
+ noBackground?: boolean
}
export class OpaqueModal extends React.Component
{this.props.children}
- {typeof onHide === 'function' &&
, document.getElementById('full-screen-modal'))
+ {typeof onHide === 'function' && (
+ onHide(false)} data-testid="opaque-modal-close">
- 
-
}
- onHide(false)}
+ data-testid="opaque-modal-close"
+ >
+
+
+ )}
+
+
-
)
@@ -106,14 +106,12 @@ export const multiSelectStyles = {
menu: (base, state) => ({
...base,
}),
- option: (base, state) => {
- return {
- ...base,
- backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
- color: 'var(--N900)',
- padding: '8px 12px',
- }
- },
+ option: (base, state) => ({
+ ...base,
+ backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+ color: 'var(--N900)',
+ padding: '8px 12px',
+ }),
container: (base, state) => ({
...base,
cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -143,6 +141,4 @@ export interface CustomSelect {
formatOptionLabel?: (...args) => any
}
-export const CustomSelect: React.FC = (props) => {
- return
-}
+export const CustomSelect: React.FC = (props) =>
diff --git a/src/Common/Policy.Types.ts b/src/Common/Policy.Types.ts
index d34101f43..2f7332584 100644
--- a/src/Common/Policy.Types.ts
+++ b/src/Common/Policy.Types.ts
@@ -1,63 +1,63 @@
-import { VariableType } from "./CIPipeline.Types"
-import { ResponseType } from "./Types"
+import { VariableType } from './CIPipeline.Types'
+import { ResponseType } from './Types'
export enum ApplyPolicyToStage {
- PRE_CI = 'PRE_CI',
- POST_CI = 'POST_CI',
- PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+ PRE_CI = 'PRE_CI',
+ POST_CI = 'POST_CI',
+ PRE_OR_POST_CI = 'PRE_OR_POST_CI',
}
export enum PluginRequiredStage {
- PRE_CI = 'preBuildStage',
- POST_CI = 'postBuildStage',
- PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+ PRE_CI = 'preBuildStage',
+ POST_CI = 'postBuildStage',
+ PRE_OR_POST_CI = 'PRE_OR_POST_CI',
}
export interface DefinitionSourceType {
- projectName: string
- isDueToProductionEnvironment: boolean
- isDueToLinkedPipeline: boolean
- policyName: string
- appName?: string
- clusterName?: string
- environmentName?: string
- branchNames?: string[]
- ciPipelineName?: string
+ projectName: string
+ isDueToProductionEnvironment: boolean
+ isDueToLinkedPipeline: boolean
+ policyName: string
+ appName?: string
+ clusterName?: string
+ environmentName?: string
+ branchNames?: string[]
+ ciPipelineName?: string
}
export interface MandatoryPluginDetailType {
- id: number
- icon: string
- name: string
- description?: string
- requiredIn: PluginRequiredStage
- applied?: boolean
- inputVariables?: VariableType[]
- outputVariables?: VariableType[]
- definitionSources?: DefinitionSourceType[]
+ id: number
+ icon: string
+ name: string
+ description?: string
+ requiredIn: PluginRequiredStage
+ applied?: boolean
+ inputVariables?: VariableType[]
+ outputVariables?: VariableType[]
+ definitionSources?: DefinitionSourceType[]
}
export interface MandatoryPluginDataType {
- pluginData: MandatoryPluginDetailType[]
- isValidPre: boolean
- isValidPost: boolean
+ pluginData: MandatoryPluginDetailType[]
+ isValidPre: boolean
+ isValidPost: boolean
}
export enum ConsequenceAction {
- BLOCK = 'BLOCK',
- ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
- ALLOW_FOREVER = 'ALLOW_FOREVER',
+ BLOCK = 'BLOCK',
+ ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
+ ALLOW_FOREVER = 'ALLOW_FOREVER',
}
export interface ConsequenceType {
- action: ConsequenceAction
- metadataField: string
+ action: ConsequenceAction
+ metadataField: string
}
export interface BlockedStateData {
- isOffendingMandatoryPlugin: boolean
- isCITriggerBlocked: boolean
- ciBlockState: ConsequenceType
+ isOffendingMandatoryPlugin: boolean
+ isCITriggerBlocked: boolean
+ ciBlockState: ConsequenceType
}
export interface GetBlockedStateResponse extends ResponseType {
result?: BlockedStateData
-}
\ No newline at end of file
+}
diff --git a/src/Common/PopupMenu.tsx b/src/Common/PopupMenu.tsx
index 990aa7c5d..e205c83a8 100644
--- a/src/Common/PopupMenu.tsx
+++ b/src/Common/PopupMenu.tsx
@@ -12,12 +12,12 @@ function usePopupContext() {
return context
}
-function PopupMenu({
+const PopupMenu = ({
children = null,
onToggleCallback = null,
autoClose = false,
autoPosition = false,
-}: PopupMenuType) {
+}: PopupMenuType) => {
const [popupPosition, setPopupPosition] = React.useState(null)
const [opacity, setOpacity] = React.useState(0)
const observer = React.useRef(null)
@@ -135,15 +135,15 @@ function PopupMenu({
)
}
-function Button({
+const Button = ({
children = null,
disabled = false,
rootClassName = '',
tabIndex = 0,
onHover = false,
isKebab = false,
- dataTestId = "",
-}: PopupMenuButtonType) {
+ dataTestId = '',
+}: PopupMenuButtonType) => {
const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
return (
{this.props.children}
,
document.getElementById('visible-modal'),
diff --git a/src/Common/Modals/VisibleModal2.tsx b/src/Common/Modals/VisibleModal2.tsx
index 2cb8e0d61..ba0552887 100644
--- a/src/Common/Modals/VisibleModal2.tsx
+++ b/src/Common/Modals/VisibleModal2.tsx
@@ -1,35 +1,40 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
-export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void; }> {
-
- modalRef = document.getElementById('visible-modal-2');
+export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void }> {
+ modalRef = document.getElementById('visible-modal-2')
constructor(props) {
- super(props);
- this.escFunction = this.escFunction.bind(this);
+ super(props)
+ this.escFunction = this.escFunction.bind(this)
}
escFunction(event) {
if (event.keyCode === 27 && this.props.close) {
- this.props.close(event);
+ this.props.close(event)
}
}
componentDidMount() {
- document.addEventListener("keydown", this.escFunction);
- this.modalRef.classList.add("show-with-bg");
+ document.addEventListener('keydown', this.escFunction)
+ this.modalRef.classList.add('show-with-bg')
}
componentWillUnmount() {
- document.removeEventListener("keydown", this.escFunction);
- this.modalRef.classList.remove("show-with-bg");
+ document.removeEventListener('keydown', this.escFunction)
+ this.modalRef.classList.remove('show-with-bg')
}
render() {
return ReactDOM.createPortal(
-
+
,
+ document.getElementById('visible-modal-2'),
+ )
}
-}
\ No newline at end of file
+}
diff --git a/src/Common/MultiSelectCustomization.tsx b/src/Common/MultiSelectCustomization.tsx
index a3f399e82..21c960f2e 100644
--- a/src/Common/MultiSelectCustomization.tsx
+++ b/src/Common/MultiSelectCustomization.tsx
@@ -42,7 +42,7 @@ export const MultiValueContainer = (props) => {
const { label, value } = data
return (
{this.props.children}
-
, document.getElementById('visible-modal-2'))
+ {label}
+ {label}
{children[1]}