fix(portal): fix api mapping tutorial component

kraken-app/kraken-app-portal/src/components/Header/index.tsx

@@ -5,49 +5,26 @@ import {
   Dropdown,
   Flex,
   Tag,
-  Tooltip,
 } from "antd";
 import styles from "./index.module.scss";
 import Logo from "@/assets/logo.svg";
 import {
-  CloseOutlined,
   EditTwoTone,
   LogoutOutlined,
   QuestionCircleOutlined,
 } from "@ant-design/icons";
 import { useTutorialStore } from "@/stores/tutorial.store";
 import { useUser } from "@/hooks/user/useUser";
 import { Text } from "../Text";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { UserAvatar } from "./UserAvatar";
 import { ISystemInfo } from "@/utils/types/user.type";
 import UpgradingIcon from '@/assets/icon/upgrading.svg'
 
-const TooltipBody = (setTutorialCompleted: (value: boolean) => void) => (
-  <div className={styles.tooltip}>
-    <Flex justify="space-between">
-      <span>Open the guide here.</span>
-      <CloseOutlined
-        style={{ fontSize: 12 }}
-        onClick={() => setTutorialCompleted(false)}
-      />
-    </Flex>
-    <Flex justify="end">
-      <Button
-        onClick={() => {
-          setTutorialCompleted(false);
-        }}
-      >
-        Got it
-      </Button>
-    </Flex>
-  </div>
-);
-
 const Header = ({ info }: Readonly<{ info?: ISystemInfo }>) => {
+  const location = useLocation()
   const { currentUser } = useUser();
-  const { tutorialCompleted, setTutorialCompleted, setOpenTutorial } =
-    useTutorialStore();
+  const { toggleTutorial } = useTutorialStore();
   const navigate = useNavigate();
 
   const handleLogout = () => {
@@ -113,20 +90,16 @@ const Header = ({ info }: Readonly<{ info?: ISystemInfo }>) => {
               <UpgradingIcon />
               Mapping template upgrading
             </Link>
-            <Divider type="vertical" style={{ height: 16, padding: 0}} />
+            <Divider type="vertical" style={{ height: 16, padding: 0 }} />
           </>
         )}
 
-        <Tooltip
-          align={{ offset: [12, 15] }}
-          overlayInnerStyle={{ zIndex: 1 }}
-          placement="bottomLeft"
-          open={tutorialCompleted || undefined}
-          title={TooltipBody(setTutorialCompleted)}
-          rootClassName={styles.tooltipBlue}
-        >
-          <QuestionCircleOutlined onClick={() => setOpenTutorial(true)} />
-        </Tooltip>
+        {/^\/api-mapping/.test(location.pathname) && (
+          <Button
+            type="link"
+            style={{ color: 'var(--text)', padding: '0 4px' }}
+            onClick={toggleTutorial}><QuestionCircleOutlined /></Button>
+        )}
 
         <Dropdown
           placement="bottomRight"

kraken-app/kraken-app-portal/src/pages/APIServerList/components/APIServerCard.tsx

@@ -86,27 +86,27 @@ const APIServerCard = ({ item, refetchList }: Props) => {
         style={{ borderRadius: 4, width: "100%" }}
         title={
           <Flex justify="space-between" gap={12} align="center">
-            <Flex gap={8}>
+            <Flex gap={8} align="center">
               <Text.NormalLarge>
                 {get(item, "metadata.name", "")}
               </Text.NormalLarge>
-              <div onMouseEnter={trueHover} onMouseLeave={falseHover}>
+              <Flex onMouseEnter={trueHover} onMouseLeave={falseHover}>
                 {isHover && isApiInUse ? (
                   <Button
-                    style={{ padding: "0px" }}
+                    style={{ padding: "5px 0" }}
                     type="link"
                     onClick={() => setOpenMappingDrawer(true)}
                   >
                     Check details
                   </Button>
                 ) : (
-                  <Tag color={isApiInUse ? "blue" : ""} >
+                  <Tag color={isApiInUse ? "blue" : ""}>
                     <Text.LightSmall>
                       {isApiInUse ? "In use" : "Not in use"}
                     </Text.LightSmall>
                   </Tag>
                 )}
-              </div>
+              </Flex>
             </Flex>
             <Flex>
               <Button type="link" onClick={handleEdit}>

kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.tsx

@@ -148,7 +148,7 @@ const EnvironmentActivityLog = () => {
       key: "name",
       title: "Path",
       width: 300,
-      render: (log: IActivityLog) => <TrimmedPath path={log.path} />,
+      render: (log: IActivityLog) => <Flex><TrimmedPath path={log.path} /></Flex>,
     },
     {
       key: "buyerName",

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/HeaderMapping/index.module.scss

@@ -9,7 +9,7 @@
 }
 .sellerAPIBasicInfoWrapper {
   flex: 0 0 calc(50% - 30px);
-  width: calc(50% - 30px);
+  width: calc(50% - 30px) !important;
   box-sizing: border-box;
   padding: 18px 20px;
   border-radius: 6px;

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/index.tsx

@@ -435,6 +435,7 @@ const NewAPIMapping = ({
 
   return (
     <Flex className={styles.container}>
+      {/* User guide */}
       <StepBar
         type={EStep.MAPPING}
         currentStep={step}

kraken-app/kraken-app-portal/src/stores/tutorial.store.tsx

@@ -6,6 +6,7 @@ type TutorialStore = {
   openTutorial?: boolean
   setTutorialCompleted: (value: boolean) => void;
   setOpenTutorial: (value: boolean) => void;
+  toggleTutorial(): void
   reset: () => void;
 };
 
@@ -22,4 +23,5 @@ export const useTutorialStore = create<TutorialStore>()((set) => ({
   },
   setOpenTutorial: (openTutorial) => set({ openTutorial }),
   reset: () => set(defaultData),
+  toggleTutorial: () => set(state => ({ openTutorial: !state.openTutorial }))
 }));