fix(portal): filter users by state and role and some minor changes (#271

) * fix(kraken): filter users by state and role and some minor changes * Remove unusable button in deployment history page
mycloudnexus · Dec 5, 2024 · d27fd49 · d27fd49
1 parent 77959a2
commit d27fd49
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 97 deletions.
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx
@@ -1,64 +1,24 @@
 import RichTextViewer from "@/components/RichTextViewer";
 import { SecondaryText, Text } from "@/components/Text";
 import { IReleaseHistory } from "@/utils/types/product.type";
-import { Flex, Tag } from "antd";
+import { Flex } from "antd";
 import { useState } from "react";
 import { DetailDrawer } from "../VersionSelect/DetailDrawer";
 import { UpgradeProcess } from "./UpgradeProcess";
 import styles from "./index.module.scss";
-import { useGetSystemInfo } from "@/hooks/user";
 
 export function VersionDetail({ data }: Readonly<{
   data?: IReleaseHistory;
 }>) {
-  const { data: info } = useGetSystemInfo();
-
   // To view details of upgrade history
   const [deploymentId, setDeploymentId] = useState<string | null>(null);
 
   return (
     <>
       <div className={styles.root}>
-        <Flex justify="space-between" align="center">
-          <Text.NormalLarge data-testid="detailVersion">
-            {data?.productVersion}
-          </Text.NormalLarge>
-
-          <Flex align="center" gap={12}>
-            <Text.LightMedium lineHeight="20px" color="#00000073">
-              Current version
-            </Text.LightMedium>
-            <Text.LightMedium lineHeight="20px">Control plane</Text.LightMedium>
-            <Tag
-              data-testid="controlePlaneUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.controlProductVersion ?? 'N/A'}
-            </Tag>
-            <Text.LightMedium lineHeight="20px">Stage</Text.LightMedium>
-            <Tag
-              data-testid="stageUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.stageProductVersion ?? 'N/A'}
-            </Tag>
-            <Text.LightMedium lineHeight="20px">
-              Production
-            </Text.LightMedium>
-            <Tag
-              data-testid="productionUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.productionProductVersion ?? 'N/A'}
-            </Tag>
-          </Flex>
-        </Flex>
+        <Text.NormalLarge data-testid="detailVersion" style={{ minHeight: 19 }}>
+          {data?.productVersion}
+        </Text.NormalLarge>
 
         <div className={styles.container}>
           {!data ? (

diff --git a/...pp/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss b/...pp/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss
@@ -48,6 +48,7 @@
 .selected {
   background: #dbe4fb !important;
 
+  .releaseVersion,
   .productSpec {
     color: var(--primary) !important;
   }

diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx
@@ -172,7 +172,7 @@ export const VersionSelect = ({
             onClick={() => setSelectedVersion(d.templateUpgradeId)}
           >
             <Flex align="center" gap={7}>
-              <Text.LightMedium data-testid="releaseVersion">
+              <Text.LightMedium data-testid="releaseVersion" className={styles.releaseVersion}>
                 {d.productVersion}
               </Text.LightMedium>
               <SecondaryText.LightSmall data-testid="productSpec" className={styles.productSpec}>

diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss
@@ -58,3 +58,8 @@
   background: #f6f7fa;
   flex-direction: column;
 }
+
+.mappingVersion {
+  color: var(--text-secondary);
+  border: 1px solid var(--bg);
+}
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx
@@ -5,13 +5,14 @@ import { useInfiniteReleaseHistoryQuery } from "@/hooks/mappingTemplate";
 import { useAppStore } from "@/stores/app.store";
 import { IReleaseHistory } from "@/utils/types/product.type";
 import { RightOutlined } from "@ant-design/icons";
-import { Flex, Tag, Empty } from "antd";
+import { Flex, Tag } from "antd";
 import { omit } from "lodash";
 import { VersionDetail } from "./components/VersionDetail";
 import { VersionSelect } from "./components/VersionSelect";
 import { Text } from "@/components/Text";
 import DoneIcon from "@/assets/icon/upgrade-done.svg";
 import ReleaseIcon from "@/assets/release-bg.svg";
+import { useGetSystemInfo } from "@/hooks/user";
 
 const steps = [
   "Control plane upgrade",
@@ -38,6 +39,7 @@ export default function MappingTemplate() {
       size: 20,
     })
   );
+  const { data: info } = useGetSystemInfo();
 
   const [selectedVersion, setSelectedVersion] = useState<string | null | undefined>(undefined);
 
@@ -58,10 +60,46 @@ export default function MappingTemplate() {
 
 
   return (
-    <PageLayout title="Mapping template release & Upgrade">
+    <PageLayout title={
+      <>
+        <span>Mapping template release & Upgrade</span>
+
+        <Flex align="center" gap={12}>
+          <Text.LightMedium lineHeight="20px" color="#00000073">
+            Current
+          </Text.LightMedium>
+          <Text.LightMedium lineHeight="20px">Control plane</Text.LightMedium>
+          <Tag
+            data-testid="controlePlaneUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.controlProductVersion ?? 'N/A'}
+          </Tag>
+          <Text.LightMedium lineHeight="20px">Stage</Text.LightMedium>
+          <Tag
+            data-testid="stageUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.stageProductVersion ?? 'N/A'}
+          </Tag>
+          <Text.LightMedium lineHeight="20px">
+            Production
+          </Text.LightMedium>
+          <Tag
+            data-testid="productionUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.productionProductVersion ?? 'N/A'}
+          </Tag>
+        </Flex>
+      </>
+    }>
       <div className={styles.root}>
         <Flex justify="space-between"
-            className={styles.info}>
+          className={styles.info}>
           <Flex
             vertical
             justify="center"
@@ -106,23 +144,19 @@ export default function MappingTemplate() {
         </Flex>
 
         <Flex className={styles.content}>
-          {!isFetching && !releases?.length ? (
-            <Empty description="No release history" className={styles.empty} />
-          ) : (
-            <>
-              <VersionSelect
-                data={releases ?? []}
-                selectedVersion={selectedVersion}
-                setSelectedVersion={setSelectedVersion}
-                // Infinite scroll
-                loading={isFetching && !isFetchingNextPage}
-                isFetchingNextPage={isFetchingNextPage}
-                hasNextPage={hasNextPage}
-                onFetchNext={fetchNextPage}
-              />
-              <VersionDetail data={currentDetailInfo as any} />
-            </>
-          )}
+          <>
+            <VersionSelect
+              data={releases ?? []}
+              selectedVersion={selectedVersion}
+              setSelectedVersion={setSelectedVersion}
+              // Infinite scroll
+              loading={isFetching && !isFetchingNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              hasNextPage={hasNextPage}
+              onFetchNext={fetchNextPage}
+            />
+            <VersionDetail data={currentDetailInfo as any} />
+          </>
         </Flex>
       </div>
     </PageLayout>

diff --git a/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx b/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx
@@ -1,4 +1,3 @@
-import DetailIcon from "@/assets/icon/detail.svg";
 import EmptyIcon from "@/assets/icon/empty.svg";
 import {
   PRODUCT_CACHE_KEYS,
@@ -14,7 +13,6 @@ import { IPagination } from "@/utils/types/common.type";
 import { IEnv } from "@/utils/types/env.type";
 import { IDeploymentHistory } from "@/utils/types/product.type";
 import {
-  Button,
   Flex,
   Result,
   Switch,
@@ -30,6 +28,7 @@ import { ContentTime } from "./ContentTime";
 import { DeploymentBtn } from "./DeployBtn";
 import styles from "./index.module.scss";
 import { ApiCard } from "@/components/ApiMapping";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
 const DeployHistory = ({
   scrollHeight,
@@ -148,7 +147,10 @@ const DeployHistory = ({
     if (isStage)
       columns.push(
         {
-          title: "Verified for Production",
+          title: <>
+            Verified for Production{' '}
+            <Tooltip title="Toggle this button means you have verified this deployment version in stage environment"><InfoCircleOutlined /></Tooltip>
+          </>,
           dataIndex: "verifiedStatus",
           width: 160,
           render: (verifiedStatus: boolean, record: IDeploymentHistory) =>
@@ -181,16 +183,11 @@ const DeployHistory = ({
       width: 120,
       fixed: "right",
       render: (record: IDeploymentHistory) => (
-        <Flex gap={12} align="center">
-          <Tooltip title="Check details and difference">
-            <Button type="text" className={styles.defaultBtn}>
-              <DetailIcon />
-            </Button>
-          </Tooltip>
+        <>
           {record.envName !== "production" && (
             <DeploymentBtn record={record} env={envItems} />
           )}
-        </Flex>
+        </>
       ),
     });
 

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
@@ -9,6 +9,8 @@
   border-bottom-left-radius: 4px;
   background-color: #fff;
   min-width: 201px;
+  width: 300px;
+  padding: 16px 0;
   overflow-y: scroll;
   &::-webkit-scrollbar {
     display: none;
@@ -22,9 +24,11 @@
   }
 
   .draggableSide {
-    height: 100%;
+    height: calc(100% + 32px);
+    margin-top: -16px;
+    margin-bottom: -16px;
     min-width: 1px;
-    background-color: lightgray;
+    background-color: var(--bg);
     cursor: ew-resize;
     z-index: 100;
 
@@ -92,7 +96,6 @@
 }
 .versionListWrapper {
   flex: 1;
-  border-left: 1px solid #f0f0f0;
   min-width: 840px;
 }
 

diff --git a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx
@@ -148,7 +148,6 @@ const StandardAPIMapping = () => {
           onBlur={handleMouseUp}
           onMouseUp={handleMouseUp}>
           <Flex
-            justify={isLoading ? "center" : "space-between"}
             className={styles.leftWrapper}
             ref={leftPanelRef}
           >
@@ -159,31 +158,27 @@ const StandardAPIMapping = () => {
               />
             )}
 
-            <div
+            {!isLoading && (<div
               data-testid="resizableBar"
               tabIndex={0}
               role="button"
               className={classNames(styles.draggableSide, isMouseDown && styles.interactive)}
               onMouseDown={handleMouseDown}
-              ref={bar} />
+              ref={bar} />)}
           </Flex>
 
-          <Flex
+          {!isGroupedPathsEmpty && (<Flex
             align="center"
             justify="center"
             className={styles.versionListWrapper}
           >
-            {activePath && !isChangeMappingKey ? (
+            {activePath && !isChangeMappingKey && (
               <NewAPIMapping
                 refetch={refetch}
                 isRequiredMapping={isRequiredMapping}
               />
-            ) : (
-              <div className={styles.empty}>
-                <Spin size="large" />
-              </div>
             )}
-          </Flex>
+          </Flex>)}
         </Flex>
       </Spin>
     </PageLayout>