Devtron header

src/components/bulkEdits/bulkEdit.css

@@ -1,23 +1,19 @@
-.select-width{
+.select-width {
     width: 240px;
 }
 
-.updated-container{
+.updated-container {
     height: 'calc(100vh - 100px)';
     min-height: 0;
     display: grid;
     grid-template-rows: 48px 1fr;
 }
 
-.updated-container--sample{
+.updated-container--sample {
     height: calc(100vh - 150px);
     align-items: flex-start;
 }
 
-.brdr-btm{
-    box-shadow: inset 0 -1px 0 0 var(--N200);
-}
-
 .output-drawer {
     position: fixed;
     bottom: 0;
@@ -29,12 +25,12 @@
     height: 100%;
 }
 
-.right-readme{
+.right-readme {
     height: 100%;
     overflow: auto;
 }
 
-.bulk-desciription{
+.bulk-desciription {
     box-shadow: inset 0 -1px 0 0 var(--N200);
     background-color: #f3f0ff;
 }
@@ -43,54 +39,54 @@
     border-bottom: 1px solid #d0d4d9;
 }
 
-.border-top{
-    border-top: 1px solid #d0d4d9; 
+.border-top {
+    border-top: 1px solid #d0d4d9;
 }
 
-.border-right{
-    border-right: 1px solid #d0d4d9; 
+.border-right {
+    border-right: 1px solid #d0d4d9;
 }
 
-.bulk-output-drawer{
+.bulk-output-drawer {
     height: 280px;
 }
 
-.tertiary-tab__radio input:checked~.tertiary-output-tab{
+.tertiary-tab__radio input:checked ~ .tertiary-output-tab {
     color: var(--B500);
     border-bottom: solid 2px var(--B500);
 }
 
-.height{
+.height {
     height: calc(100% - 100px);
 }
 
-.code-editor-readme{
+.code-editor-readme {
     display: grid;
-    grid-template-columns: auto auto ;
+    grid-template-columns: auto auto;
 }
 
-.bulk-container{
-    display:grid;
+.bulk-container {
+    display: grid;
     grid-template-columns: 50% 50%;
     height: 100%;
     background-color: white;
 }
 
-.code-editor-body{
+.code-editor-body {
     overflow: auto;
     height: calc(100vh - 150px);
     background: white;
 }
 
-.bulk-output-body{
+.bulk-output-body {
     letter-spacing: 0.2px;
     height: calc(100vh - 600px);
     overflow: scroll;
     font-family: monospace;
 }
 
-.bulk-run-button{
+.bulk-run-button {
     max-height: 32px;
     min-width: 72px;
     padding: 0 12px;
-}
+}

src/components/common/header/PageHeader.tsx

@@ -0,0 +1,61 @@
+import Tippy from '@tippyjs/react'
+import React, { useContext } from 'react'
+import { NavLink } from 'react-router-dom'
+import { DOCUMENTATION, SERVER_MODE, URLS } from '../../../config'
+import { mainContext } from '../../common/navigation/NavigationRoutes'
+import { ReactComponent as Question } from '../../../assets/icons/ic-help-outline.svg'
+
+export interface PageHeaderType {
+    headerName: string
+    buttonText?: string
+    onClickCreateButton?: () => void
+    serverModeName?: string
+    isTippyShown?: boolean
+    isShownCreatedButton?: boolean
+}
+
+function PageHeader({
+    headerName,
+    buttonText = '',
+    onClickCreateButton,
+    serverModeName,
+    isTippyShown = false,
+    isShownCreatedButton = false,
+}: PageHeaderType) {
+    const { serverMode } = useContext(mainContext)
+
+    return (
+        <div className={`page-header flex content-space cn-9 bcn-0 pl-20 pr-20`}>
+            <h1 className="page-header__title flex left fs-14 fw-6 lh-20">
+                {headerName}
+                {isTippyShown && (
+                    <Tippy
+                        className="default-tt "
+                        arrow={false}
+                        placement="top"
+                        content={<span style={{ display: 'block', width: '66px' }}> Learn more </span>}
+                    >
+                        <a
+                            className="learn-more__href flex"
+                            href={DOCUMENTATION.BULK_UPDATE}
+                            rel="noreferrer noopener"
+                            target="_blank"
+                        >
+                            <Question className="icon-dim-20 ml-16 cursor" />
+                        </a>
+                    </Tippy>
+                )}
+            </h1>
+            {isShownCreatedButton && serverMode == serverModeName && (
+                <button type="button" className="cta h-32 lh-n" onClick={() => onClickCreateButton()}>
+                    Create {buttonText}
+                    <span className="round-button__icon">
+                        <i className="fa fa-caret-down" aria-hidden="true"></i>
+                    </span>
+                </button>
+            )}
+        </div>
+    )
+}
+
+export default PageHeader

src/components/common/index.ts

@@ -1,50 +1,51 @@
-export * from './errorScreens/error';
-export * from './errorScreens/error';
-export { default as ErrorBoundary } from './errorBoundary';
-export { default as RectangularEdge } from './edge/rectangularEdge';
-export { default as PopupMenu } from './PopupMenu/PopupMenu';
-export { default as Select } from './Select/Select';
-export * from './MultiSelect';
-export { default as List } from './List/List';
+export * from './errorScreens/error'
+export * from './errorScreens/error'
+export { default as ErrorBoundary } from './errorBoundary'
+export { default as RectangularEdge } from './edge/rectangularEdge'
+export { default as PopupMenu } from './PopupMenu/PopupMenu'
+export { default as Select } from './Select/Select'
+export * from './MultiSelect'
+export { default as List } from './List/List'
 export { default as LazyImage } from './LazyImage/LazyImage'
-export * from './formFields/CopyButton';
-export * from './formFields/Typeahead';
-export * from './formFields/ButtonWithLoader';
-export * from './formFields/Checkbox';
-export * from './formFields/DevtronSwitch';
-export * from './modals/OpaqueModal';
-export * from './modals/VisibleModal';
-export * from './modals/VisibleModal2';
-export * from './dialogs/DeleteDialog';
-export * from './modals/Modal';
-export * from './dialogs/DialogForm';
-export { default as ConfirmationDialog } from './dialogs/ConfirmationDialog';
-export { default as Toggle } from './Toggle/Toggle';
-export * from './icons/Icons';
-export * from './icons/Progressing';
-export * from './filter/filters';
-export * from './filter/types';
-export * from './pagination/Pagination';
-export { default as RadioGroup } from './RadioGroup/RadioGroup';
-export * from './helpers/Helpers';
-export * from './helpers/isSubset';
-export * from './helpers/workflowURL';
-export * from './helpers/isEmpty';
-export * from './helpers/git';
-export * from './helpers/UseWindowSize';
-export * from './helpers/util';
-export * from './helpers/time';
-export * from './ToastBody';
+export * from './formFields/CopyButton'
+export * from './formFields/Typeahead'
+export * from './formFields/ButtonWithLoader'
+export * from './formFields/Checkbox'
+export * from './formFields/DevtronSwitch'
+export * from './modals/OpaqueModal'
+export * from './modals/VisibleModal'
+export * from './modals/VisibleModal2'
+export * from './dialogs/DeleteDialog'
+export * from './modals/Modal'
+export * from './dialogs/DialogForm'
+export { default as ConfirmationDialog } from './dialogs/ConfirmationDialog'
+export { default as Toggle } from './Toggle/Toggle'
+export * from './icons/Icons'
+export * from './icons/Progressing'
+export * from './filter/filters'
+export * from './filter/types'
+export * from './pagination/Pagination'
+export { default as RadioGroup } from './RadioGroup/RadioGroup'
+export * from './helpers/Helpers'
+export * from './helpers/isSubset'
+export * from './helpers/workflowURL'
+export * from './helpers/isEmpty'
+export * from './helpers/git'
+export * from './helpers/UseWindowSize'
+export * from './helpers/util'
+export * from './helpers/time'
+export * from './ToastBody'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
 export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
-export { GitMaterialInfo, GitCommitDetailCard } from './GitMaterialInfo';
-export * from './GitMaterialInfo';
-export * from './Contexts';
-export { CustomPassword } from './formFields/CustomPassword';
-export { default as Drawer } from './Drawer/Drawer';
-export { CustomInput } from './formFields/CustomInput';
-export * from './security/ScanVulnerabilitiesTable';
-export * from './security/ScanDetailsModal';
-export * from './DatePickers/Calender';
-export * from './DatePickers/DayPickerRangeController';
-export * from './helpers/compareVersion';
+export { GitMaterialInfo, GitCommitDetailCard } from './GitMaterialInfo'
+export * from './GitMaterialInfo'
+export * from './Contexts'
+export { CustomPassword } from './formFields/CustomPassword'
+export { default as Drawer } from './Drawer/Drawer'
+export { CustomInput } from './formFields/CustomInput'
+export * from './security/ScanVulnerabilitiesTable'
+export * from './security/ScanDetailsModal'
+export * from './DatePickers/Calender'
+export * from './DatePickers/DayPickerRangeController'
+export * from './helpers/compareVersion'
+export * from './header/PageHeader'

src/components/deploymentGroups/BulkActions.scss

@@ -7,7 +7,7 @@
         $minWidth: 800px;
         .form-section {
             width: 100%;
-            flex: 1 0 calc( 100% - 64px);
+            flex: 1 0 calc(100% - 64px);
             .form-container {
                 width: $minWidth;
                 margin: 0 auto;
@@ -81,7 +81,7 @@
                 .ci-pipelines,
                 .environments {
                     overflow: auto;
-                    input[type="radio"] {
+                    input[type='radio'] {
                         margin-right: 4px;
                     }
                 }
@@ -190,7 +190,7 @@
                             input {
                                 border: unset;
                                 background: transparent;
-                                width: calc( 100% - 24px)
+                                width: calc(100% - 24px);
                             }
                         }
                     }
@@ -216,7 +216,7 @@
                         height: 40px;
                         font-size: 14px;
                         color: var(--N900);
-                        input[type="checkbox"] {
+                        input[type='checkbox'] {
                             margin-right: 12px;
                             height: 16px;
                             width: 16px;
@@ -251,12 +251,6 @@
     }
 }
 
-.deployment-group-list-page{
-    height: 100%;
-    display: grid;
-    grid-template-rows: 80px 1fr;
-}
-
 .deployment-details-body {
     background-color: var(--window-bg);
     padding: 20px 24px;
@@ -489,7 +483,7 @@ table.group-details {
     fill: var(--N600);
 }
 
-.deployment-group__actions .popup-button:hover svg path[fill="#999"] {
+.deployment-group__actions .popup-button:hover svg path[fill='#999'] {
     fill: var(--N600);
 }
 
@@ -510,4 +504,4 @@ table.group-details {
 .deployment-detail-page__more-actions--button {
     padding: 0 16px;
     height: 40px;
-}
+}