Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/new-layout

Author: eshankvaish

package-lock.json

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

package.json

@@ -270,6 +270,7 @@ export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): Runt
     const runtimeParams = (response?.runtimePluginVariables ?? []).map<RuntimePluginVariables>((variable) => ({
         ...variable,
         defaultValue: variable.value,
+        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random())
     }))
 
     runtimeParams.push(...envVariables)

src/Common/Common.service.ts

@@ -74,6 +74,7 @@ export const URLS = {
     DEPLOYMENT_HISTORY_CONFIGURATIONS: '/configuration',
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
+    GLOBAL_CONFIG_DEPLOYMENT_CHARTS_UPLOAD_CHART: '/global-config/deployment-charts/upload-chart',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
     RESOURCE_BROWSER: '/resource-browser',
     COMPARE_CLUSTERS: '/compare-clusters',
@@ -99,6 +100,7 @@ export const ROUTES = {
     TELEMETRY_EVENT: 'telemetry/event',
     SERVER_INFO_API: 'server',
     ATTRIBUTES_USER: 'attributes/user',
+    GET: 'get',
     UPDATE: 'update',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',

src/Common/Constants.ts

@@ -29,6 +29,7 @@ const SegmentedControl = ({
     name,
     variant = SegmentedControlVariant.WHITE_ON_GRAY,
     size = ComponentSizeType.medium,
+    isControlled = false,
 }: SegmentedControlProps) => (
     <StyledRadioGroup
         className={`${variant} ${SEGMENTED_CONTROL_SIZE_TO_CLASS_MAP[size]} ${rootClassName}`}
@@ -45,6 +46,7 @@ const SegmentedControl = ({
                 showTippy={!!tooltips?.[index]}
                 tippyContent={tooltips?.[index] ?? ''}
                 dataTestId={`${name}-${tab.value}`}
+                canSelect={!isControlled}
             >
                 {tab.label}
             </StyledRadioGroup.Radio>

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -37,4 +37,8 @@ export interface SegmentedControlProps {
      * @default ComponentSizeType.medium
      */
     size?: ComponentSizeType.medium | ComponentSizeType.large
+    /**
+     * @default false
+     */
+    isControlled?: boolean
 }

src/Common/SegmentedControl/types.ts

@@ -21,6 +21,7 @@ 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'
 

src/Common/TippyCustomized.tsx

@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-export type DeploymentChartListDTO = Array<{
+interface DeploymentChartInfo {
     id: number
     chartDescription?: string
     isUserUploaded: boolean
     name: string
     version: string
-}>
+    uploadedBy: string
+}
 
-interface DeploymentChartVersionsType {
-    id: number
-    version: string
+export type DeploymentChartListDTO = DeploymentChartInfo[]
+
+export interface DeploymentChartVersionsType
+    extends Pick<DeploymentChartInfo, 'id' | 'version' | 'uploadedBy' | 'isUserUploaded'> {
     description: string
 }
 
-export interface DeploymentChartType {
-    name: string
-    isUserUploaded: boolean
+export interface DeploymentChartType extends Pick<DeploymentChartInfo, 'name'> {
     versions: DeploymentChartVersionsType[]
 }
 

src/Pages/GlobalConfigurations/DeploymentCharts/types.ts

@@ -15,30 +15,37 @@
  */
 
 import { versionComparatorBySortOrder } from '@Shared/Helpers'
-import { DeploymentChartListDTO, DeploymentChartType, DEVTRON_DEPLOYMENT_CHART_NAMES } from './types'
+import {
+    DeploymentChartListDTO,
+    DeploymentChartType,
+    DeploymentChartVersionsType,
+    DEVTRON_DEPLOYMENT_CHART_NAMES,
+} from './types'
 import fallbackGuiSchema from './basicViewSchema.json'
 
 export const convertDeploymentChartListToChartType = (data: DeploymentChartListDTO): DeploymentChartType[] => {
     if (!data) {
         return []
     }
-    const chartMap = data.reduce(
-        (acc, { id, version, chartDescription: description = '', name, isUserUploaded = true }) => {
+    const chartMap = data.reduce<Record<string, DeploymentChartType>>(
+        (acc, { id, version, chartDescription, name, isUserUploaded, uploadedBy }) => {
             if (!name || !id || !version) {
                 return acc
             }
+            const currVersionDetail: DeploymentChartVersionsType = {
+                id,
+                version,
+                description: chartDescription || '',
+                uploadedBy: isUserUploaded ? uploadedBy || '' : 'Devtron',
+                isUserUploaded,
+            }
             const detail = acc[name]
             if (detail) {
-                detail.versions.push({
-                    id,
-                    version,
-                    description,
-                })
+                detail.versions.push(currVersionDetail)
             } else {
                 acc[name] = {
                     name,
-                    isUserUploaded,
-                    versions: [{ id, version, description }],
+                    versions: [currVersionDetail],
                 }
             }
             return acc

src/Pages/GlobalConfigurations/DeploymentCharts/utils.ts

@@ -47,6 +47,8 @@ const InfoIconTippy = ({
         documentationLink={documentationLink}
         documentationLinkText={documentationLinkText}
         additionalContent={additionalContent}
+        animation="shift-toward"
+        duration={400}
     >
         {children || (
             <button