diff --git a/package-lock.json b/package-lock.json index 17c163f6a..3f402a30e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.13.0-pre-9", + "version": "1.14.0-pre-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.13.0-pre-9", + "version": "1.14.0-pre-0", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index c6ae0f00a..733ca4fa2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.13.0-pre-9", + "version": "1.14.0-pre-0", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Assets/IconV2/ic-terminal.svg b/src/Assets/IconV2/ic-terminal.svg new file mode 100644 index 000000000..0ebbdcb7c --- /dev/null +++ b/src/Assets/IconV2/ic-terminal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-thermometer.svg b/src/Assets/IconV2/ic-thermometer.svg new file mode 100644 index 000000000..470af06b5 --- /dev/null +++ b/src/Assets/IconV2/ic-thermometer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index 49ce89f06..3243f76c2 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -22,16 +22,6 @@ export const DEVTRON_HOME_PAGE = 'https://devtron.ai/' export const DOCUMENTATION_VERSION = '/v/v0.7' export const DISCORD_LINK = 'https://discord.devtron.ai/' export const DEFAULT_JSON_SCHEMA_URI = 'https://json-schema.org/draft/2020-12/schema' -export const DOCUMENTATION = { - APP_METRICS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/app-details/app-metrics`, - 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`, - ENTERPRISE_LICENSE: `${DOCUMENTATION_HOME_PAGE}/enterprise-license`, - KUBE_CONFIG: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/resource-browser#running-kubectl-commands-locally`, - TENANT_INSTALLATION: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/software-distribution-hub/tenants`, -} export const PATTERNS = { STRING: /^[a-zA-Z0-9_]+$/, diff --git a/src/Common/CustomTagSelector/PropagateTagInfo.tsx b/src/Common/CustomTagSelector/PropagateTagInfo.tsx index e15f2d119..d09e6739b 100644 --- a/src/Common/CustomTagSelector/PropagateTagInfo.tsx +++ b/src/Common/CustomTagSelector/PropagateTagInfo.tsx @@ -14,12 +14,10 @@ * limitations under the License. */ -import React from 'react' import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg' import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg' import { TippyCustomized } from '../TippyCustomized' import { TippyTheme } from '../Types' -import { DOCUMENTATION } from '../Constants' export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) { const additionalInfo = () => ( @@ -47,7 +45,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean showCloseButton trigger="click" interactive - documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS} + documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"} documentationLinkText="View Documentation" >
diff --git a/src/Common/SegmentedBarChart/SegmentedBarChart.tsx b/src/Common/SegmentedBarChart/SegmentedBarChart.tsx index 33d64f26d..cf842a68c 100644 --- a/src/Common/SegmentedBarChart/SegmentedBarChart.tsx +++ b/src/Common/SegmentedBarChart/SegmentedBarChart.tsx @@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types' import './styles.scss' const SegmentedBarChart: React.FC = ({ + hideLegend, entities: userEntities = [FALLBACK_ENTITY], rootClassName, countClassName, @@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC = ({ const total = entities.reduce((sum, entity) => entity.value + sum, 0) const filteredEntities = entities.filter((entity) => !!entity.value) - const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%` + const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%` const renderLabel = (label: Entity['label']) => isLoading ? ( @@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC = ({ )) } - const renderLegend = () => ( -
- {renderContent()} -
- ) + const renderLegend = () => { + if (hideLegend) { + return null + } + + return ( +
+ {renderContent()} +
+ ) + } const renderBar = () => ( = ({ className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${ index === map.length - 1 ? 'dc__right-radius-4' : '' } ${isLoading ? 'shimmer' : ''}`} - style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }} + style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }} /> ))} diff --git a/src/Common/SegmentedBarChart/types.ts b/src/Common/SegmentedBarChart/types.ts index ea56fc846..b0153715f 100644 --- a/src/Common/SegmentedBarChart/types.ts +++ b/src/Common/SegmentedBarChart/types.ts @@ -20,8 +20,17 @@ export type Entity = { value: number } -export interface SegmentedBarChartProps { - entities: NonNullable +type EntityPropType = + | { + hideLegend?: false + entities: NonNullable + } + | { + hideLegend: true + entities: NonNullable & { label?: never }>[] + } + +export type SegmentedBarChartProps = { rootClassName?: string countClassName?: string labelClassName?: string @@ -29,4 +38,4 @@ export interface SegmentedBarChartProps { swapLegendAndBar?: boolean showAnimationOnBar?: boolean isLoading?: boolean -} +} & EntityPropType diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx index fbfaa4ec9..32ec5bbb3 100644 --- a/src/Common/TippyCustomized.tsx +++ b/src/Common/TippyCustomized.tsx @@ -19,15 +19,15 @@ import Tippy from '@tippyjs/react' import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg' import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg' import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg' -import { ReactComponent as ICOpenInNew } from '../Assets/Icon/ic-open-in-new.svg' import 'tippy.js/animations/shift-toward-subtle.css' import 'tippy.js/animations/shift-toward.css' import { TippyCustomizedProps, TippyTheme } from './Types' import { not, stopPropagation } from './Helper' +import { DocLink } from '../Shared/DocLink' // This component will handle some of the new tippy designs and interactions // So this can be updated to support further for new features or interactions -export const TippyCustomized = (props: TippyCustomizedProps) => { +export const TippyCustomized = (props: TippyCustomizedProps) => { const tippyRef = useRef(null) const [showHeadingInfo, setShowHeadingInfo] = useState(false) const isWhiteTheme = props.theme === TippyTheme.white @@ -79,6 +79,8 @@ export const TippyCustomized = (props: TippyCustomizedProps) => { additionalContent, documentationLink, documentationLinkText, + isEnterprise, + isExternalLink, } = props return ( <> @@ -156,17 +158,16 @@ export const TippyCustomized = (props: TippyCustomizedProps) => { )} {additionalContent} {documentationLink && ( -
- + - {documentationLinkText || 'Learn more'} - - + isEnterprise={isEnterprise} + isExternalLink={isExternalLink} + docLinkKey={documentationLink} + />
)} diff --git a/src/Common/Types.ts b/src/Common/Types.ts index fcbb95b57..2a5597eff 100644 --- a/src/Common/Types.ts +++ b/src/Common/Types.ts @@ -33,6 +33,7 @@ import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, + DOCUMENTATION, RefVariableType, SortingOrder, TaskErrorObj, @@ -119,52 +120,60 @@ export interface CheckboxProps { children?: ReactNode } -export interface TippyCustomizedProps extends Pick { - theme: TippyTheme - visible?: boolean - heading?: ReactNode | string - headingInfo?: ReactNode | string - noHeadingBorder?: boolean - infoTextHeading?: string - hideHeading?: boolean - placement?: TippyProps['placement'] - className?: string - Icon?: React.FunctionComponent> - iconPath?: string - iconClass?: string - 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?: React.ReactNode - showCloseButton?: boolean - arrow?: boolean - interactive?: boolean - showOnCreate?: boolean - trigger?: string - animation?: string - duration?: number - additionalContent?: ReactNode - documentationLink?: string - documentationLinkText?: string - children: React.ReactElement - disableClose?: boolean -} - -export interface InfoIconTippyProps +export type TippyWithBaseDocLinkTypes = { + isExternalLink?: T + isEnterprise?: boolean + documentationLink?: T extends true ? string : keyof typeof DOCUMENTATION +} + +export type TippyCustomizedProps = Pick & + TippyWithBaseDocLinkTypes & { + theme: TippyTheme + visible?: boolean + heading?: ReactNode | string + headingInfo?: ReactNode | string + noHeadingBorder?: boolean + infoTextHeading?: string + hideHeading?: boolean + placement?: TippyProps['placement'] + className?: string + Icon?: React.FunctionComponent> + iconPath?: string + iconClass?: string + 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?: React.ReactNode + showCloseButton?: boolean + arrow?: boolean + interactive?: boolean + showOnCreate?: boolean + trigger?: string + animation?: string + duration?: number + additionalContent?: ReactNode + documentationLinkText?: string + children: React.ReactElement + disableClose?: boolean + } + +export interface InfoIconTippyProps extends Pick< - TippyCustomizedProps, + TippyCustomizedProps, | 'heading' | 'infoText' | 'iconClass' - | 'documentationLink' | 'documentationLinkText' | 'additionalContent' | 'placement' | 'Icon' | 'headingInfo' + | 'documentationLink' + | 'isEnterprise' + | 'isExternalLink' > { dataTestid?: string - children?: TippyCustomizedProps['children'] + children?: TippyCustomizedProps['children'] iconClassName?: string buttonPadding?: string } diff --git a/src/Common/index.ts b/src/Common/index.ts index dc619f806..95b97700f 100644 --- a/src/Common/index.ts +++ b/src/Common/index.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +export * from '../Shared/DocLink' export * from './AddCDButton' export * from './API' export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb' diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx index 4ca82f852..5ffea8c0e 100644 --- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx +++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx @@ -16,7 +16,6 @@ import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg' import { Checkbox } from '@Common/Checkbox' -import { DOCUMENTATION } from '@Common/Constants' import { Progressing } from '@Common/Progressing' import { Tooltip } from '@Common/Tooltip' import { CHECKBOX_VALUE } from '@Common/Types' @@ -96,7 +95,7 @@ const DTApplicationMetricsFormField = ({ diff --git a/src/Pages/ResourceBrowser/NodeDrainOptions.tsx b/src/Pages/ResourceBrowser/NodeDrainOptions.tsx index 5cf954526..77d293d7b 100644 --- a/src/Pages/ResourceBrowser/NodeDrainOptions.tsx +++ b/src/Pages/ResourceBrowser/NodeDrainOptions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { ChangeEvent, FocusEvent } from 'react' +import { ChangeEvent, FocusEvent, useEffect } from 'react' import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg' import { Checkbox } from '@Common/Checkbox' @@ -37,6 +37,10 @@ const NodeDrainOptions = ({ ignoreAllDaemonSets: false, } + useEffect(() => { + setNodeDrainOptions(nodeDrainOptions) + }, []) + const handleGracePeriodOnChange = (e: ChangeEvent) => { setNodeDrainOptions({ ...nodeDrainOptions, diff --git a/src/Pages/ResourceBrowser/types.ts b/src/Pages/ResourceBrowser/types.ts index 23581d8b2..425a28acd 100644 --- a/src/Pages/ResourceBrowser/types.ts +++ b/src/Pages/ResourceBrowser/types.ts @@ -16,6 +16,7 @@ import { Dispatch, ReactElement, SetStateAction } from 'react' +import { TabProps } from '@Shared/Components' import { InstallationClusterType } from '@Shared/types' import { NodeActionRequest } from './ResourceBrowser.Types' @@ -113,6 +114,11 @@ export interface AdditionalConfirmationModalOptionsProps { children?: ReactElement } +export type NodeDetailTabsInfoType = (Pick & { + id: string + renderComponent: () => JSX.Element +})[] + export interface InstallationClusterStepType { lastTransitionTime: string lastProbeTime: string diff --git a/src/Shared/Components/BulkOperations/types.ts b/src/Shared/Components/BulkOperations/types.ts index b3a1d5bc7..eea19a919 100644 --- a/src/Shared/Components/BulkOperations/types.ts +++ b/src/Shared/Components/BulkOperations/types.ts @@ -17,7 +17,7 @@ import { ReactNode } from 'react' import { APIOptions, DrawerProps } from '@Common/index' -import { SegmentedBarChartProps } from '@Common/SegmentedBarChart' +import { Entity } from '@Common/SegmentedBarChart/types' import { ConfirmationModalProps } from '../ConfirmationModal/types' import { getProgressingStateForStatus } from '../Security' @@ -64,7 +64,7 @@ export interface OperationResultStoreType { getResults: ( sortComparator: (a: BulkOperationResultType, b: BulkOperationResultType) => number, ) => BulkOperationResultWithIdType[] - getBarChartEntities: () => SegmentedBarChartProps['entities'] + getBarChartEntities: () => NonNullable getResultsStatusCount: () => Record getSize: () => number updateResultStatus: ( diff --git a/src/Shared/Components/CICDHistory/Artifacts.tsx b/src/Shared/Components/CICDHistory/Artifacts.tsx index 9e4f2beda..1975273eb 100644 --- a/src/Shared/Components/CICDHistory/Artifacts.tsx +++ b/src/Shared/Components/CICDHistory/Artifacts.tsx @@ -24,17 +24,11 @@ import folder from '@Icons/ic-folder.svg' import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg' import { ReactComponent as MechanicalOperation } from '@Icons/ic-mechanical-operation.svg' import noartifact from '@Images/no-artifact.webp' +import { DocLink } from '@Shared/DocLink' import { getIsApprovalPolicyConfigured } from '@Shared/Helpers' import { useDownload } from '@Shared/Hooks' -import { - ClipboardButton, - DOCUMENTATION, - extractImage, - GenericEmptyState, - ImageTagsContainer, - useGetUserRoles, -} from '../../../Common' +import { ClipboardButton, extractImage, GenericEmptyState, ImageTagsContainer, useGetUserRoles } from '../../../Common' import { EMPTY_STATE_STATUS } from '../../constants' import { TargetPlatformBadgeList } from '../TargetPlatforms' import { TERMINAL_STATUS_MAP } from './constants' @@ -274,14 +268,11 @@ const Artifacts = ({ {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.StoreFiles} - - {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage} - +
diff --git a/src/Shared/Components/CICDHistory/LogsRenderer.tsx b/src/Shared/Components/CICDHistory/LogsRenderer.tsx index 5f82948ff..e0f9266e2 100644 --- a/src/Shared/Components/CICDHistory/LogsRenderer.tsx +++ b/src/Shared/Components/CICDHistory/LogsRenderer.tsx @@ -23,6 +23,7 @@ import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg' import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg' import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg' import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants' +import { DocLink } from '@Shared/DocLink' import { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers' import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers' @@ -30,7 +31,6 @@ import { ReactComponent as OpenInNew } from '../../../Assets/Icon/ic-arrow-out.s import { ReactComponent as HelpIcon } from '../../../Assets/Icon/ic-help.svg' import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-filled.svg' import { - DOCUMENTATION, Host, Progressing, ROUTES, @@ -82,14 +82,8 @@ const renderBlobNotConfigured = (): JSX.Element => (
Want to store logs to view later? - - Configure blob storage - + +
diff --git a/src/Shared/Components/CodeEditor/codeEditor.scss b/src/Shared/Components/CodeEditor/codeEditor.scss index b25e43aef..cdaac94b2 100644 --- a/src/Shared/Components/CodeEditor/codeEditor.scss +++ b/src/Shared/Components/CodeEditor/codeEditor.scss @@ -131,6 +131,10 @@ .cm-panels-top { border-bottom: none; + + &:has(.code-editor__search) { + z-index: 0; + } } // TOOLTIPS diff --git a/src/Shared/Components/Error/ErrorBar.tsx b/src/Shared/Components/Error/ErrorBar.tsx index 1cf0b7bc1..ee5c2781f 100644 --- a/src/Shared/Components/Error/ErrorBar.tsx +++ b/src/Shared/Components/Error/ErrorBar.tsx @@ -17,7 +17,7 @@ import { NavLink } from 'react-router-dom' import { ReactComponent as ErrorInfo } from '../../../Assets/Icon/ic-errorInfo.svg' -import { URLS } from '../../../Common' +import { DISCORD_LINK, URLS } from '../../../Common' import { AppType } from '../../types' import { ErrorBarType } from './types' import { getIsImagePullBackOff, renderErrorHeaderMessage } from './utils' @@ -90,7 +90,7 @@ const ErrorBar = ({ appDetails, useParentMargin = true }: ErrorBarType) => {
Facing issues? >) => { const renderImage = () => { if (!SVGImage) { @@ -64,15 +64,14 @@ const FeatureDescriptionModalContent = ({ className={`flex right w-100 dc__align-right dc__border-top-n1 px-20 py-16 ${docLink ? 'dc__content-space' : 'right'}`} > {docLink.length > 0 && ( - - {BUTTON_TEXT.VIEW_DOCUMENTATION} - - + )}
diff --git a/src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx b/src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx index 88fa2f878..f36c2d2b4 100644 --- a/src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx +++ b/src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx @@ -38,6 +38,7 @@ const FeatureTitleWithInfo = ({ additionalContent, showInfoIcon = false, tabsConfig, + isEnterprise, }: DescriptorProps) => { const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false) const onClickInfoIcon = () => { @@ -63,6 +64,7 @@ const FeatureTitleWithInfo = ({ documentationLink={docLink} documentationLinkText={docLinkText} dataTestid="info-tippy-button" + isEnterprise={isEnterprise} /> ) @@ -95,6 +97,7 @@ const FeatureTitleWithInfo = ({ { renderDescriptionContent?: () => ReactNode - docLink?: string + docLink?: DocLinkProps['docLinkKey'] imageVariant?: ImageType SVGImage?: React.FunctionComponent> imageStyles?: React.CSSProperties @@ -53,6 +55,7 @@ export type FeatureDescriptionModalProps = { title: string closeModalText?: string closeModal?: () => void + isEnterprise?: boolean } & ( | (BaseFeatureDescriptionModalProps & { tabsConfig?: never @@ -81,4 +84,5 @@ export type DescriptorProps = ( * @default false */ showInfoIcon?: boolean + isEnterprise?: boolean } diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx index e30dfdedb..52fd08531 100644 --- a/src/Shared/Components/Header/PageHeader.tsx +++ b/src/Shared/Components/Header/PageHeader.tsx @@ -48,6 +48,7 @@ const PageHeader = ({ onClose, markAsBeta, tippyProps, + isEnterprise, }: PageHeaderType) => { const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard, licenseData } = useMainContext() @@ -154,6 +155,8 @@ const PageHeader = ({ interactive arrow onClose={handleCloseSwitchThemeLocationTippyChange} + isEnterprise={isEnterprise} + documentationLink={tippyRedirectLink} >