From 11617e85b84916fe82340c93bc448366ccfceb67 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Tue, 28 Jan 2025 15:52:10 +0530 Subject: [PATCH 1/7] feat: add Icon component to Storybook --- src/stories/Icon.stories.tsx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/stories/Icon.stories.tsx diff --git a/src/stories/Icon.stories.tsx b/src/stories/Icon.stories.tsx new file mode 100644 index 0000000000..8c29d81c49 --- /dev/null +++ b/src/stories/Icon.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { Icon, iconMap, IconsProps } from '@devtron-labs/devtron-fe-common-lib' + +const options = Object.keys(iconMap) + +const meta = { + component: Icon, + argTypes: { + name: { + options, + control: { + type: 'select', + }, + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + name: options[0] as IconsProps['name'], + }, +} From 52335a1c9d3c9e9d6f28361f845909a2812496f7 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 30 Jan 2025 13:06:48 +0530 Subject: [PATCH 2/7] feat: Update icon.stories.tsx --- src/stories/Icon.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stories/Icon.stories.tsx b/src/stories/Icon.stories.tsx index 8c29d81c49..584190ed77 100644 --- a/src/stories/Icon.stories.tsx +++ b/src/stories/Icon.stories.tsx @@ -23,5 +23,7 @@ type Story = StoryObj export const Default: Story = { args: { name: options[0] as IconsProps['name'], + size: 80, + color: null, }, } From 8de4f5e4b6afd54e98c0e386df7504b4f21c970c Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 30 Jan 2025 13:39:30 +0530 Subject: [PATCH 3/7] feat: Replace instances of scss class dc__app-summary__icon with Icon, AppStatus & DeploymentStatus component, code cleanup --- .../EnvironmentOverviewTable.component.tsx | 15 ++--- .../LinkedCIDetailsModal/LinkedCIAppList.tsx | 12 +--- .../Shared/LinkedCIDetailsModal/types.ts | 6 +- src/assets/icons/misc/sort.svg | 22 ------- .../Jobs/ExpandedRow/ExpandedRow.tsx | 2 +- src/components/Jobs/JobList/JobListView.tsx | 2 +- .../app/Overview/EnvironmentList.tsx | 15 ++--- src/components/app/Overview/Overview.tsx | 36 ++--------- .../app/details/appDetails/AppStatusCard.tsx | 8 +-- .../app/details/appDetails/appDetails.scss | 14 ----- .../app/details/cIDetails/ciDetails.scss | 4 -- .../triggerView/CiWebhookDebuggingModal.tsx | 5 +- .../workflow/nodes/triggerCDNode.tsx | 28 ++++----- src/components/app/list-new/Constants.ts | 9 --- .../app/list-new/GenericAppList.tsx | 2 +- src/components/app/list-new/HelmAppList.tsx | 2 +- .../app/list/DevtronAppListContainer.tsx | 2 +- .../app/list/expandedRow/ExpandedRow.tsx | 2 +- src/components/app/list/list.scss | 22 ------- .../ChartDeploymentList.tsx | 2 +- src/components/ciConfig/CIConfig.scss | 14 ----- .../ciConfig/CIContainerRegistryConfig.tsx | 6 +- .../environmentStatus/CurrentSyncStatus.tsx | 60 ------------------- .../environmentStatus/notesDrawer.type.ts | 5 -- .../ChartDeploymentHistory.component.tsx | 29 +++++---- src/css/base.scss | 32 +--------- src/css/triggerView.scss | 11 ---- src/util/Util.ts | 32 ---------- 28 files changed, 67 insertions(+), 332 deletions(-) delete mode 100644 src/assets/icons/misc/sort.svg delete mode 100644 src/components/v2/appDetails/sourceInfo/environmentStatus/CurrentSyncStatus.tsx diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx index 424a248c3e..8f526bc5a6 100644 --- a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx +++ b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx @@ -31,13 +31,14 @@ import { stringComparatorBySortOrder, handleRelativeDateSorting, Tooltip, + DeploymentStatus, + StatusType, } from '@devtron-labs/devtron-fe-common-lib' import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg' import { ReactComponent as ICActivity } from '@Icons/ic-activity.svg' import { ReactComponent as ICArrowLineDown } from '@Icons/ic-arrow-line-down.svg' import { ReactComponent as ICMoreOption } from '@Icons/ic-more-option.svg' -import { StatusConstants } from '@Components/app/list-new/Constants' import { EnvironmentOverviewTableHeaderFixedKeys, @@ -222,12 +223,7 @@ export const EnvironmentOverviewTable = ({ value="CHECKED" rootClassName={`mb-0 ml-2 ${!isPartialChecked ? 'dc__visible-hover--child' : ''}`} /> - {!isVirtualEnv && ( - - )} + {!isVirtualEnv && }
@@ -240,9 +236,8 @@ export const EnvironmentOverviewTable = ({
- {lastDeployedImage && ( diff --git a/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIAppList.tsx b/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIAppList.tsx index 552bf8ebb9..c3b9a04ec7 100644 --- a/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIAppList.tsx +++ b/src/Pages/Shared/LinkedCIDetailsModal/LinkedCIAppList.tsx @@ -15,10 +15,9 @@ */ import { Link } from 'react-router-dom' -import { SortableTableHeaderCell, AppStatus, GenericFilterEmptyState } from '@devtron-labs/devtron-fe-common-lib' +import { SortableTableHeaderCell, GenericFilterEmptyState, DeploymentStatus } from '@devtron-labs/devtron-fe-common-lib' import Tippy from '@tippyjs/react' import { LinkedCIApp, LinkedCIAppListProps } from './types' -import { StatusConstants } from '../../../components/app/list-new/Constants' import { SortableKeys, appListLoading } from './constants' import { getLinkedCIAppUrl } from './utils' @@ -34,14 +33,7 @@ const AppListRow = ({ appId, appName, deploymentStatus, environmentName, trigger <> {environmentName} {triggerMode} - + ) : ( No deployment pipeline diff --git a/src/Pages/Shared/LinkedCIDetailsModal/types.ts b/src/Pages/Shared/LinkedCIDetailsModal/types.ts index 6e37050f69..93d0785ea5 100644 --- a/src/Pages/Shared/LinkedCIDetailsModal/types.ts +++ b/src/Pages/Shared/LinkedCIDetailsModal/types.ts @@ -19,8 +19,8 @@ import { UseUrlFiltersReturnType, WorkflowType, TriggerType, + StatusType, } from '@devtron-labs/devtron-fe-common-lib' -import { StatusConstants } from '../../../components/app/list-new/Constants' import { DEPLOYMENT_STATUS } from '../../../config' import { SortableKeys } from './constants' @@ -32,9 +32,7 @@ export interface LinkedCIDetailModalProps { export interface LinkedCIAppDto { appId: number appName: string - deploymentStatus: - | (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS] - | typeof StatusConstants.NOT_DEPLOYED.titleCase + deploymentStatus: (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS] | StatusType.NOT_DEPLOYED environmentId: number environmentName: string triggerMode: (typeof TriggerType)[keyof typeof TriggerType] diff --git a/src/assets/icons/misc/sort.svg b/src/assets/icons/misc/sort.svg deleted file mode 100644 index 922b248d1b..0000000000 --- a/src/assets/icons/misc/sort.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - diff --git a/src/components/Jobs/ExpandedRow/ExpandedRow.tsx b/src/components/Jobs/ExpandedRow/ExpandedRow.tsx index 85ebd3d62f..b239253997 100644 --- a/src/components/Jobs/ExpandedRow/ExpandedRow.tsx +++ b/src/components/Jobs/ExpandedRow/ExpandedRow.tsx @@ -45,7 +45,7 @@ export default function ExpandedRow(props: ExpandedRowProps) {
{ciPipeline.ciPipelineName}
- +

diff --git a/src/components/Jobs/JobList/JobListView.tsx b/src/components/Jobs/JobList/JobListView.tsx index 38b33d4c3c..a6fe0d90d3 100644 --- a/src/components/Jobs/JobList/JobListView.tsx +++ b/src/components/Jobs/JobList/JobListView.tsx @@ -105,7 +105,7 @@ export default function JobListView(props: JobListViewProps) {

- +

diff --git a/src/components/app/Overview/EnvironmentList.tsx b/src/components/app/Overview/EnvironmentList.tsx index e968c91747..5d06601d32 100644 --- a/src/components/app/Overview/EnvironmentList.tsx +++ b/src/components/app/Overview/EnvironmentList.tsx @@ -32,6 +32,7 @@ import { ImageChipCell, RegistryType, AppEnvironment, + StatusType, } from '@devtron-labs/devtron-fe-common-lib' import { Link, useHistory } from 'react-router-dom' import { ReactComponent as ActivityIcon } from '../../../assets/icons/ic-activity.svg' @@ -44,7 +45,6 @@ import { EMPTY_STATE_STATUS } from '../../../config/constantMessaging' import { getAppOtherEnvironment } from '@Services/service' import { getModuleInfo } from '../../v2/devtronStackManager/DevtronStackManager.service' import { ModuleStatus } from '../../v2/devtronStackManager/DevtronStackManager.type' -import { StatusConstants } from '../list-new/Constants' import { AppMetaInfo, AppOverviewProps } from '../types' import { EnvironmentListSortableKeys, loadingEnvironmentList } from './constants' import { renderCIListHeader } from '../details/cdDetails/utils' @@ -204,13 +204,11 @@ export const EnvironmentList = ({ {envIcon(_env.isVirtualEnvironment)} {isArgoInstalled && ( )} ) : ( - - - Not Deployed - + )} ) - const getStatusIcon = (status: string): JSX.Element => { - switch (status) { - case 'Succeeded': - return - case 'Failed': - case 'Error': - return - case 'InProgress': - return - case 'Starting': - return

- case 'Running': - return
- case 'CANCELLED': - return
- default: - return ( - <> - - Yet to run - - ) - } - } - const renderWorkflowComponent = () => { if (!Array.isArray(jobPipelines) || !jobPipelines.length) { return ( @@ -432,14 +409,9 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
- {getStatusIcon(jobPipeline.status)} - {jobPipeline.status === 'CANCELLED' ? ( -
Aborted
- ) : ( -
{jobPipeline.status}
- )} +
-
-
-
+
{renderBottomContainer()}
diff --git a/src/components/app/details/appDetails/appDetails.scss b/src/components/app/details/appDetails/appDetails.scss index 6249805823..d1cdfeb782 100644 --- a/src/components/app/details/appDetails/appDetails.scss +++ b/src/components/app/details/appDetails/appDetails.scss @@ -916,13 +916,6 @@ table.pod__table td:last-child { font-size: 12px; } - .dc__app-summary__icon { - width: 32px; - height: 32px; - background-size: cover; - position: unset; - } - .deployment-summary { height: 53px; background: var(--bg-tertiary); @@ -1772,13 +1765,6 @@ table.resource-tree { .source-info-container, .app-details-info-card { - .dc__app-summary__icon { - &.healthy { - background-size: contain, contain; - background: url('../../../../assets/icons/appstatus/ic-heart-green.svg'), transparent; - } - } - .mw-340 { max-width: 340px !important; } diff --git a/src/components/app/details/cIDetails/ciDetails.scss b/src/components/app/details/cIDetails/ciDetails.scss index 6707bf6ff1..b65c53f61a 100644 --- a/src/components/app/details/cIDetails/ciDetails.scss +++ b/src/components/app/details/cIDetails/ciDetails.scss @@ -156,10 +156,6 @@ padding: 12px 0; column-gap: 12px; } - - .app-status__icon { - position: unset; - } } .p-20 { diff --git a/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx b/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx index e071956edc..9d7f576173 100644 --- a/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx +++ b/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx @@ -30,6 +30,7 @@ import { getUrlWithSearchParams, Tooltip, MODES, + Icon, } from '@devtron-labs/devtron-fe-common-lib' import moment from 'moment' import { ReactComponent as Edit } from '@Icons/ic-pencil.svg' @@ -156,9 +157,7 @@ export const CiWebhookModal = ({ onClick={() => getCIWebhookPayloadRes(ciPipelineMaterialId, webhookPayload)} >
-
+
{moment(webhookPayload.eventTime).format(Moment12HourFormat)} diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx index 54c0718ad1..8f0cf7e7ac 100644 --- a/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx @@ -20,7 +20,7 @@ import { Link } from 'react-router-dom' import { DeploymentAppTypes, DeploymentNodeType, - triggerStatus, + getDeploymentStatusFromStatus, statusColor, statusIcon, URLS, @@ -49,18 +49,18 @@ export class TriggerCDNode extends Component { - if (this.props.fromAppGrouping) { - return getAppGroupDeploymentHistoryLink( - this.props.appId, - this.props.environmentId, - this.props.id, - this.props.match.params.envId === this.props.environmentId.toString(), - this.props.status, - ) - } - return `${this.props.match.url.split('/').slice(0, -1).join('/')}/${URLS.APP_DETAILS}/${ - this.props.environmentId - }` + if (this.props.fromAppGrouping) { + return getAppGroupDeploymentHistoryLink( + this.props.appId, + this.props.environmentId, + this.props.id, + this.props.match.params.envId === this.props.environmentId.toString(), + this.props.status, + ) + } + return `${this.props.match.url.split('/').slice(0, -1).join('/')}/${URLS.APP_DETAILS}/${ + this.props.environmentId + }` } componentDidUpdate(prevProps: Readonly, prevState: Readonly): void { @@ -74,7 +74,7 @@ export class TriggerCDNode extends Component{app.appName}
- +
{/* Template Type is only shown in FluxCD */} {isFluxCDAppList && ( diff --git a/src/components/app/list-new/HelmAppList.tsx b/src/components/app/list-new/HelmAppList.tsx index 6e2df21fc5..2044287bb9 100644 --- a/src/components/app/list-new/HelmAppList.tsx +++ b/src/components/app/list-new/HelmAppList.tsx @@ -411,7 +411,7 @@ const HelmAppList = ({
{isArgoInstalled && (
- +
)}
diff --git a/src/components/app/list/DevtronAppListContainer.tsx b/src/components/app/list/DevtronAppListContainer.tsx index 24864f4cee..47de6b135c 100644 --- a/src/components/app/list/DevtronAppListContainer.tsx +++ b/src/components/app/list/DevtronAppListContainer.tsx @@ -351,7 +351,7 @@ const DevtronAppList = ({ data-testid="devtron-app-status" >
diff --git a/src/components/app/list/expandedRow/ExpandedRow.tsx b/src/components/app/list/expandedRow/ExpandedRow.tsx index c854a3f967..c52302fc22 100644 --- a/src/components/app/list/expandedRow/ExpandedRow.tsx +++ b/src/components/app/list/expandedRow/ExpandedRow.tsx @@ -47,7 +47,7 @@ export class ExpandedRow extends Component {
{this.props.isArgoInstalled && (
- +
)}
{env.name}
diff --git a/src/components/app/list/list.scss b/src/components/app/list/list.scss index 31d882b306..ad19ca2d7d 100644 --- a/src/components/app/list/list.scss +++ b/src/components/app/list/list.scss @@ -303,28 +303,6 @@ z-index: var(--tooltip-index); } -.sort-col { - background-image: url('../../../assets/icons/misc/sort.svg'); - display: inline-block; - vertical-align: middle; - height: 16px; - width: 16px; - background-size: 100% 100%; - -o-background-size: 100% 100%; - -webkit-background-size: 100% 100%; -} - -.sort { - background-image: url('../../../assets/icons/ic-sort-arrow-down.svg'); - display: inline-block; - height: 12px; - width: 12px; -} - -.sort-up { - transform: rotate(180deg); -} - .select-material--h450 { height: 450px; } diff --git a/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx b/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx index c44a2e3325..d0ca028d94 100644 --- a/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx +++ b/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx @@ -228,7 +228,7 @@ export const DeploymentRow = ({
{appName}
- + {environmentName} diff --git a/src/components/ciConfig/CIConfig.scss b/src/components/ciConfig/CIConfig.scss index f2b7cd6cae..084ea50fdb 100644 --- a/src/components/ciConfig/CIConfig.scss +++ b/src/components/ciConfig/CIConfig.scss @@ -96,20 +96,6 @@ display: flex; align-items: center; margin-top: 4px; - - &.form__error--info { - color: var(--N700); - - &:before { - content: ''; - background: url('../../assets/icons/ic-info-warn.svg'); - height: 14px; - width: 14px; - display: inline-block; - background-size: contain; - margin-right: 4px; - } - } } } diff --git a/src/components/ciConfig/CIContainerRegistryConfig.tsx b/src/components/ciConfig/CIContainerRegistryConfig.tsx index 348d934955..40d9819925 100644 --- a/src/components/ciConfig/CIContainerRegistryConfig.tsx +++ b/src/components/ciConfig/CIContainerRegistryConfig.tsx @@ -19,6 +19,7 @@ import { Link, NavLink } from 'react-router-dom' import { ComponentSizeType, CustomInput, + Icon, InfoColourBar, REGISTRY_TYPE_MAP, SelectPicker, @@ -182,8 +183,9 @@ export default function CIContainerRegistryConfig({ /> )} {!ciConfig && selectedRegistry?.registryType === 'ecr' && ( -
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/CurrentSyncStatus.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/CurrentSyncStatus.tsx deleted file mode 100644 index d0c84e41db..0000000000 --- a/src/components/v2/appDetails/sourceInfo/environmentStatus/CurrentSyncStatus.tsx +++ /dev/null @@ -1,60 +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 Tippy from '@tippyjs/react' -import { ReactComponent as ICHelpOutline } from '../../../../../assets/icons/ic-help-outline.svg' -import { CurrentSyncStatusType } from './notesDrawer.type' - -const CurrentSyncStatus = ({ status, loadingResourceTree }: CurrentSyncStatusType): JSX.Element => { - const renderloadingShimmer = () => ( -
-
-
-
- ) - const renderStatusCard = () => ( - <> -
- {status} -
-
-
- - Details - -
- - ) - - return ( -
-
- Application status - - - -
- {loadingResourceTree ? renderloadingShimmer() : renderStatusCard()} -
- ) -} - -export default CurrentSyncStatus diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/notesDrawer.type.ts b/src/components/v2/appDetails/sourceInfo/environmentStatus/notesDrawer.type.ts index 3595260632..520bbd2793 100644 --- a/src/components/v2/appDetails/sourceInfo/environmentStatus/notesDrawer.type.ts +++ b/src/components/v2/appDetails/sourceInfo/environmentStatus/notesDrawer.type.ts @@ -18,8 +18,3 @@ export interface NotesDrawerType { notes: string close: () => void } - -export interface CurrentSyncStatusType { - status: string - loadingResourceTree: boolean -} diff --git a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx index 6307e9d7e4..4d5aa55a67 100644 --- a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx +++ b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx @@ -33,6 +33,8 @@ import { DEPLOYMENT_STATUS, EMPTY_STATE_STATUS, MODES, + AppStatus, + StatusType, } from '@devtron-labs/devtron-fe-common-lib' import moment from 'moment' import Tippy from '@tippyjs/react' @@ -303,13 +305,21 @@ const ChartDeploymentHistory = ({ setDeploymentManifestDetails(_deploymentManifestDetail) } + const getDeploymentStatus = (deployment: ChartDeploymentDetail) => { + if ( + (deployment?.status && installedAppInfo?.deploymentType === DeploymentAppTypes.GITOPS) || + installedAppInfo?.deploymentType === DeploymentAppTypes.MANIFEST_DOWNLOAD + ) { + return deployment.status + } else { + return deployment?.status || StatusType.SUCCEEDED + } + } + function renderDeploymentCards() { return ( <> {deploymentHistoryArr.map((deployment, index) => { - const helmDeploymentStatus: string = deployment?.status - ? deployment.status.toLowerCase() - : 'succeeded' return (
-
diff --git a/src/css/base.scss b/src/css/base.scss index 194938b435..eb0d8036ff 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -767,24 +767,10 @@ button.anchor { } } -.dc__app-summary__icon { - flex-shrink: 0; -} - .dc__no-shrink { flex-shrink: 0; } -.app-summary__app-status { - display: flex; - align-items: center; - - .dc__app-summary__icon { - position: unset; - margin: 0 4px 0 10px; - } -} - .app-summary__status-name { text-transform: uppercase; } @@ -1111,6 +1097,7 @@ button.anchor { background-repeat: no-repeat; } +// TODO: (rohit) - remove this after verifying ClusterForm @mixin dc__app-status-icon($background) { height: 24px; width: 24px; @@ -1234,24 +1221,9 @@ button.anchor { } } +// TODO: (rohit) - remove this after verifying ClusterForm .dc__app-summary__icon { @include dc__app-status-icon(transparent); - - &.icon-dim-20 { - width: 20px; - height: 20px; - } - - &.icon-dim-16 { - width: 16px; - height: 16px; - } -} - -.ci-details__build-card { - .app-status__icon { - @include dc__app-status-icon(transparent); - } } .dc__app-update-toast { diff --git a/src/css/triggerView.scss b/src/css/triggerView.scss index 8c3da96c46..8444aa82ad 100644 --- a/src/css/triggerView.scss +++ b/src/css/triggerView.scss @@ -376,17 +376,6 @@ } } -.check { - display: none; - position: absolute; - top: 2px; - left: 0; - background-image: url('../assets/icons/appstatus/ic-check.svg'); - background-size: 100% 100%; - width: 20px; - height: 20px; -} - .form__checkbox-label--ignore-cache { font-size: 14px; font-weight: 600; diff --git a/src/util/Util.ts b/src/util/Util.ts index 42d7c09143..01798acebb 100644 --- a/src/util/Util.ts +++ b/src/util/Util.ts @@ -14,38 +14,6 @@ * limitations under the License. */ -const MANIFEST_METADATA_REQUIRED_FIELDS: string[] = ['name', 'namespace', 'labels', 'annotations'] - -// Remove Auto-generated fields from kubernetes manifest -// input - jsonString -// output - jsonString -export function cleanKubeManifest(manifestJsonString: string): string { - if (!manifestJsonString) { - return manifestJsonString - } - - try { - const obj = JSON.parse(manifestJsonString) - - // 1 - delete status - delete obj['status'] - - // 2 - delete all fields from metadata except some predefined - const metadata = obj['metadata'] - if (metadata) { - for (const key in metadata) { - if (!MANIFEST_METADATA_REQUIRED_FIELDS.includes(key)) { - delete metadata[key] - } - } - } - - return JSON.stringify(obj) - } catch (e) { - return manifestJsonString - } -} - export const replaceLastOddBackslash = (str: string): string => { let countBackSlash = 0 const strArr = str.split('') From b55a37e052ca2891ba97496021e8dea5bff6903c Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 30 Jan 2025 14:02:25 +0530 Subject: [PATCH 4/7] feat: Refactor ClusterForm to use Icon component and remove dc__app-summary__icon SCSS styles --- src/components/cluster/ClusterForm.tsx | 33 ++++---- src/css/base.scss | 106 ------------------------- 2 files changed, 15 insertions(+), 124 deletions(-) diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx index 5b3f95dde1..3bd8fd4c6f 100644 --- a/src/components/cluster/ClusterForm.tsx +++ b/src/components/cluster/ClusterForm.tsx @@ -35,6 +35,7 @@ import { ToastManager, ToastVariantType, Textarea, + Icon, } from '@devtron-labs/devtron-fe-common-lib' import YAML from 'yaml' import TippyHeadless from '@tippyjs/react/headless' @@ -741,8 +742,8 @@ export default function ClusterForm({ ? id !== 1 ? DEFAULT_SECRET_PLACEHOLDER : config?.bearer_token - ? config.bearer_token - : '' + ? config.bearer_token + : '' : state.token.value } onChange={handleOnChange} @@ -1060,12 +1061,10 @@ export default function ClusterForm({ > {clusterListDetail.clusterName}
-
-
+
- + {isClusterSelected[clusterDetail.cluster_name] ? 'Cluster already exists. Cluster will be updated' @@ -1315,15 +1314,13 @@ export default function ClusterForm({ columnGap: '6px', }} > -
+ {selectedUserNameOptions[clusterDetail.cluster_name] + .errorInConnecting.length !== 0 && ( +
+ +
+ )} + {selectedUserNameOptions[clusterDetail.cluster_name] ?.errorInConnecting || ' '} diff --git a/src/css/base.scss b/src/css/base.scss index eb0d8036ff..c1a241cd0f 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -1097,107 +1097,6 @@ button.anchor { background-repeat: no-repeat; } -// TODO: (rohit) - remove this after verifying ClusterForm -@mixin dc__app-status-icon($background) { - height: 24px; - width: 24px; - z-index: 2; - - &.queued, - &.pending { - background: url('../assets/icons/ic-clock.svg'), $background; - background-size: contain, contain; - } - - &.failed, - &.error { - background: url('../assets/icons/appstatus/ic-appstatus-failed.svg'), $background; - background-size: contain, contain; - } - - &.cancelled, - &.aborted { - background: url('../assets/icons/ic-appstatus-cancelled.svg'), $background; - background-size: contain, contain; - } - - &.not-ready { - background: url('../assets/icons/ic-error.svg'); - background-size: contain, contain; - } - - &.ready, - &.healthy, - &.synced, - &.sync.ok, - &.succeeded { - background: url('../assets/icons/appstatus/healthy.svg'), $background; - background-size: contain, contain; - - &.healthy--node { - background: url('../assets/icons/appstatus/ic-heart-green.svg'), transparent; - background-size: contain, contain; - } - } - - &.drifted { - background: url('../assets/icons/ic-out-of-sync.svg'), $background; - background-size: contain, contain; - } - - &.missing { - background: url('../assets/icons/appstatus/missing.svg'), $background; - background-size: contain, contain; - } - - &.unknown { - background: url('../assets/icons/appstatus/unknown.svg'), $background; - background-size: contain, contain; - } - - &.not-deployed, - &.not-triggered { - background: url('../assets/icons/appstatus/notdeployed.svg'), $background; - background-size: contain, contain; - - &.not-deployed--node { - background: url('../assets/icons/ic-close.svg'), transparent; - background-size: contain, contain; - } - } - - &.suspended { - background: url('../assets/icons/appstatus/suspended.svg'), $background; - background-size: contain, contain; - } - - &.degraded { - background: url('../assets/icons/appstatus/degraded.svg'), $background; - background-size: contain, contain; - } - - &.initiating, - &.progressing, - &.running, - &.request_accepted, - &.starting { - background: url('../assets/icons/appstatus/progressing-rotating.svg'), $background; - background-size: contain, contain; - animation: unset; - } - - &.hibernating, - &.hibernated { - background: url('../assets/icons/ic-hibernate-2.svg'), $background; - background-size: contain, contain; - } - - &.timedout { - background: url('../assets/icons/ic-timeout-red.svg'), $background; - background-size: contain, contain; - } -} - @mixin dc__striped-row($background) { background-color: $background; } @@ -1221,11 +1120,6 @@ button.anchor { } } -// TODO: (rohit) - remove this after verifying ClusterForm -.dc__app-summary__icon { - @include dc__app-status-icon(transparent); -} - .dc__app-update-toast { font-size: 14px; From 3ca3e4a11b3581ed3585b8e40807d29698631243 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Fri, 31 Jan 2025 14:37:50 +0530 Subject: [PATCH 5/7] feat: replace instances of git provider icons used as background with Icon component --- .../details/appDetails/DeployedCommitCard.tsx | 4 ++-- src/components/common/helpers/utils.tsx | 2 +- src/css/base.scss | 6 ------ src/css/iconTheming.scss | 4 ---- src/css/icons.scss | 20 ------------------- 5 files changed, 3 insertions(+), 33 deletions(-) diff --git a/src/components/app/details/appDetails/DeployedCommitCard.tsx b/src/components/app/details/appDetails/DeployedCommitCard.tsx index 39419c1bee..28ab28b0f5 100644 --- a/src/components/app/details/appDetails/DeployedCommitCard.tsx +++ b/src/components/app/details/appDetails/DeployedCommitCard.tsx @@ -16,7 +16,7 @@ import React, { useEffect, useState } from 'react' import Tippy from '@tippyjs/react' -import { getCITriggerInfo, showError } from '@devtron-labs/devtron-fe-common-lib' +import { getCITriggerInfo, Icon, showError } from '@devtron-labs/devtron-fe-common-lib' import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg' import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg' import { DeployedCommitCardType } from './appDetails.type' @@ -88,7 +88,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
{commitId}
-
+ {/* @TODO: This should be dynamic, dependent on the source */} {/* */}
diff --git a/src/components/common/helpers/utils.tsx b/src/components/common/helpers/utils.tsx index 9351d068d2..0bc025ae8c 100644 --- a/src/components/common/helpers/utils.tsx +++ b/src/components/common/helpers/utils.tsx @@ -84,5 +84,5 @@ export const getGitProviderIcon = (gitUrl: string, rootClassName?: string): JSX. IconComponent = BitBucket } - return + return } diff --git a/src/css/base.scss b/src/css/base.scss index c1a241cd0f..d2b6e65453 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -698,12 +698,6 @@ button.anchor { background: transparent; } -.dc__git-logo { - width: 24px; - height: 24px; - background: url('../assets/icons/git/git.svg'); -} - .dc__cd-trigger-status { margin: 12px; margin-top: 6px; diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index 3649a01640..86c6d2b66e 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -110,10 +110,6 @@ $svg-fill-hex-to-var: ( // These are just hack, not to be further extended .theme { &__dark { - .github { - background-image: url('../assets/icons/dark/ic-github.svg') !important; - } - .form__checkbox-container { background-image: url('../assets/icons/dark/ic-checkbox-unselected.svg'); diff --git a/src/css/icons.scss b/src/css/icons.scss index b628b54971..c02f296e67 100644 --- a/src/css/icons.scss +++ b/src/css/icons.scss @@ -16,26 +16,6 @@ /* Contains icon classes */ -.git { - background: url('../assets/icons/git/git.svg'); - background-size: 100% 100%; -} - -.github { - background: url('../assets/icons/git/github.svg'); - background-size: 100% 100%; -} - -.gitlab { - background: url('../assets/icons/git/gitlab.svg'); - background-size: 100% 100%; -} - -.bitbucket { - background: url('../assets/icons/git/bitbucket.svg'); - background-size: 100% 100%; -} - .healthy, .deployed, .synced, From cb3f02bf27748cfe0a6c342130c4c3439634da53 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Fri, 31 Jan 2025 17:11:17 +0530 Subject: [PATCH 6/7] feat: replace workflow icons used as background-image with Icon component --- .../CIPipelineN/EnvironmentList.tsx | 4 +- .../workflow/nodes/TriggerExternalCINode.tsx | 5 +- .../triggerView/workflow/nodes/staticNode.tsx | 4 +- .../workflow/nodes/triggerCDNode.tsx | 17 +++--- .../workflow/nodes/triggerCINode.tsx | 14 ++--- .../workflow/nodes/triggerPrePostCDNode.tsx | 8 +-- .../security/SecurityPolicyEdit.tsx | 3 + .../workflowEditor/nodes/CDNode.tsx | 15 ++--- .../workflowEditor/nodes/CINode.tsx | 16 ++++-- .../workflowEditor/nodes/StaticNode.tsx | 4 +- src/css/base.scss | 32 ----------- src/css/workflow.scss | 56 ------------------- 12 files changed, 47 insertions(+), 131 deletions(-) diff --git a/src/components/CIPipelineN/EnvironmentList.tsx b/src/components/CIPipelineN/EnvironmentList.tsx index 1065e0de6b..3692221444 100644 --- a/src/components/CIPipelineN/EnvironmentList.tsx +++ b/src/components/CIPipelineN/EnvironmentList.tsx @@ -17,8 +17,8 @@ import { ComponentSizeType, Environment, + Icon, SelectPicker, - SelectPickerOptionType, SelectPickerVariantType, } from '@devtron-labs/devtron-fe-common-lib' import { createClusterEnvGroup } from '../common' @@ -76,7 +76,7 @@ export const EnvironmentList = ({ ...selectedEnv, label: selectedEnv?.name, value: selectedEnv?.id, // assuming the whole object is set as value - startIcon: !isBuildStage ?
: null, + startIcon: !isBuildStage ? : null, } return _selectedEnv diff --git a/src/components/app/details/triggerView/workflow/nodes/TriggerExternalCINode.tsx b/src/components/app/details/triggerView/workflow/nodes/TriggerExternalCINode.tsx index d66aa7b3d8..44c9a64677 100644 --- a/src/components/app/details/triggerView/workflow/nodes/TriggerExternalCINode.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/TriggerExternalCINode.tsx @@ -17,6 +17,7 @@ import React, { Component } from 'react' import Tippy from '@tippyjs/react' import link from '../../../../../../assets/icons/ic-link.svg' +import { Icon } from '@devtron-labs/devtron-fe-common-lib' export interface CINodeProps { x: number @@ -51,14 +52,14 @@ export class TriggerExternalCINode extends Component {
{this.props.triggerType}
-
+
Build: External
{this.props.title}
-
+
) diff --git a/src/components/app/details/triggerView/workflow/nodes/staticNode.tsx b/src/components/app/details/triggerView/workflow/nodes/staticNode.tsx index e301eeb38f..3e5c8d26ae 100644 --- a/src/components/app/details/triggerView/workflow/nodes/staticNode.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/staticNode.tsx @@ -16,7 +16,7 @@ import React, { Component } from 'react' import { GIT_BRANCH_NOT_CONFIGURED } from '../../../../../../config' -import { CiPipelineSourceConfig } from '@devtron-labs/devtron-fe-common-lib' +import { CiPipelineSourceConfig, Icon } from '@devtron-labs/devtron-fe-common-lib' export interface StaticNodeProps { x: number y: number @@ -45,7 +45,7 @@ export class StaticNode extends Component { }`} onClick={this.props.handleGoToWorkFlowEditor} > -
+
/{this.props.title} {heading}
-
+
{envDescriptionTippy(this.props.environmentName, this.props.description)}
-
+
+ +
{this.renderStatus()}
diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx index 666d69296e..35ab377036 100644 --- a/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx @@ -17,7 +17,7 @@ import React, { Component } from 'react' import { RouteComponentProps, Link } from 'react-router-dom' import Tippy from '@tippyjs/react' -import { CIMaterialType, ConsequenceType } from '@devtron-labs/devtron-fe-common-lib' +import { CIMaterialType, ConsequenceType, Icon } from '@devtron-labs/devtron-fe-common-lib' import { TriggerStatus } from '../../../../config' import { BUILD_STATUS, DEFAULT_STATUS, URLS } from '../../../../../../config' import { ReactComponent as IcLink } from '../../../../../../assets/icons/ic-link.svg' @@ -167,7 +167,7 @@ export class TriggerCINode extends Component { > {this.props.isCITriggerBlocked ? 'BLOCKED' : this.props.triggerType}
-
+
{/* */}
{!this.props.isJobView && ( @@ -185,12 +185,10 @@ export class TriggerCINode extends Component { )}
-
{this.renderStatus()} diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx index d0293d81ab..8d4426b9b0 100644 --- a/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx @@ -16,7 +16,7 @@ import { Component } from 'react' import { Link } from 'react-router-dom' -import { DeploymentAppTypes, stopPropagation } from '@devtron-labs/devtron-fe-common-lib' +import { DeploymentAppTypes, Icon, stopPropagation } from '@devtron-labs/devtron-fe-common-lib' import { TriggerPrePostCDNodeProps, TriggerPrePostCDNodeState } from '../../types' import { TriggerStatus } from '../../../../config' import { BUILD_STATUS, URLS, DEFAULT_STATUS } from '../../../../../../config' @@ -45,7 +45,7 @@ export class TriggerPrePostCDNode extends Component {heading}
-
+
Stage {stage}
-
+
{this.renderStatus(isClickable, status)}
diff --git a/src/components/security/SecurityPolicyEdit.tsx b/src/components/security/SecurityPolicyEdit.tsx index e58a0e02cf..feaaa67c92 100644 --- a/src/components/security/SecurityPolicyEdit.tsx +++ b/src/components/security/SecurityPolicyEdit.tsx @@ -24,6 +24,7 @@ import { SelectPickerVariantType, getCVEUrlFromCVEName, ConditionalWrap, + Icon, } from '@devtron-labs/devtron-fe-common-lib' import { NavLink } from 'react-router-dom' import { @@ -459,8 +460,10 @@ export class SecurityPolicyEdit extends Component< href={getCVEUrlFromCVEName(cve.name)} rel="noopener noreferrer" target="_blank" + className="dc__inline-flex dc__align-items-center dc__gap-4" > {cve.name} + diff --git a/src/components/workflowEditor/nodes/CDNode.tsx b/src/components/workflowEditor/nodes/CDNode.tsx index 0949e00d02..4347ceb766 100644 --- a/src/components/workflowEditor/nodes/CDNode.tsx +++ b/src/components/workflowEditor/nodes/CDNode.tsx @@ -21,6 +21,7 @@ import { ConditionalWrap, ConfirmationDialog, DeploymentAppTypes, + Icon, MODAL_TYPE, ServerErrors, showError, @@ -193,7 +194,7 @@ export class CDNode extends Component { ))}
-
+
) @@ -291,13 +292,9 @@ export class CDNode extends Component { } return ( -
+
+ +
) } @@ -404,7 +401,7 @@ export class CDNode extends Component { > {this.props.cdNamesList?.length > 0 ? this.renderReadOnlyCard() : this.renderCardContent()} - + { } return ( -
+
+ +
) } diff --git a/src/components/workflowEditor/nodes/StaticNode.tsx b/src/components/workflowEditor/nodes/StaticNode.tsx index 31cba48e3c..41fc86f23d 100644 --- a/src/components/workflowEditor/nodes/StaticNode.tsx +++ b/src/components/workflowEditor/nodes/StaticNode.tsx @@ -16,7 +16,7 @@ import React, { Component } from 'react' import { GIT_BRANCH_NOT_CONFIGURED } from '../../../config' -import { CiPipelineSourceConfig } from '@devtron-labs/devtron-fe-common-lib' +import { CiPipelineSourceConfig, Icon } from '@devtron-labs/devtron-fe-common-lib' export interface StaticNodeProps { x: number @@ -45,7 +45,7 @@ export class StaticNode extends Component { }`} onClick={this.props.handleGoToWorkFlowEditor} > -
+
/{this.props.title} Date: Mon, 3 Feb 2025 12:15:45 +0530 Subject: [PATCH 7/7] feat: replace instances of dc__registry-icon scss class with RegistryIcon component --- .../CIPipelineN/CustomImageTags.tsx | 13 ++++- .../charts/list/ChartListPopUpRow.tsx | 23 +++++++- .../ciConfig/CIContainerRegistryConfig.tsx | 5 +- src/components/dockerRegistry/Docker.tsx | 8 ++- src/css/base.scss | 56 ------------------- 5 files changed, 39 insertions(+), 66 deletions(-) diff --git a/src/components/CIPipelineN/CustomImageTags.tsx b/src/components/CIPipelineN/CustomImageTags.tsx index 7244b46986..6c65719c7a 100644 --- a/src/components/CIPipelineN/CustomImageTags.tsx +++ b/src/components/CIPipelineN/CustomImageTags.tsx @@ -16,7 +16,14 @@ import { useState } from 'react' import Tippy from '@tippyjs/react' -import { OptionType, SelectPicker, Textarea, Toggle } from '@devtron-labs/devtron-fe-common-lib' +import { + OptionType, + RegistryIcon, + RegistryType, + SelectPicker, + Textarea, + Toggle, +} from '@devtron-labs/devtron-fe-common-lib' import { CustomImageTagsType } from './CustomImageTag.type' import { ValidationRules } from '../ciPipeline/validationRules' import { CustomErrorMessage, REQUIRED_FIELD_MSG } from '../../config/constantMessaging' @@ -145,8 +152,8 @@ function CustomImageTags({ {!isCustomTagError && (
Tag Preview: -
-
+
+ {formData.customTag?.tagPattern?.replace( '{x}', formData.customTag?.counterX?.toString() ?? '0', diff --git a/src/components/charts/list/ChartListPopUpRow.tsx b/src/components/charts/list/ChartListPopUpRow.tsx index 4180011597..58d8c45a10 100644 --- a/src/components/charts/list/ChartListPopUpRow.tsx +++ b/src/components/charts/list/ChartListPopUpRow.tsx @@ -16,7 +16,14 @@ import { useState } from 'react' import Tippy from '@tippyjs/react' -import { Progressing, showError, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib' +import { + Progressing, + RegistryIcon, + RegistryType, + showError, + ToastManager, + ToastVariantType, +} from '@devtron-labs/devtron-fe-common-lib' import { List } from '../../globalConfigurations/GlobalConfiguration' import { updateChartProviderList, updateSyncSpecificChart } from '../charts.service' import { ReactComponent as SyncIcon } from '../../../assets/icons/ic-arrows_clockwise.svg' @@ -25,7 +32,17 @@ import { ChartListType } from '../charts.types' import { getNonEditableChartRepoText } from '../../common' import { TOAST_INFO } from '../../../config/constantMessaging' -const ChartListPopUpRow = ({ index, list, enabled, toggleEnabled }: { index: number; list: ChartListType, enabled: boolean, toggleEnabled: (enable: boolean) => void }) => { +const ChartListPopUpRow = ({ + index, + list, + enabled, + toggleEnabled, +}: { + index: number + list: ChartListType + enabled: boolean + toggleEnabled: (enable: boolean) => void +}) => { const [isSpecificChartRefetchLoading, setSpecificChartRefetchLoading] = useState(false) const [isToggleLoading, setToggleLoading] = useState(false) @@ -82,7 +99,7 @@ const ChartListPopUpRow = ({ index, list, enabled, toggleEnabled }: { index: num {list.isOCIRegistry ? ( -
+ ) : ( )} diff --git a/src/components/ciConfig/CIContainerRegistryConfig.tsx b/src/components/ciConfig/CIContainerRegistryConfig.tsx index 40d9819925..e01f4e4a0d 100644 --- a/src/components/ciConfig/CIContainerRegistryConfig.tsx +++ b/src/components/ciConfig/CIContainerRegistryConfig.tsx @@ -22,6 +22,7 @@ import { Icon, InfoColourBar, REGISTRY_TYPE_MAP, + RegistryIcon, SelectPicker, } from '@devtron-labs/devtron-fe-common-lib' import { ReactComponent as ArrowIcon } from '../../assets/icons/ic-arrow-left.svg' @@ -53,7 +54,7 @@ export default function CIContainerRegistryConfig({ ...registry, label: registry.id, value: registry.id, - startIcon:
, + startIcon: , }) const getContainerRegistryOptions = () => dockerRegistries.map(getCustomRegistryOption) @@ -133,7 +134,7 @@ export default function CIContainerRegistryConfig({ Container Registry
- + {currentRegistry?.id}
diff --git a/src/components/dockerRegistry/Docker.tsx b/src/components/dockerRegistry/Docker.tsx index 5b2b65104c..9e8db64fa1 100644 --- a/src/components/dockerRegistry/Docker.tsx +++ b/src/components/dockerRegistry/Docker.tsx @@ -47,6 +47,8 @@ import { ToastVariantType, ToastManager, Textarea, + RegistryType as CommonRegistryType, + RegistryIcon, } from '@devtron-labs/devtron-fe-common-lib' import Tippy from '@tippyjs/react' import CreatableSelect from 'react-select/creatable' @@ -291,7 +293,7 @@ const CollapsedList = ({ > {id && ( -
+ )} {!id && collapsed && ( @@ -1772,7 +1774,9 @@ const DockerForm = ({ } // For EA Mode GCR is not available as it is not OCI compliant - const EA_MODE_REGISTRY_TYPE_MAP = Object.fromEntries(Object.entries(REGISTRY_TYPE_MAP).filter(([key,_]) => key !== 'gcr')) + const EA_MODE_REGISTRY_TYPE_MAP = Object.fromEntries( + Object.entries(REGISTRY_TYPE_MAP).filter(([key, _]) => key !== 'gcr'), + ) return (
diff --git a/src/css/base.scss b/src/css/base.scss index 2979f03b36..0fed53470a 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -2329,62 +2329,6 @@ button.anchor { background-size: contain !important; } -.dc__registry-icon, -.repository-icon { - width: 20px; - height: 20px; - background-size: contain; - background-image: url('../assets/icons/container.svg'); - - &.git { - background-image: url('../assets/icons/git/git.svg'); - } - - &.github { - background-image: url('../assets/icons/git/github.svg'); - } - - &.gitlab { - background-image: url('../assets/icons/git/gitlab.svg'); - } - - &.bitbucket { - background-image: url('../assets/icons/git/bitbucket.svg'); - } - - &.docker { - background-image: url('../assets/icons/git/docker.svg'); - } - - &.docker-hub { - background-image: url('../assets/icons/git/docker.svg'); - } - - &.acr { - background-image: url('../assets/icons/ic-azure.svg'); - } - - &.quay { - background-image: url('../assets/icons/ic-quay.svg'); - } - - &.ecr { - background-image: url('../assets/icons/ic-ecr.svg'); - } - - &.artifact-registry { - background-image: url('../assets/icons/ic-google-artifact-registry.svg'); - } - - &.gcr { - background-image: url('../assets/icons/ic-google-container-registry.svg'); - } - - &.other { - background-image: url('../assets/icons/container.svg'); - } -} - .xterm .xterm-viewport { width: initial !important; }