Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-…

…common-lib into feat/hibernation-patch

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.7.6-beta-1",
+    "version": "1.7.10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/CodeEditor/CodeEditor.tsx

@@ -124,10 +124,10 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             inherit: true,
             rules: [
                 // @ts-ignore
-                { background: '#0B0F22' },
+                { background: '#181920' },
             ],
             colors: {
-                'editor.background': '#0B0F22',
+                'editor.background': '#181920',
             },
         })
 

src/Common/Constants.ts

@@ -100,6 +100,7 @@ export const ROUTES = {
     TELEMETRY_EVENT: 'telemetry/event',
     SERVER_INFO_API: 'server',
     ATTRIBUTES_USER: 'attributes/user',
+    GET: 'get',
     UPDATE: 'update',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',

src/Common/Drawer/Drawer.scss

@@ -42,6 +42,7 @@
     }
     &.right {
         right: 0;
+        border-left: 1px solid var(--border-primary);
     }
     &.left {
         left: 0;

src/Common/EmptyState/GenericEmptyState.tsx

@@ -61,19 +61,19 @@ const GenericEmptyState = ({
                         className={imageClassName || ''}
                         src={image || AppNotDeployed}
                         style={{
-                            ...imageStyles,
                             width: `${getImageSize().width}`,
                             height: `${getImageSize().height}`,
+                            ...imageStyles,
                         }}
                         alt="empty-state"
                     />
                 )
             ) : (
                 <SvgImage
                     style={{
-                        ...imageStyles,
                         width: `${getImageSize().width}`,
                         height: `${getImageSize().height}`,
+                        ...imageStyles,
                     }}
                 />
             )}

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -29,6 +29,7 @@ const SegmentedControl = ({
     name,
     variant = SegmentedControlVariant.WHITE_ON_GRAY,
     size = ComponentSizeType.medium,
+    isControlled = false,
 }: SegmentedControlProps) => (
     <StyledRadioGroup
         className={`${variant} ${SEGMENTED_CONTROL_SIZE_TO_CLASS_MAP[size]} ${rootClassName}`}
@@ -45,6 +46,7 @@ const SegmentedControl = ({
                 showTippy={!!tooltips?.[index]}
                 tippyContent={tooltips?.[index] ?? ''}
                 dataTestId={`${name}-${tab.value}`}
+                canSelect={!isControlled}
             >
                 {tab.label}
             </StyledRadioGroup.Radio>

src/Common/SegmentedControl/types.ts

@@ -37,4 +37,8 @@ export interface SegmentedControlProps {
      * @default ComponentSizeType.medium
      */
     size?: ComponentSizeType.medium | ComponentSizeType.large
+    /**
+     * @default false
+     */
+    isControlled?: boolean
 }

src/Shared/Components/CICDHistory/BuildAndTaskSummaryTooltipCard.tsx

@@ -39,7 +39,7 @@ const BuildAndTaskSummaryTooltipCard = memo(
         const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
 
         return (
-            <div className="shadow__overlay p-16 br-4 w-350 bg__overlay border__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16">
+            <div className="shadow__overlay p-16 br-4 w-350 bg__overlay--primary border__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16">
                 {/* Info section */}
                 <div className="dc__icon-text-layout">
                     <ICCalendar className={`scn-7 ${BASE_ICON_CLASS}`} />

src/Shared/Components/CICDHistory/History.components.tsx

@@ -16,6 +16,7 @@
 
 import { useCallback, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
+import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
 import {
     ClipboardButton,
     GenericEmptyState,
@@ -60,54 +61,58 @@ export const LogResizeButton = ({
 
     return (
         showButton && (
-            <Tooltip
-                placement="left"
-                shortcutKeyCombo={{
-                    text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
-                    combo: shortcutCombo,
-                }}
-            >
-                <button
-                    type="button"
-                    aria-label="Enter/Exit fullscreen view"
-                    className="zoom dc__zi-4 flex dc__no-border log-resize-button"
-                    onClick={toggleFullScreen}
+            <div className={getComponentSpecificThemeClass(AppThemeType.dark)}>
+                <Tooltip
+                    placement="left"
+                    shortcutKeyCombo={{
+                        text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
+                        combo: shortcutCombo,
+                    }}
                 >
-                    {fullScreenView ? (
-                        <ZoomOut className="icon-dim-16 dc__no-shrink" />
-                    ) : (
-                        <ZoomIn className="icon-dim-16 dc__no-shrink" />
-                    )}
-                </button>
-            </Tooltip>
+                    <button
+                        type="button"
+                        aria-label="Enter/Exit fullscreen view"
+                        className="zoom dc__zi-4 flex log-resize-button"
+                        onClick={toggleFullScreen}
+                    >
+                        {fullScreenView ? (
+                            <ZoomOut className="icon-dim-16 dc__no-shrink" />
+                        ) : (
+                            <ZoomIn className="icon-dim-16 dc__no-shrink" />
+                        )}
+                    </button>
+                </Tooltip>
+            </div>
         )
     )
 }
 
 export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
-    <div style={style} className="dc__element-scroller flex column top br-4">
-        <Tooltip alwaysShowTippyOnHover content="Scroll to Top" placement="left">
-            <button
-                className="flex"
-                disabled={!scrollToTop}
-                type="button"
-                onClick={scrollToTop}
-                aria-label="scroll-to-top"
-            >
-                <DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
-            </button>
-        </Tooltip>
-        <Tooltip alwaysShowTippyOnHover content="Scroll to Bottom" placement="left">
-            <button
-                className="flex"
-                disabled={!scrollToBottom}
-                type="button"
-                onClick={scrollToBottom}
-                aria-label="scroll-to-button"
-            >
-                <DropDownIcon className="rotate" />
-            </button>
-        </Tooltip>
+    <div className={getComponentSpecificThemeClass(AppThemeType.dark)}>
+        <div style={style} className="dc__element-scroller flex column top br-4">
+            <Tooltip alwaysShowTippyOnHover content="Scroll to Top" placement="left">
+                <button
+                    className="flex"
+                    disabled={!scrollToTop}
+                    type="button"
+                    onClick={scrollToTop}
+                    aria-label="scroll-to-top"
+                >
+                    <DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
+                </button>
+            </Tooltip>
+            <Tooltip alwaysShowTippyOnHover content="Scroll to Bottom" placement="left">
+                <button
+                    className="flex"
+                    disabled={!scrollToBottom}
+                    type="button"
+                    onClick={scrollToBottom}
+                    aria-label="scroll-to-button"
+                >
+                    <DropDownIcon className="rotate" />
+                </button>
+            </Tooltip>
+        </div>
     </div>
 )
 

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -132,13 +132,13 @@ const LogStageAccordion = ({
                             >
                                 <span
                                     ref={scrollIntoView}
-                                    className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14 dc__user-select-none"
+                                    className="cn-5 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14 dc__user-select-none"
                                     data-contains-match={doesLineContainSearchMatch}
                                 >
                                     {logsIndex + 1}
                                 </span>
                                 <pre
-                                    className="mono fs-14 mb-0-imp text__white dc__word-break lh-20 dc__unset-pre"
+                                    className="mono fs-14 mb-0-imp text__white dc__word-break lh-20 dc__unset-pre dc__transparent--imp"
                                     // eslint-disable-next-line react/no-danger
                                     dangerouslySetInnerHTML={{
                                         __html: DOMPurify.sanitize(log),

src/Shared/Components/CICDHistory/LogsRenderer.scss

@@ -52,29 +52,29 @@
         }
 
         &__stage-accordion {
-            background-color: #0c1021;
+            background-color: var(--transparent);
 
             &:not(&--open-stage):hover {
-                background-color: rgba(44, 51, 84, 0.5);
+                background-color: var(--bg-hover);
             }
 
             &--open-stage {
-                background-color: #2c3354;
+                background-color: var(--bg-overlay-primary);
             }
         }
 
         &__log-item {
             grid-template-columns: 36px auto;
             &:hover {
-                background-color: var(--white-20);
+                background-color: var(--bg-hover);
             }
         }
 
         &__filters-border-bottom {
-            border-bottom: 1px solid #2c3354;
+            border-bottom: 1px solid var(--border-secondary);
 
             & > :not(:first-child) {
-                border-left: 1px solid #2C3354;
+                border-left: 1px solid var(--border-secondary);
             }
         }
     }