diff --git a/package-lock.json b/package-lock.json index 457ceb0fd..11a9c4e70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-8", + "version": "1.13.0-pre-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-8", + "version": "1.13.0-pre-0", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index c0b8c17ef..897a8a4e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-8", + "version": "1.13.0-pre-0", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Assets/IconV2/ic-amazon-eks.svg b/src/Assets/IconV2/ic-amazon-eks.svg new file mode 100644 index 000000000..ca6d19c47 --- /dev/null +++ b/src/Assets/IconV2/ic-amazon-eks.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Assets/IconV2/ic-arrow-square-out.svg b/src/Assets/IconV2/ic-arrow-square-out.svg new file mode 100644 index 000000000..0cf743643 --- /dev/null +++ b/src/Assets/IconV2/ic-arrow-square-out.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-azure-aks.svg b/src/Assets/IconV2/ic-azure-aks.svg new file mode 100644 index 000000000..34b9e4d64 --- /dev/null +++ b/src/Assets/IconV2/ic-azure-aks.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Assets/IconV2/ic-caret-down-small.svg b/src/Assets/IconV2/ic-caret-down-small.svg new file mode 100644 index 000000000..9cd3df6fe --- /dev/null +++ b/src/Assets/IconV2/ic-caret-down-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-caret-right.svg b/src/Assets/IconV2/ic-caret-right.svg new file mode 100644 index 000000000..3a48b9552 --- /dev/null +++ b/src/Assets/IconV2/ic-caret-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-cloud-vms.svg b/src/Assets/IconV2/ic-cloud-vms.svg new file mode 100644 index 000000000..a713f02ad --- /dev/null +++ b/src/Assets/IconV2/ic-cloud-vms.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Assets/IconV2/ic-expand-right-sm.svg b/src/Assets/IconV2/ic-expand-right-sm.svg new file mode 100644 index 000000000..d9240b212 --- /dev/null +++ b/src/Assets/IconV2/ic-expand-right-sm.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-gift-gradient.svg b/src/Assets/IconV2/ic-gift-gradient.svg new file mode 100644 index 000000000..a738c1fd6 --- /dev/null +++ b/src/Assets/IconV2/ic-gift-gradient.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/Assets/IconV2/ic-google-gke.svg b/src/Assets/IconV2/ic-google-gke.svg new file mode 100644 index 000000000..89920c7ce --- /dev/null +++ b/src/Assets/IconV2/ic-google-gke.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/Assets/IconV2/ic-install.svg b/src/Assets/IconV2/ic-install.svg new file mode 100644 index 000000000..dedf568da --- /dev/null +++ b/src/Assets/IconV2/ic-install.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-k3s.svg b/src/Assets/IconV2/ic-k3s.svg new file mode 100644 index 000000000..3b55449c4 --- /dev/null +++ b/src/Assets/IconV2/ic-k3s.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-kind.svg b/src/Assets/IconV2/ic-kind.svg new file mode 100644 index 000000000..0d964b143 --- /dev/null +++ b/src/Assets/IconV2/ic-kind.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/Assets/IconV2/ic-laptop.svg b/src/Assets/IconV2/ic-laptop.svg new file mode 100644 index 000000000..c8077e38c --- /dev/null +++ b/src/Assets/IconV2/ic-laptop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-minikube.svg b/src/Assets/IconV2/ic-minikube.svg new file mode 100644 index 000000000..c1b2027d8 --- /dev/null +++ b/src/Assets/IconV2/ic-minikube.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/Assets/IconV2/ic-mobile.svg b/src/Assets/IconV2/ic-mobile.svg new file mode 100644 index 000000000..5329e48d5 --- /dev/null +++ b/src/Assets/IconV2/ic-mobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/IconV2/ic-ubuntu.svg b/src/Assets/IconV2/ic-ubuntu.svg new file mode 100644 index 000000000..ef0b638ba --- /dev/null +++ b/src/Assets/IconV2/ic-ubuntu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/IconV2/ic-user-circle.svg b/src/Assets/IconV2/ic-user-circle.svg new file mode 100644 index 000000000..0870f98db --- /dev/null +++ b/src/Assets/IconV2/ic-user-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-wifi-slash.svg b/src/Assets/IconV2/ic-wifi-slash.svg new file mode 100644 index 000000000..a319b6559 --- /dev/null +++ b/src/Assets/IconV2/ic-wifi-slash.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Common/Checkbox.tsx b/src/Common/Checkbox.tsx deleted file mode 100644 index ee6b18d41..000000000 --- a/src/Common/Checkbox.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { Component } from 'react' -import { CheckboxProps } from './Types' - -/* -Valid States of Checkbox: -1. disabled: true, checked: false, value: XXX -2. disabled: true, checked: true, value: INTERMIDIATE -3. disabled: true, checked: true, value: CHECKED -4. disabled: true, checked: false, value: XXX -5. disabled: false, checked: true, value: INTERMIDIATE -6. disabled: false, checked: true, value: CHECKED -*/ -// TODO: Associate label with input element -export class Checkbox extends Component { - render() { - const rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}` - return ( - - ) - } -} diff --git a/src/Common/Checkbox/Checkbox.scss b/src/Common/Checkbox/Checkbox.scss new file mode 100644 index 000000000..54e3a8ad6 --- /dev/null +++ b/src/Common/Checkbox/Checkbox.scss @@ -0,0 +1,99 @@ +.form__checkbox-label { + font-weight: 400; + display: inline-block; + margin-left: 12px; + line-height: 16px; +} + +.form__checkbox__root { + &--gap-8 { + .form__checkbox-label { + margin-left: 8px; + } + } +} + +.form__checkbox-check { + display: none; +} + +$checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg'); + +.form__checkbox-container { + width: 20px; + height: 20px; + position: absolute; + left: 0; + background-size: contain; + background-repeat: no-repeat; + background-image: url('./assets/ic-checkbox-unselected.svg'); + transition: background-image 0.17s; + + &:hover { + background-image: $checkbox-hover-bg-image; + } +} + +// Class for checkbox parent container, if added to parent container, hover effect will be applied to checkbox +.checkbox__parent-container { + &:hover { + .form__checkbox-container { + background-image: $checkbox-hover-bg-image; + } + } +} + +.form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container { + background-image: url('./assets/ic-checkbox-intermediate.svg'); +} + +.form__checkbox:checked[value='CHECKED'] ~ .form__checkbox-container { + background-image: url('./assets/ic-checkbox-selected.svg'); +} + +.form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container { + background-image: url('./assets/ic-bulk-check.svg'); +} + +.form__checkbox:disabled ~ .form__checkbox-label, +.form__checkbox:disabled ~ .form__checkbox-container { + color: var(--N500); + cursor: not-allowed; + opacity: 0.5; +} + +// These are just hack, not to be further extended +.theme { + &__dark { + $checkbox-hover-bg-image: url('./assets/dark/ic-checkbox-hover.svg'); + + .form__checkbox-container { + background-image: url('./assets/dark/ic-checkbox-unselected.svg'); + + &:hover { + background-image: $checkbox-hover-bg-image; + } + } + + // Class for checkbox parent container, if added to parent container, hover effect will be applied to checkbox + .checkbox__parent-container { + &:hover { + .form__checkbox-container { + background-image: $checkbox-hover-bg-image; + } + } + } + + .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container { + background-image: url('./assets/dark/ic-checkbox-intermediate.svg'); + } + + .form__checkbox:checked[value='CHECKED']~.form__checkbox-container { + background-image: url('./assets/dark/ic-checkbox-selected.svg'); + } + + .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container { + background-image: url('./assets/dark/ic-bulk-check.svg'); + } + } +} diff --git a/src/Common/Checkbox/Checkbox.tsx b/src/Common/Checkbox/Checkbox.tsx new file mode 100644 index 000000000..d95747cf4 --- /dev/null +++ b/src/Common/Checkbox/Checkbox.tsx @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2024. Devtron Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { CheckboxProps } from '../Types' + +import './Checkbox.scss' + +/* +Valid States of Checkbox: +1. disabled: true, checked: false, value: XXX +2. disabled: true, checked: true, value: INTERMIDIATE +3. disabled: true, checked: true, value: CHECKED +4. disabled: true, checked: false, value: XXX +5. disabled: false, checked: true, value: INTERMIDIATE +6. disabled: false, checked: true, value: CHECKED +*/ +// TODO: Associate label with input element +export const Checkbox = ({ + rootClassName, + onClick, + name, + disabled, + value, + onChange, + tabIndex, + isChecked, + id, + dataTestId, + children, +}: CheckboxProps) => { + const rootClass = `${rootClassName || ''}` + + return ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ) +} diff --git a/src/Common/Checkbox/assets/dark/ic-bulk-check.svg b/src/Common/Checkbox/assets/dark/ic-bulk-check.svg new file mode 100644 index 000000000..e2f95a73a --- /dev/null +++ b/src/Common/Checkbox/assets/dark/ic-bulk-check.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/src/Common/Checkbox/assets/dark/ic-checkbox-hover.svg b/src/Common/Checkbox/assets/dark/ic-checkbox-hover.svg new file mode 100644 index 000000000..9c4955077 --- /dev/null +++ b/src/Common/Checkbox/assets/dark/ic-checkbox-hover.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/Common/Checkbox/assets/dark/ic-checkbox-intermediate.svg b/src/Common/Checkbox/assets/dark/ic-checkbox-intermediate.svg new file mode 100644 index 000000000..936c141c9 --- /dev/null +++ b/src/Common/Checkbox/assets/dark/ic-checkbox-intermediate.svg @@ -0,0 +1,22 @@ + + + + + + + + diff --git a/src/Common/Checkbox/assets/dark/ic-checkbox-selected.svg b/src/Common/Checkbox/assets/dark/ic-checkbox-selected.svg new file mode 100644 index 000000000..ecb5a0019 --- /dev/null +++ b/src/Common/Checkbox/assets/dark/ic-checkbox-selected.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/Common/Checkbox/assets/dark/ic-checkbox-unselected.svg b/src/Common/Checkbox/assets/dark/ic-checkbox-unselected.svg new file mode 100644 index 000000000..fefe51fff --- /dev/null +++ b/src/Common/Checkbox/assets/dark/ic-checkbox-unselected.svg @@ -0,0 +1,19 @@ + + + + + diff --git a/src/Common/Checkbox/assets/ic-bulk-check.svg b/src/Common/Checkbox/assets/ic-bulk-check.svg new file mode 100644 index 000000000..b90b19446 --- /dev/null +++ b/src/Common/Checkbox/assets/ic-bulk-check.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/src/Common/Checkbox/assets/ic-checkbox-hover.svg b/src/Common/Checkbox/assets/ic-checkbox-hover.svg new file mode 100644 index 000000000..2e0d3aaee --- /dev/null +++ b/src/Common/Checkbox/assets/ic-checkbox-hover.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/Common/Checkbox/assets/ic-checkbox-intermediate.svg b/src/Common/Checkbox/assets/ic-checkbox-intermediate.svg new file mode 100644 index 000000000..bec37de4b --- /dev/null +++ b/src/Common/Checkbox/assets/ic-checkbox-intermediate.svg @@ -0,0 +1,22 @@ + + + + + + + + diff --git a/src/Common/Checkbox/assets/ic-checkbox-selected.svg b/src/Common/Checkbox/assets/ic-checkbox-selected.svg new file mode 100644 index 000000000..b5d0eb365 --- /dev/null +++ b/src/Common/Checkbox/assets/ic-checkbox-selected.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/Common/Checkbox/assets/ic-checkbox-unselected.svg b/src/Common/Checkbox/assets/ic-checkbox-unselected.svg new file mode 100644 index 000000000..a64391cf6 --- /dev/null +++ b/src/Common/Checkbox/assets/ic-checkbox-unselected.svg @@ -0,0 +1,19 @@ + + + + + diff --git a/src/Common/Checkbox/index.ts b/src/Common/Checkbox/index.ts new file mode 100644 index 000000000..0dab11563 --- /dev/null +++ b/src/Common/Checkbox/index.ts @@ -0,0 +1 @@ +export * from './Checkbox' diff --git a/src/Common/Types.ts b/src/Common/Types.ts index 9f67632bd..6795e4ea3 100644 --- a/src/Common/Types.ts +++ b/src/Common/Types.ts @@ -116,6 +116,7 @@ export interface CheckboxProps { onClick?: (event) => void id?: string dataTestId?: string + children?: ReactNode } export interface TippyCustomizedProps extends Pick { diff --git a/src/Shared/Components/FramerComponents/index.ts b/src/Shared/Components/FramerComponents/index.ts index 3093fdcff..d316ca871 100644 --- a/src/Shared/Components/FramerComponents/index.ts +++ b/src/Shared/Components/FramerComponents/index.ts @@ -1,4 +1,4 @@ -import { AnimatePresence } from 'framer-motion' +import { AnimatePresence, motion } from 'framer-motion' export * from './MotionDiv' -export { AnimatePresence } +export { AnimatePresence, motion } diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index 5db478d3f..f979f59d8 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -3,13 +3,16 @@ import { ReactComponent as IC73strings } from '@IconsV2/ic-73strings.svg' import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg' import { ReactComponent as ICAdd } from '@IconsV2/ic-add.svg' +import { ReactComponent as ICAmazonEks } from '@IconsV2/ic-amazon-eks.svg' import { ReactComponent as ICApica } from '@IconsV2/ic-apica.svg' import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg' import { ReactComponent as ICArrowClockwise } from '@IconsV2/ic-arrow-clockwise.svg' import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg' +import { ReactComponent as ICArrowSquareOut } from '@IconsV2/ic-arrow-square-out.svg' import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg' import { ReactComponent as ICAther } from '@IconsV2/ic-ather.svg' import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg' +import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg' import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg' import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg' import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg' @@ -19,7 +22,9 @@ import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg' import { ReactComponent as ICCalendar } from '@IconsV2/ic-calendar.svg' import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg' import { ReactComponent as ICCardStack } from '@IconsV2/ic-card-stack.svg' +import { ReactComponent as ICCaretDownSmall } from '@IconsV2/ic-caret-down-small.svg' import { ReactComponent as ICCaretLeft } from '@IconsV2/ic-caret-left.svg' +import { ReactComponent as ICCaretRight } from '@IconsV2/ic-caret-right.svg' import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg' import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg' import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg' @@ -30,6 +35,7 @@ import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg' import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg' import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg' import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg' +import { ReactComponent as ICCloudVms } from '@IconsV2/ic-cloud-vms.svg' import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg' import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg' import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg' @@ -46,16 +52,19 @@ import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg' import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg' import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg' import { ReactComponent as ICError } from '@IconsV2/ic-error.svg' +import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.svg' import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg' import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg' import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg' import { ReactComponent as ICGear } from '@IconsV2/ic-gear.svg' +import { ReactComponent as ICGiftGradient } from '@IconsV2/ic-gift-gradient.svg' import { ReactComponent as ICGit } from '@IconsV2/ic-git.svg' import { ReactComponent as ICGithub } from '@IconsV2/ic-github.svg' import { ReactComponent as ICGitlab } from '@IconsV2/ic-gitlab.svg' import { ReactComponent as ICGoogle } from '@IconsV2/ic-google.svg' import { ReactComponent as ICGoogleArtifactRegistry } from '@IconsV2/ic-google-artifact-registry.svg' import { ReactComponent as ICGoogleContainerRegistry } from '@IconsV2/ic-google-container-registry.svg' +import { ReactComponent as ICGoogleGke } from '@IconsV2/ic-google-gke.svg' import { ReactComponent as ICGridView } from '@IconsV2/ic-grid-view.svg' import { ReactComponent as ICHandPointing } from '@IconsV2/ic-hand-pointing.svg' import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg' @@ -68,9 +77,13 @@ import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg' import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg' import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg' import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg' +import { ReactComponent as ICInstall } from '@IconsV2/ic-install.svg' import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg' +import { ReactComponent as ICK3s } from '@IconsV2/ic-k3s.svg' import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg' import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg' +import { ReactComponent as ICKind } from '@IconsV2/ic-kind.svg' +import { ReactComponent as ICLaptop } from '@IconsV2/ic-laptop.svg' import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg' import { ReactComponent as ICLightning } from '@IconsV2/ic-lightning.svg' import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.svg' @@ -81,7 +94,9 @@ import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg' import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg' import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg' import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg' +import { ReactComponent as ICMinikube } from '@IconsV2/ic-minikube.svg' import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg' +import { ReactComponent as ICMobile } from '@IconsV2/ic-mobile.svg' import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg' import { ReactComponent as ICNew } from '@IconsV2/ic-new.svg' import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg' @@ -113,10 +128,13 @@ import { ReactComponent as ICThumbUp } from '@IconsV2/ic-thumb-up.svg' import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg' import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg' import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg' +import { ReactComponent as ICUbuntu } from '@IconsV2/ic-ubuntu.svg' import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg' +import { ReactComponent as ICUserCircle } from '@IconsV2/ic-user-circle.svg' import { ReactComponent as ICUserKey } from '@IconsV2/ic-user-key.svg' import { ReactComponent as ICUsers } from '@IconsV2/ic-users.svg' import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg' +import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg' // eslint-disable-next-line no-restricted-imports import { IconBase } from './IconBase' @@ -126,12 +144,15 @@ export const iconMap = { 'ic-73strings': IC73strings, 'ic-aborted': ICAborted, 'ic-add': ICAdd, + 'ic-amazon-eks': ICAmazonEks, 'ic-apica': ICApica, 'ic-app-group': ICAppGroup, 'ic-arrow-clockwise': ICArrowClockwise, 'ic-arrow-right': ICArrowRight, + 'ic-arrow-square-out': ICArrowSquareOut, 'ic-arrows-left-right': ICArrowsLeftRight, 'ic-ather': ICAther, + 'ic-azure-aks': ICAzureAks, 'ic-azure': ICAzure, 'ic-bg-cluster': ICBgCluster, 'ic-bharatpe': ICBharatpe, @@ -142,7 +163,9 @@ export const iconMap = { 'ic-calendar': ICCalendar, 'ic-cancelled': ICCancelled, 'ic-card-stack': ICCardStack, + 'ic-caret-down-small': ICCaretDownSmall, 'ic-caret-left': ICCaretLeft, + 'ic-caret-right': ICCaretRight, 'ic-cd': ICCd, 'ic-chat-circle-dots': ICChatCircleDots, 'ic-check': ICCheck, @@ -153,6 +176,7 @@ export const iconMap = { 'ic-clock': ICClock, 'ic-close-large': ICCloseLarge, 'ic-close-small': ICCloseSmall, + 'ic-cloud-vms': ICCloudVms, 'ic-code': ICCode, 'ic-container': ICContainer, 'ic-cookr': ICCookr, @@ -169,15 +193,18 @@ export const iconMap = { 'ic-ecr': ICEcr, 'ic-env': ICEnv, 'ic-error': ICError, + 'ic-expand-right-sm': ICExpandRightSm, 'ic-failure': ICFailure, 'ic-file-key': ICFileKey, 'ic-folder-user': ICFolderUser, 'ic-gear': ICGear, + 'ic-gift-gradient': ICGiftGradient, 'ic-git': ICGit, 'ic-github': ICGithub, 'ic-gitlab': ICGitlab, 'ic-google-artifact-registry': ICGoogleArtifactRegistry, 'ic-google-container-registry': ICGoogleContainerRegistry, + 'ic-google-gke': ICGoogleGke, 'ic-google': ICGoogle, 'ic-grid-view': ICGridView, 'ic-hand-pointing': ICHandPointing, @@ -191,9 +218,13 @@ export const iconMap = { 'ic-in-progress': ICInProgress, 'ic-info-filled': ICInfoFilled, 'ic-info-outline': ICInfoOutline, + 'ic-install': ICInstall, 'ic-job-color': ICJobColor, + 'ic-k3s': ICK3s, 'ic-k8s-job': ICK8sJob, 'ic-key': ICKey, + 'ic-kind': ICKind, + 'ic-laptop': ICLaptop, 'ic-ldap': ICLdap, 'ic-lightning-fill': ICLightningFill, 'ic-lightning': ICLightning, @@ -204,7 +235,9 @@ export const iconMap = { 'ic-medium-paintbucket': ICMediumPaintbucket, 'ic-memory': ICMemory, 'ic-microsoft': ICMicrosoft, + 'ic-minikube': ICMinikube, 'ic-missing': ICMissing, + 'ic-mobile': ICMobile, 'ic-monitoring': ICMonitoring, 'ic-new': ICNew, 'ic-node-script': ICNodeScript, @@ -236,10 +269,13 @@ export const iconMap = { 'ic-timeout-dash': ICTimeoutDash, 'ic-timer': ICTimer, 'ic-travclan': ICTravclan, + 'ic-ubuntu': ICUbuntu, 'ic-unknown': ICUnknown, + 'ic-user-circle': ICUserCircle, 'ic-user-key': ICUserKey, 'ic-users': ICUsers, 'ic-warning': ICWarning, + 'ic-wifi-slash': ICWifiSlash, } export type IconName = keyof typeof iconMap diff --git a/src/Shared/Components/Icon/IconBase.tsx b/src/Shared/Components/Icon/IconBase.tsx index cb837f9fc..03786a21b 100644 --- a/src/Shared/Components/Icon/IconBase.tsx +++ b/src/Shared/Components/Icon/IconBase.tsx @@ -38,7 +38,7 @@ export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: Icon return ( ( +export const parseDevtronLicenseDTOIntoLicenseCardData = ( licenseDTO: DevtronLicenseDTO, currentUserEmail?: isCentralDashboard extends true ? string : never, ): Omit => { diff --git a/src/Shared/Components/TabGroup/TabGroup.component.tsx b/src/Shared/Components/TabGroup/TabGroup.component.tsx index 2d1d8a10b..63b3a54b1 100644 --- a/src/Shared/Components/TabGroup/TabGroup.component.tsx +++ b/src/Shared/Components/TabGroup/TabGroup.component.tsx @@ -14,14 +14,14 @@ * limitations under the License. */ -import { useMemo } from 'react' -import { Link, NavLink, useRouteMatch } from 'react-router-dom' +import { useEffect, useMemo, useRef, useState } from 'react' +import { Link, NavLink, useLocation } from 'react-router-dom' import { motion } from 'framer-motion' import { Tooltip } from '@Common/Tooltip' import { ComponentSizeType } from '@Shared/constants' -import { getPathnameToMatch, getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers' +import { getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers' import { AdditionalTabProps, TabGroupProps, TabProps } from './TabGroup.types' import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils' @@ -57,13 +57,17 @@ const Tab = ({ tooltipProps, uniqueGroupId, }: TabProps & Pick & AdditionalTabProps) => { - const { path } = useRouteMatch() - const pathToMatch = tabType === 'navLink' || tabType === 'link' ? getPathnameToMatch(props.to, path) : '' - - // using match to define if tab is active as useRouteMatch return an object if path is matched otherwise return null/undefined - const match = useRouteMatch(pathToMatch) - - const isTabActive = tabType === 'button' ? active : !!match + const { pathname, search } = useLocation() + const ref = useRef(null) + const [isTabActive, setIsTabActive] = useState(tabType === 'button' && active) + + useEffect(() => { + if (tabType === 'navLink') { + setIsTabActive(ref.current?.classList.contains('active') || false) + return + } + setIsTabActive(active) + }, [active, tabType, pathname, search]) const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({ hideTopPadding, @@ -110,6 +114,7 @@ const Tab = ({ case 'navLink': return ( : description} ) - -const replaceTrailingSlash = (pathname: string) => pathname.replace(/\/+$/, '') - -export const getPathnameToMatch = (to: NavLinkProps['to'] | LinkProps['to'], currentPathname: string): string => { - if (typeof to === 'string' || (to && typeof to === 'object' && 'pathname' in to)) { - const pathname = typeof to === 'string' ? to : to.pathname || '' - // handling absolute and relative paths - return pathname.startsWith('/') ? pathname : `${replaceTrailingSlash(currentPathname)}/${pathname}` - } - return '' -} diff --git a/src/index.ts b/src/index.ts index c3ef03746..4d5f80fe0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -151,6 +151,7 @@ export interface customEnv { FEATURE_APPLICATION_TEMPLATES_ENABLE?: boolean GATEKEEPER_URL?: string FEATURE_AI_INTEGRATION_ENABLE?: boolean + LOGIN_PAGE_IMAGE?: string } declare global { interface Window {