Skip to content

Commit 4be2833

Browse files
authored
Merge pull request #448 from devtron-labs/fix/misc-enhancements
fix: Iframe permission for Iframe in page header & move segmented control to common-lib
2 parents e97ee17 + a23c6fb commit 4be2833

File tree

11 files changed

+152
-53
lines changed

11 files changed

+152
-53
lines changed

package-lock.json

Lines changed: 23 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.2.7",
3+
"version": "1.2.8",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -66,6 +66,8 @@
6666
"react-toastify": "9.1.3",
6767
"sharp": "^0.33.5",
6868
"svgo": "^3.3.2",
69+
"monaco-editor": "0.44.0",
70+
"monaco-yaml": "5.1.1",
6971
"typescript": "5.5.4",
7072
"vite": "5.4.11",
7173
"vite-plugin-dts": "4.0.3",
@@ -80,14 +82,11 @@
8082
"@rjsf/validator-ajv8": "^5.13.3",
8183
"@typeform/embed-react": "2.20.0",
8284
"dompurify": "^3.0.2",
83-
"monaco-editor": "0.44.0",
84-
"monaco-yaml": "5.1.1",
8585
"react": "^17.0.2",
8686
"react-dom": "^17.0.2",
8787
"react-draggable": "^4.4.5",
8888
"react-ga4": "^1.4.1",
8989
"react-mde": "^11.5.0",
90-
"react-monaco-editor": "^0.54.0",
9190
"react-router-dom": "^5.3.0",
9291
"react-select": "5.8.0",
9392
"rxjs": "^7.8.1",
@@ -102,6 +101,7 @@
102101
"jsonpath-plus": "^10.0.0",
103102
"marked": "^13.0.3",
104103
"react-dates": "^21.8.0",
104+
"react-monaco-editor": "^0.54.0",
105105
"react-diff-viewer-continued": "^3.4.0",
106106
"sass": "^1.69.7",
107107
"tslib": "2.7.0"
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { OptionType } from '@Common/Types'
18+
import StyledRadioGroup from '../RadioGroup/RadioGroup'
19+
import { SegmentedControlProps, SegmentedControlVariant } from './types'
20+
21+
const SegmentedControl = ({
22+
tabs,
23+
initialTab,
24+
onChange,
25+
tooltips,
26+
disabled = false,
27+
rootClassName = '',
28+
name,
29+
variant = SegmentedControlVariant.WHITE_ON_GRAY,
30+
}: SegmentedControlProps) => (
31+
<StyledRadioGroup
32+
className={`${variant} ${rootClassName}`}
33+
onChange={onChange}
34+
initialTab={initialTab}
35+
name={name}
36+
disabled={disabled}
37+
>
38+
{tabs.map((tab: OptionType, index) => (
39+
<StyledRadioGroup.Radio
40+
value={tab.value}
41+
key={tab.value}
42+
className="fs-12 cn-7 fw-6 lh-20"
43+
showTippy={!!tooltips?.[index]}
44+
tippyContent={tooltips?.[index] ?? ''}
45+
dataTestId={`${name}-${tab.value}`}
46+
>
47+
{tab.label}
48+
</StyledRadioGroup.Radio>
49+
))}
50+
</StyledRadioGroup>
51+
)
52+
53+
export default SegmentedControl

src/Common/SegmentedControl/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { type SegmentedControlProps, SegmentedControlVariant } from './types'
2+
export { default as SegmentedControl } from './SegmentedControl.component'

src/yaml.worker.ts renamed to src/Common/SegmentedControl/types.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,21 @@
1414
* limitations under the License.
1515
*/
1616

17-
import 'monaco-yaml/yaml.worker'
17+
import { OptionType } from '@Common/Types'
18+
19+
export enum SegmentedControlVariant {
20+
// NOTE: values are css class names
21+
GRAY_ON_WHITE = 'gui-yaml-switch',
22+
WHITE_ON_GRAY = 'gui-yaml-switch-window-bg',
23+
}
24+
25+
export interface SegmentedControlProps {
26+
tabs: OptionType[]
27+
initialTab: string
28+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
29+
name: string
30+
tooltips?: string[]
31+
disabled?: boolean
32+
rootClassName?: string
33+
variant?: SegmentedControlVariant
34+
}

src/Common/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,4 @@ export * from './SegmentedBarChart'
7070
export * from './CodeEditor'
7171
export * from './AppStatus'
7272
export * from './Tooltip'
73+
export * from './SegmentedControl'

src/Shared/Components/Header/IframePromoButton.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useCallback } from 'react'
2-
import { GenericEmptyState, VisibleModal } from '@Common/index'
2+
import { GenericEmptyState, stopPropagation, VisibleModal } from '@Common/index'
33
import { ComponentSizeType } from '@Shared/constants'
44
import ReactGA from 'react-ga4'
55
import { ReactComponent as Close } from '@Icons/ic-close.svg'
@@ -25,7 +25,12 @@ export const IframePromoButton = () => {
2525

2626
const renderIframeDrawer = () => (
2727
<VisibleModal close={onClickCloseIframeModal}>
28-
<div className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100">
28+
<div
29+
className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100"
30+
// NOTE: needed to prevent closing of modal on body click; clicking outside this div
31+
// will close the modal (outside click handled)
32+
onClick={stopPropagation}
33+
>
2934
<div className="trigger-modal__header w-100">
3035
<h1 className="modal__title flex left fs-16 fw-6-imp" data-testid="app-details-url-heading">
3136
{FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
@@ -48,7 +53,8 @@ export const IframePromoButton = () => {
4853
width="100%"
4954
height="100%"
5055
className="dc__no-border"
51-
sandbox="allow-same-origin allow-scripts"
56+
// NOTE: allow-forms is required to enable submitting the form
57+
sandbox="allow-same-origin allow-scripts allow-forms"
5258
referrerPolicy="no-referrer"
5359
/>
5460
) : (
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as InvalidYAMLTippyWrapper } from './InvalidYAMLTippyWrapper'
22
export { getInvalidTippyContent } from './utils'
3+
export { InvalidTippyTypeEnum } from './types'

src/Shared/Components/InvalidYAMLTippy/types.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,12 @@ export interface InvalidYAMLTippyWrapperProps {
55
restoreLastSavedYAML?: () => void
66
children: TooltipProps['children']
77
}
8+
9+
export enum InvalidTippyTypeEnum {
10+
YAML = 'yaml',
11+
JSON = 'json',
12+
}
13+
14+
export interface InvalidTippyProps extends Pick<InvalidYAMLTippyWrapperProps, 'parsingError' | 'restoreLastSavedYAML'> {
15+
type?: InvalidTippyTypeEnum
16+
}

0 commit comments

Comments
 (0)