From 2d4dd7bc43a91a99dbb9cfab1661da374fe497ff Mon Sep 17 00:00:00 2001
From: james-tran-3005 <tnhuy@cmcglobal.vn>
Date: Fri, 6 Dec 2024 13:29:15 +0700
Subject: [PATCH] fix(portal): remove compare button in api mapping & make left
 panel scrollable

---
 .../ActivityDiagrams/ErrorDiagram/index.tsx   |  2 +-
 .../src/pages/NewAPIMapping/index.tsx         |  1 -
 .../MappingDetailsList/index.module.scss      |  2 +
 .../StandardAPIMapping/index.module.scss      | 41 +++++++++++++++++--
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx b/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx
index 164743c7..dcc375be 100644
--- a/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx
@@ -80,7 +80,7 @@ const ErrorBrakedownDiagram = ({ props }: Props) => {
   return (
     <Flex vertical className={styles.contentBox}>
       <Flex style={{ paddingBottom: "12px" }}>
-        <Text.LightMedium>Error brakedown</Text.LightMedium>
+        <Text.LightMedium>Error breakdown</Text.LightMedium>
       </Flex>
       <Spin spinning={isLoading || isRefetching}>
         {!errorData.length
diff --git a/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/index.tsx b/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/index.tsx
index 0ef55695..e545c4bf 100644
--- a/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/index.tsx
@@ -510,7 +510,6 @@ const NewAPIMapping = ({
                       Save
                     </Button>
                   </Tooltip>
-                  <Button type="default">Compare</Button>
                 </>
               )}
               <DeployStage
diff --git a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/components/MappingDetailsList/index.module.scss b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/components/MappingDetailsList/index.module.scss
index f7d93707..8d2b0bcb 100644
--- a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/components/MappingDetailsList/index.module.scss
+++ b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/components/MappingDetailsList/index.module.scss
@@ -1,5 +1,6 @@
 .collapseBox {
   flex: 1;
+
   &:global(> .ant-collapse-item) {
     &:global(> .ant-collapse-header) {
       padding-left: 15px;
@@ -20,6 +21,7 @@
   :global {
     .ant-collapse-item {
       border-radius: 0 !important;
+      min-width: fit-content;
     }
     .ant-collapse-item:has(.hightlight-one) {
       background-color: rgba(41, 98, 255, 0.2) !important;
diff --git a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
index 9248626e..d95fc67c 100644
--- a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
+++ b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
@@ -12,6 +12,7 @@
   width: 300px;
   padding: 16px 0;
   overflow-y: scroll;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -20,6 +21,27 @@
     .ant-spin-nested-loading {
       flex: 1;
       min-width: 0;
+
+      .ant-spin-container {
+        display: flex;
+        overflow-x: auto;
+
+
+        ::-webkit-scrollbar {
+          height: 18px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+          border: 6px solid rgba(0, 0, 0, 0);
+          background-clip: padding-box;
+          border-radius: 8px;
+          background-color: #dde1e5;
+
+          &:hover {
+            background-color: #f7f7f7;
+          }
+        }
+      }
     }
   }
 
@@ -31,11 +53,11 @@
     background-color: var(--bg);
     cursor: ew-resize;
     z-index: 100;
-  
+
     &:hover {
       background-color: var(--primary);
     }
-    
+
     &.interactive {
       position: absolute;
     }
@@ -46,15 +68,18 @@
   padding: 0 10px 10px 10px;
   border-bottom: 1px solid #dde1e5;
 }
+
 .componentIconWrapper {
   width: 17px;
   border-radius: 5px;
   padding: 4px;
   background-color: #91d5ff;
-  > svg {
+
+  >svg {
     display: block;
   }
 }
+
 .envItem {
   box-sizing: border-box;
   flex: 0 0 calc(50% - 4px);
@@ -63,37 +88,45 @@
   background-color: #f0f2f5;
   padding: 4px 8px;
 }
+
 .list {
   width: 100%;
+
   :global(.ant-list-items) {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
+
   :global(.ant-list-item) {
     padding: 0;
     border-block-end: unset;
   }
 }
+
 .item {
   padding: 2px 24px;
   cursor: pointer;
 }
+
 .activeItem {
   background-color: #e6f7ff;
   color: #096dd9;
   border-right: 3px solid #2962ff;
 }
+
 .modalCreate {
   :global {
     .ant-modal-confirm-btns {
       margin-top: 24px;
     }
+
     .ant-modal-content {
       padding: 32px !important;
     }
   }
 }
+
 .versionListWrapper {
   flex: 1;
   min-width: 840px;
@@ -106,4 +139,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
\ No newline at end of file