Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into refactor/remove-monaco

Author: RohitRaj011

package-lock.json

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

package.json

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICCpu } from '@Icons/ic-cpu.svg'
-import { ReactComponent as ICMemory } from '@Icons/ic-memory.svg'
 import { ReactComponent as ICSprayCan } from '@Icons/ic-spray-can.svg'
 import { ReactComponent as ICTag } from '@Icons/ic-tag.svg'
 import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg'
+import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
+import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
 import { UseBreadcrumbProps } from '@Common/BreadCrumb/Types'
 import { CMSecretComponentType } from '@Shared/Services'
 

src/Assets/Icon/ic-cpu.svg

@@ -21,9 +21,9 @@ import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { useAsync } from '@Common/Helper'
 import { useUrlFilters } from '@Common/Hooks'
-import { GenericEmptyState, InfoColourBar } from '@Common/index'
+import { GenericEmptyState, InfoColourBar, SortingOrder } from '@Common/index'
 import { Progressing } from '@Common/Progressing'
-import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
+import { DEPLOYMENT_CONFIG_DIFF_SORT_KEY, getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import { useMainContext } from '@Shared/Providers'
 import { EnvResourceType, getAppEnvDeploymentConfig, getCompareSecretsData } from '@Shared/Services'
@@ -125,7 +125,7 @@ export const DeploymentHistoryConfigDiff = ({
         `${generatePath(path, { ...params })}/${resourceType}${resourceName ? `/${resourceName}` : ''}${search}`
 
     // Generate the deployment history config list
-    const deploymentConfigList = useMemo(() => {
+    const { deploymentConfigList, sortedDeploymentConfigList } = useMemo(() => {
         if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
             const compareList =
                 isPreviousDeploymentConfigAvailable && compareDeploymentConfig[1].status === 'fulfilled'
@@ -140,17 +140,30 @@ export const DeploymentHistoryConfigDiff = ({
             const currentList =
                 compareDeploymentConfig[0].status === 'fulfilled' ? compareDeploymentConfig[0].value.result : null
 
+            // This data is displayed on the deployment history diff view page.
+            // It requires dynamic sorting based on the current sortBy and sortOrder, which the user can modify using the Sort Button.
             const configData = getAppEnvDeploymentConfigList({
                 currentList,
                 compareList,
                 getNavItemHref,
                 convertVariables,
                 sortingConfig: { sortBy, sortOrder },
             })
-            return configData
+
+            // Sorting is hardcoded here because this data is displayed on the deployment history configuration tab.
+            // The diff needs to be shown on sorted data, and no additional sorting will be applied.
+            const sortedConfigData = getAppEnvDeploymentConfigList({
+                currentList,
+                compareList,
+                getNavItemHref,
+                convertVariables,
+                sortingConfig: { sortBy: DEPLOYMENT_CONFIG_DIFF_SORT_KEY, sortOrder: SortingOrder.ASC },
+            })
+
+            return { deploymentConfigList: configData, sortedDeploymentConfigList: sortedConfigData }
         }
 
-        return null
+        return { deploymentConfigList: null, sortedDeploymentConfigList: null }
     }, [
         isPreviousDeploymentConfigAvailable,
         compareDeploymentConfigLoader,
@@ -170,8 +183,11 @@ export const DeploymentHistoryConfigDiff = ({
     )
 
     const groupedDeploymentConfigList = useMemo(
-        () => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
-        [deploymentConfigList],
+        () =>
+            sortedDeploymentConfigList
+                ? groupArrayByObjectKey(sortedDeploymentConfigList.configList, 'groupHeader')
+                : [],
+        [sortedDeploymentConfigList],
     )
 
     /** Previous deployment config has 404 error. */

src/Assets/Icon/ic-memory.svg

@@ -33,6 +33,7 @@ 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'
 import { ReactComponent as ICCopy } from '@IconsV2/ic-copy.svg'
+import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
 import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
@@ -59,6 +60,7 @@ import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
 import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
 import { ReactComponent as ICHelm } from '@IconsV2/ic-helm.svg'
+import { ReactComponent as ICHelpFilled } from '@IconsV2/ic-help-filled.svg'
 import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
@@ -74,6 +76,7 @@ import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-
 import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
 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 ICMissing } from '@IconsV2/ic-missing.svg'
 import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
@@ -146,6 +149,7 @@ export const iconMap = {
     'ic-container': ICContainer,
     'ic-cookr': ICCookr,
     'ic-copy': ICCopy,
+    'ic-cpu': ICCpu,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,
     'ic-delete-lightning': ICDeleteLightning,
@@ -172,6 +176,7 @@ export const iconMap = {
     'ic-heart-red-animated': ICHeartRedAnimated,
     'ic-heart-red': ICHeartRed,
     'ic-helm': ICHelm,
+    'ic-help-filled': ICHelpFilled,
     'ic-help-outline': ICHelpOutline,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
@@ -187,6 +192,7 @@ export const iconMap = {
     'ic-logout': ICLogout,
     'ic-medium-delete': ICMediumDelete,
     'ic-medium-paintbucket': ICMediumPaintbucket,
+    'ic-memory': ICMemory,
     'ic-microsoft': ICMicrosoft,
     'ic-missing': ICMissing,
     'ic-monitoring': ICMonitoring,