fix(portal): fix bug regression test

mycloudnexus · Nov 14, 2024 · 969e1f9 · 969e1f9
1 parent e1a9d34
commit 969e1f9
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 183 deletions.
diff --git a/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx b/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx
@@ -59,7 +59,7 @@ const APIServerDrawer = ({ item, isOpen, onClose }: Props) => {
         render: (item: Record<string, any>) => {
           const linkKey = findLinkedComponent(item.metadata.key);
           return (
-            <Flex justify="start">
+            <Flex justify="start" align="center">
               <RequestMethod method={item.facets.trigger?.method} />
 
               <Tooltip title={linkKey ? null : "This use case does not exist."}>
@@ -130,6 +130,7 @@ const APIServerDrawer = ({ item, isOpen, onClose }: Props) => {
                     ].length > 0 ? (
                       <Table
                         columns={columns}
+                        rowKey='id'
                         dataSource={
                           componentDetail.endpointUsage[
                             key as keyof typeof componentDetail.endpointUsage

diff --git a/kraken-app/kraken-app-portal/src/components/Method/index.module.scss b/kraken-app/kraken-app-portal/src/components/Method/index.module.scss
@@ -1,4 +1,8 @@
-.disabled {
-  background: #f5f5f5 !important;
-  color: #595959 !important;
-}
+.requestMethod {
+  height: fit-content;
+
+  &.disabled {
+    background: #f5f5f5 !important;
+    color: #595959 !important;
+  }
+}
diff --git a/kraken-app/kraken-app-portal/src/components/Method/index.tsx b/kraken-app/kraken-app-portal/src/components/Method/index.tsx
@@ -1,6 +1,7 @@
 import { Tag } from "antd";
 import { useMemo } from "react";
 import styles from "./index.module.scss";
+import classNames from "classnames";
 
 const RequestMethod = ({ method = "", noSpace = false, disabled = false }) => {
   const methodColor = useMemo(() => {
@@ -21,7 +22,7 @@ const RequestMethod = ({ method = "", noSpace = false, disabled = false }) => {
   return (
     <Tag
       data-testid="method"
-      className={disabled ? styles.disabled : ""}
+      className={classNames(styles.requestMethod, disabled && styles.disabled)}
       bordered={false}
       color={methodColor}
       style={noSpace ? { marginRight: 0 } : {}}

diff --git a/kraken-app/kraken-app-portal/src/pages/APIServerList/components/APIServerCard.tsx b/kraken-app/kraken-app-portal/src/pages/APIServerList/components/APIServerCard.tsx
@@ -87,19 +87,15 @@ const APIServerCard = ({ item, refetchList }: Props) => {
         title={
           <Flex justify="space-between" gap={12} align="center">
             <Flex gap={8}>
-              <Flex align="center">
-                <Text.NormalLarge>
-                  {get(item, "metadata.name", "")}
-                </Text.NormalLarge>
-              </Flex>
+              <Text.NormalLarge>
+                {get(item, "metadata.name", "")}
+              </Text.NormalLarge>
               <div onMouseEnter={trueHover} onMouseLeave={falseHover}>
                 {isHover && isApiInUse ? (
                   <Button
                     style={{ padding: "0px" }}
                     type="link"
-                    onClick={() => {
-                      setOpenMappingDrawer(true);
-                    }}
+                    onClick={() => setOpenMappingDrawer(true)}
                   >
                     Check details
                   </Button>
@@ -112,7 +108,7 @@ const APIServerCard = ({ item, refetchList }: Props) => {
                 )}
               </div>
             </Flex>
-            <Flex gap={12}>
+            <Flex>
               <Button type="link" onClick={handleEdit}>
                 Edit
               </Button>
@@ -127,102 +123,97 @@ const APIServerCard = ({ item, refetchList }: Props) => {
           </Flex>
         }
       >
-        <Row>
-          <Col lg={8} md={12}>
-            <Flex gap={8} justify="flex-start" align="center">
-              <TitleIcon />
-              <Text.NormalLarge>Seller API Server basics</Text.NormalLarge>
-            </Flex>
-            <Flex vertical gap={12} style={{ marginTop: 12 }}>
-              <Flex vertical align="flex-start" gap={8}>
-                <Text.LightMedium color="#00000073">
-                  Application name
-                </Text.LightMedium>
-                <Typography.Text
-                  ellipsis={{
-                    tooltip: { title: get(item, "metadata.name") },
-                  }}
-                >
-                  {get(item, "metadata.name")}
-                </Typography.Text>
-                <Text.LightMedium></Text.LightMedium>
-              </Flex>
-              <Flex vertical align="flex-start" gap={8}>
-                <Text.LightMedium color="#00000073">
-                  Online API document link
-                </Text.LightMedium>
-                <Typography.Text
-                  ellipsis={{
-                    tooltip: { title: get(item, "facets.baseSpec.path", "-") },
-                  }}
-                >
-                  {get(item, "facets.baseSpec.path", "-")}
-                </Typography.Text>
-              </Flex>
-              <Flex vertical align="flex-start" gap={8}>
-                <Text.LightMedium color="#00000073">
-                  Description
-                </Text.LightMedium>
-                <Typography.Text
-                  ellipsis={{
-                    tooltip: {
-                      title: get(item, "metadata.description", "description"),
-                    },
-                  }}
-                >
-                  {get(item, "metadata.description", "description")}
-                </Typography.Text>
-              </Flex>
-            </Flex>
-          </Col>
-          <Col lg={8} md={12}>
-            <Flex gap={8} justify="flex-start" align="center">
-              <TitleIcon />
-              <Text.NormalLarge>
-                Base URL for environment variables
-              </Text.NormalLarge>
+        <Row gutter={[16, 16]}>
+          <Group title="Seller API Server basics">
+            <Flex vertical align="flex-start" gap={8}>
+              <Text.LightMedium color="#00000073">
+                Application name
+              </Text.LightMedium>
+              <Typography.Text
+                ellipsis={{
+                  tooltip: { title: get(item, "metadata.name") },
+                }}
+              >
+                {get(item, "metadata.name")}
+              </Typography.Text>
             </Flex>
-            <Flex vertical gap={8} align="flex-start" style={{ marginTop: 12 }}>
-              {environmentData?.map((e) => (
-                <Flex gap={8} justify="flex-start" key={e.name} align="center">
-                  <Text.LightMedium style={{ display: 'inline-block', width: 120, textAlign: 'left' }}>
-                    {e.name}
-                  </Text.LightMedium>
-                  <Typography.Text style={{ whiteSpace: "break-spaces" }}>
-                    URL: {e.url}
-                  </Typography.Text>
-                </Flex>
-              ))}
+            <Flex vertical align="flex-start" gap={8}>
+              <Text.LightMedium color="#00000073">
+                Online API document link
+              </Text.LightMedium>
+              <Typography.Text
+                ellipsis={{
+                  tooltip: { title: get(item, "facets.baseSpec.path", "-") },
+                }}
+              >
+                {get(item, "facets.baseSpec.path", "-")}
+              </Typography.Text>
             </Flex>
-          </Col>
-          <Col lg={8} md={24}>
-            <Flex gap={8} justify="flex-start" align="center">
-              <TitleIcon />
-              <Text.NormalLarge>API spec</Text.NormalLarge>
+            <Flex vertical align="flex-start" gap={8}>
+              <Text.LightMedium color="#00000073">
+                Description
+              </Text.LightMedium>
+              <Typography.Text
+                ellipsis={{
+                  tooltip: {
+                    title: get(item, "metadata.description", "description"),
+                  },
+                }}
+              >
+                {get(item, "metadata.description", "description")}
+              </Typography.Text>
             </Flex>
-            <Flex vertical align="flex-start" gap={6} style={{ marginTop: 12 }}>
-              <Flex gap={8}>
-                <Text.NormalMedium color="#000000D9">
-                  API spec in yaml format
-                </Text.NormalMedium>
-              </Flex>
-              <Flex gap={9} justify="flex-start">
-                <PaperClipOutlined />
-                <Text.LightMedium
-                  color="#2962FF"
-                  style={{ cursor: "pointer" }}
-                  role="none"
-                  onClick={openDrawer}
-                >
-                  {fileName}
+          </Group>
+
+          <Group title="Base URL for environment variables">
+            {environmentData?.map((e) => (
+              <Flex gap={8} justify="flex-start" key={e.name} align="center">
+                <Text.LightMedium style={{ display: 'inline-block', width: 120, textAlign: 'left' }}>
+                  {e.name}
                 </Text.LightMedium>
+                <Typography.Text style={{ whiteSpace: "break-spaces", flex: 1 }}>
+                  URL: {e.url}
+                </Typography.Text>
               </Flex>
+            ))}
+          </Group>
+
+          <Group title="API spec">
+            <Flex gap={8}>
+              <Text.NormalMedium color="#000000D9">
+                API spec in yaml format
+              </Text.NormalMedium>
             </Flex>
-          </Col>
+            <Flex gap={9} justify="flex-start">
+              <PaperClipOutlined />
+              <Text.LightMedium
+                color="#2962FF"
+                style={{ cursor: "pointer" }}
+                role="none"
+                onClick={openDrawer}
+              >
+                {fileName}
+              </Text.LightMedium>
+            </Flex>
+          </Group>
         </Row>
       </Card>
     </Spin>
   );
 };
 
 export default APIServerCard;
+
+function Group({ title, children }: Readonly<React.PropsWithChildren<{ title?: React.ReactNode }>>) {
+  return (
+    <Col lg={8} md={24}>
+      <Flex gap={8} justify="flex-start" align="center">
+        <TitleIcon />
+        <Text.NormalLarge>{title}</Text.NormalLarge>
+      </Flex>
+      <Flex vertical align="flex-start" gap={6} style={{ marginTop: 12 }}>
+        {children}
+      </Flex>
+    </Col>
+  )
+}
diff --git a/kraken-app/kraken-app-portal/src/pages/APIServerList/index.tsx b/kraken-app/kraken-app-portal/src/pages/APIServerList/index.tsx
@@ -39,7 +39,7 @@ const APIServerList = () => {
           <Flex
             flexDirection="column"
             alignItems="flex-start"
-            gap={26}
+            gap={16}
             style={{ width: "100%" }}
           >
             {dataList?.data?.map((item: IComponent) => (

diff --git a/...pp/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.module.scss b/...pp/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.module.scss
@@ -11,6 +11,13 @@
   display: flex;
   flex: 1;
 
+  .blank {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .flexOne {
     flex: 1;
   }