fix(portal): remove compare button in api mapping & make left panel s…

…crollable
mycloudnexus · Dec 9, 2024 · b9135a1 · b9135a1
1 parent 8f6ed4b
commit b9135a1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/...p/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx b/...p/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
@@ -510,7 +510,6 @@ const NewAPIMapping = ({
                       Save
                     </Button>
                   </Tooltip>
-                  <Button type="default">Compare</Button>
                 </>
               )}
               <DeployStage

diff --git a/...n-app-portal/src/pages/StandardAPIMapping/components/MappingDetailsList/index.module.scss b/...n-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
@@ -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;
-}
+}