Merge branch 'main' into feat/commit-card-ui

Author: shivani170

src/Assets/Icon/ic-caret-down.svg

@@ -15,11 +15,13 @@
  */
 
 import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
+import { ComponentSizeType } from '@Shared/constants'
 import { ReactComponent as Search } from '@Icons/ic-search.svg'
 import { ReactComponent as Clear } from '@Icons/ic-error-cross.svg'
 import { SearchBarProps } from './types'
 import './searchBar.scss'
 import { debounce } from '../Helper'
+import { getSearchBarHeightFromSize } from './utils'
 
 /**
  * Generic search input component with support for enter based and debounced search
@@ -65,6 +67,7 @@ const SearchBar = ({
     debounceTimeout = 300,
     dataTestId = 'search-bar',
     noBackgroundAndBorder = false,
+    size = ComponentSizeType.medium,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -116,7 +119,7 @@ const SearchBar = ({
     return (
         <div className={containerClassName}>
             <div
-                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-32`}
+                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
             >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input

src/Assets/Icon/ic-exit-fullscreen.svg

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { ComponentSizeType } from '@Shared/constants'
+
 export interface SearchBarProps {
     /**
      * Initial search text
@@ -55,4 +57,10 @@ export interface SearchBarProps {
      * Hide the background and border of the search
      */
     noBackgroundAndBorder?: boolean
+    /**
+     * Height of the searchbar
+     *
+     * @default 'ComponentSizeType.medium'
+     */
+    size?: ComponentSizeType.medium | ComponentSizeType.large
 }

src/Assets/Icon/ic-fullscreen.svg

@@ -0,0 +1,11 @@
+import { ComponentSizeType } from '@Shared/constants'
+import { SearchBarProps } from './types'
+
+export const getSearchBarHeightFromSize = (size: SearchBarProps['size']): string => {
+    switch (size) {
+        case ComponentSizeType.large:
+            return 'h-36'
+        default:
+            return 'h-32'
+    }
+}

src/Assets/Icon/ic-in-progress.svg

@@ -61,9 +61,9 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
             >
                 <div>
                     {fullScreenView ? (
-                        <ZoomOut className="zoom zoom--out pointer" onClick={toggleFullScreen} />
+                        <ZoomOut className="zoom zoom--out pointer dc__zi-4" onClick={toggleFullScreen} />
                     ) : (
-                        <ZoomIn className="zoom zoom--in pointer" onClick={toggleFullScreen} />
+                        <ZoomIn className="zoom zoom--in pointer dc__zi-4" onClick={toggleFullScreen} />
                     )}
                 </div>
             </Tippy>
@@ -72,7 +72,7 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
 }
 
 export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
-    <div style={style} className="dc__element-scroller flex column top">
+    <div style={style} className="dc__element-scroller flex column top br-4">
         <Tippy className="default-tt" arrow={false} content="Scroll to Top">
             <button
                 className="flex"

src/Common/SearchBar/SearchBar.component.tsx

@@ -0,0 +1,96 @@
+import DOMPurify from 'dompurify'
+import { getTimeDifference } from '@Shared/Helpers'
+import { LogStageAccordionProps } from './types'
+import { getStageStatusIcon } from './utils'
+import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-caret-down.svg'
+
+const LogsItemContainer = ({ children }: { children: React.ReactNode }) => (
+    <div className="display-grid dc__column-gap-10 dc__align-start logs-renderer__log-item">{children}</div>
+)
+
+const LogStageAccordion = ({
+    stage,
+    isOpen,
+    logs,
+    endTime,
+    startTime,
+    status,
+    handleStageClose,
+    handleStageOpen,
+    stageIndex,
+    isLoading,
+}: LogStageAccordionProps) => {
+    const handleAccordionToggle = () => {
+        if (isOpen) {
+            handleStageClose(stageIndex)
+        } else {
+            handleStageOpen(stageIndex)
+        }
+    }
+
+    const getFormattedTimeDifference = (): string => {
+        const timeDifference = getTimeDifference(startTime, endTime)
+        if (timeDifference === '0s') {
+            return '< 1s'
+        }
+        return timeDifference
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-8">
+            <button
+                className={`flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion ${
+                    isOpen ? 'logs-renderer__stage-accordion--open-stage' : ''
+                } dc__position-sticky dc__zi-1 dc__top-44`}
+                type="button"
+                role="tab"
+                onClick={handleAccordionToggle}
+            >
+                <div className="flexbox dc__gap-8 dc__transparent dc__align-items-center">
+                    <ICCaretDown
+                        className={`icon-dim-16 dc__no-shrink dc__transition--transform scn-0 ${!isOpen ? 'dc__flip-n90 dc__opacity-0_5' : ''}`}
+                    />
+
+                    <div className="flexbox dc__gap-12 dc__align-items-center">
+                        {getStageStatusIcon(status)}
+
+                        <h3 className="m-0 cn-0 fs-13 fw-4 lh-20 dc__word-break">{stage}</h3>
+                    </div>
+                </div>
+
+                {!!endTime && <span className="cn-0 fs-13 fw-4 lh-20">{getFormattedTimeDifference()}</span>}
+            </button>
+
+            {isOpen && (
+                <div className="flexbox-col dc__gap-4">
+                    {logs.map((log: string, logsIndex: number) => (
+                        <LogsItemContainer
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={`logs-${stage}-${startTime}-${logsIndex}`}
+                        >
+                            <span className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14">
+                                {logsIndex + 1}
+                            </span>
+                            <p
+                                className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20"
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                    __html: DOMPurify.sanitize(log),
+                                }}
+                            />
+                        </LogsItemContainer>
+                    ))}
+
+                    {isLoading && (
+                        <LogsItemContainer>
+                            <span />
+                            <div className="dc__loading-dots cn-0" />
+                        </LogsItemContainer>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default LogStageAccordion

src/Common/SearchBar/types.ts

@@ -0,0 +1,52 @@
+.logs-renderer-container {
+    .logs-renderer {
+        &__search-bar {
+            .search-bar {
+                background: transparent;
+                border-radius: 0px;
+                border: none !important;
+    
+                input {
+                    color: var(--N0);
+    
+                    &::placeholder {
+                        color: var(--N500);
+                    }
+                }
+    
+                &:hover {
+                    border: none !important;
+                    background: transparent;
+                }
+            }
+    
+            .search-bar:focus-within {
+                border: none !important;
+            }
+        }
+    
+        &__stage-accordion {
+            background-color: #0C1021;
+    
+            &:not(&--open-stage):hover {
+                background-color: rgba(44, 51, 84, 0.5);
+            }
+    
+            &--open-stage {
+                background-color: #2C3354;
+            }
+            
+        }
+    
+        &__log-item {
+            grid-template-columns: 34px auto;
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+        }
+    
+        &__filters-border-bottom {
+            border-bottom: 1px solid #2C3354;
+        }
+    }
+}