Merge branch 'main' of github.com:devtron-labs/devtron-fe-common-lib into feat/config-diff-phase-1

Author: RohitRaj011

package-lock.json

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

package.json

@@ -26,6 +26,7 @@ export const DOCUMENTATION = {
     APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
     APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
     BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
+    GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
 }
 
 export const PATTERNS = {

src/Common/Constants.ts

@@ -17,7 +17,7 @@
 import notFound from '../Assets/Img/ic-not-found.svg'
 import badRequest from '../Assets/Img/ic-page-not-found.svg'
 import unauthorized from '../Assets/Img/ic-not-authorized.svg'
-import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN, ROUTES } from './Constants'
+import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN } from './Constants'
 import Reload from './Reload'
 import ErrorPage from './ErrorPage'
 import { ErrorScreenManagerProps, ImageType } from './Types'
@@ -28,7 +28,7 @@ const ErrorScreenManager = ({
     subtitle,
     reloadClass,
     heightToDeduct,
-    redirectURL = ROUTES.APP_LIST,
+    redirectURL,
 }: ErrorScreenManagerProps) => {
     const getMessage = () => {
         switch (code) {

src/Common/ErrorScreenManager.tsx

@@ -23,22 +23,23 @@ import { Checkbox } from './Checkbox'
 import { CHECKBOX_VALUE } from './Types'
 
 export const Option = (props) => {
-    const { selectOption, data } = props
+    const { selectOption, data, isDisabled } = props
 
     const handleChange = (e) => {
         selectOption(data)
     }
 
     return (
         <div
-            className="flex left pl-12 cursor dc__gap-8"
+            className={`flex left pl-12 cursor dc__gap-8 ${isDisabled ? 'dc__disabled' : ''}`}
             style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}
         >
             <Checkbox
                 isChecked={props.isSelected || false}
                 onChange={handleChange}
                 value={CHECKBOX_VALUE.CHECKED}
                 rootClassName="mb-0 w-20"
+                disabled={isDisabled || false}
             />
             <components.Option {...props} />
         </div>

src/Common/MultiSelectCustomization.tsx

@@ -100,7 +100,7 @@ export interface TippyCustomizedProps {
     iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
     onImageLoadError?: (e) => void
     onClose?: () => void
-    infoText?: string
+    infoText?: React.ReactNode
     showCloseButton?: boolean
     arrow?: boolean
     interactive?: boolean

src/Common/Types.ts

@@ -15,7 +15,7 @@
  */
 
 import { DescriptorProps } from './types'
-import { BreadCrumb } from '../../../Common'
+import { BreadCrumb, DOCUMENTATION } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { InfoIconTippy } from '../../../Shared'
 
@@ -34,7 +34,9 @@ const Descriptor = ({
                 infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
                 additionalContent={tippyAdditionalContent}
                 heading={BUILD_INFRA_TEXT.HEADING}
-                iconClassName="icon-dim-20"
+                documentationLink={DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA}
+                documentationLinkText="View Documentation"
+                iconClassName="icon-dim-20 fcn-6"
             />
         </div>
 

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as ICDropdown } from '../../../Assets/Icon/ic-chevron-do
 import { PopupMenu } from '../../../Common'
 import { ButtonWithSelectorProps } from './types'
 import './buttonWithSelector.scss'
+import { ButtonWithLoader } from '../ButtonWithLoader'
 
 /**
  * Button With Selector
@@ -42,19 +43,21 @@ const ButtonWithSelector = ({
     popUpBodyClassName = '',
     showPopUp = true,
     disabled = false,
+    isLoading = false,
 }: ButtonWithSelectorProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
 
     return (
         <div className="flexbox bcb-5 br-4">
-            <button
-                className={`cta flex h-28 ${showPopUp ? 'dc__no-right-radius' : ''} dc__no-border-imp fs-12 fw-6 lh-20-imp ${className}`}
+            <ButtonWithLoader
+                isLoading={isLoading}
+                rootClassName={`cta flex h-28 ${showPopUp ? 'dc__no-right-radius' : ''} dc__no-border-imp fs-12 fw-6 lh-20-imp ${className}`}
                 type="button"
                 onClick={onClick}
-                disabled={disabled}
+                disabled={isLoading || disabled}
             >
                 {content}
-            </button>
+            </ButtonWithLoader>
             {showPopUp && (
                 <PopupMenu autoClose autoPosition onToggleCallback={setIsMenuOpen}>
                     <PopupMenu.Button

src/Shared/Components/ButtonWithSelector/ButtonWithSelector.tsx

@@ -24,4 +24,5 @@ export interface ButtonWithSelectorProps {
     popUpBodyClassName?: string
     showPopUp?: boolean
     disabled?: boolean
+    isLoading?: boolean
 }

src/Shared/Components/ButtonWithSelector/types.ts

@@ -21,6 +21,7 @@ export { default as CDEmptyState } from './CDEmptyState'
 export { default as DeploymentStatusDetailBreakdown } from './DeploymentStatusBreakdown'
 export { default as AppStatusDetailsChart } from './AppStatusDetailsChart'
 export { default as DeploymentDetailSteps } from './DeploymentDetailSteps'
+export { default as DetectBottom } from './DetectBottom'
 export * from './types'
 export * from './service'
 export * from './History.components'