Skip to content

Commit

Permalink
fix(portal): common api path display
Browse files Browse the repository at this point in the history
  • Loading branch information
@james-tran-3005
james-tran-3005 committed Nov 19, 2024
1 parent 0d90a09 commit 706dd68
Show file tree
Hide file tree
Showing 18 changed files with 307 additions and 283 deletions.
47 changes: 47 additions & 0 deletions kraken-app/kraken-app-portal/src/__test__/pages/Deployment/DeploymentHistory.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,51 @@ describe("Deployment > Deployment history tests", () => {

expect(getByText("No deploy history")).toBeInTheDocument();
});

it('should render deploy history', () => {
vi.spyOn(hooks, 'useGetAPIDeployments').mockReturnValue({
data: {
data: [
{
"targetMapperKey": "mef.sonata.api-target-mapper.order.eline.read.delete",
"path": "/mefApi/sonata/productOrderingManagement/v10/productOrder/{id}",
"method": "get",
"requiredMapping": true,
"diffWithStage": true,
"productType": "access_e_line",
"actionType": "delete",
"mappingMatrix": {
"productType": "access_e_line",
"actionType": "delete"
},
"componentName": "Product Ordering Management",
"componentKey": "mef.sonata.api.order",
"envId": "7da9098b-107f-402c-9d6d-20b1be96b99a",
"envName": "production",
"createAt": "2024-11-18T10:06:14.412978Z",
"createBy": "24044233-3683-425e-9cbe-62e643f081d8",
"userName": "Michael Qian",
"releaseKey": "mef.sonata.product-release.1731924374407",
"releaseId": "e22cc3e6-ea2c-4aa2-899b-f04870f310d3",
"tagId": "92c48cf5-0fbe-4418-9c45-737f4dc782d6",
"version": "1.4",
"status": "SUCCESS",
"verifiedBy": "24044233-3683-425e-9cbe-62e643f081d8",
"verifiedAt": "2024-11-18 10:06:11",
"verifiedStatus": true,
"productionEnable": false
}
],
total: 1,
page: 0,
size: 10,
},
isLoading: false,
isFetching: false,
isFetched: true,
} as any)

const { getByText } = render(<DeployHistory selectedEnv={{ id: 'abc', name: 'stage' } as any} />)
expect(getByText('API mapping')).toBeInTheDocument()
})
});
84 changes: 15 additions & 69 deletions kraken-app/kraken-app-portal/src/__test__/pages/EnvironmentOverview/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { render } from "@testing-library/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/utils/helpers/reactQuery";
import { BrowserRouter } from "react-router-dom";
import EnvironmentOverview from "@/pages/EnvironmentOverview";
import * as productHooks from "@/hooks/product";
import { fireEvent, render, waitFor } from "@/__test__/utils";

const ResizeObserverMock = vi.fn(() => ({
observe: vi.fn(),
Expand All @@ -14,20 +11,7 @@ const ResizeObserverMock = vi.fn(() => ({
// Stub the global ResizeObserver
vi.stubGlobal('ResizeObserver', ResizeObserverMock);



test("EnvironmentOverview page", () => {
const { container } = render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<EnvironmentOverview />
</BrowserRouter>
</QueryClientProvider>
);
expect(container).toBeInTheDocument();
});

describe(" EnvironmentOverview component list", () => {
describe(" Environment Overview component list", () => {
beforeAll(() => {
vi.spyOn(productHooks, "useGetProductEnvs").mockReturnValue({
data: {
Expand Down Expand Up @@ -77,62 +61,24 @@ describe(" EnvironmentOverview component list", () => {
} as any);
});

it("running components list", () => {
const { getByText } = render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<EnvironmentOverview />
</BrowserRouter>
</QueryClientProvider>
it("running components list", async () => {
const { getByText, getAllByRole } = render(
<EnvironmentOverview />
);
const ele = getByText("production Environment");
expect(ele).toBeInTheDocument();
});
});

describe(" EnvironmentOverview component list stage", () => {
beforeAll(() => {
vi.spyOn(productHooks, "useGetProductEnvs").mockReturnValue({
data: {
data: [
{
id: "32b4832f-fb2f-4c99-b89a-c5c995b18dfc",
productId: "mef.sonata",
createdAt: "2024-05-30T13:02:03.224486Z",
name: "stage",
},
],
},
isLoading: false,
} as any);
vi.spyOn(productHooks, "useGetRunningAPIList").mockReturnValue({
data: [
{
id: "32b4832f-fb2f-4c99-b89a-c5c995b18dfc",
createdAt: "2024-06-18T02:00:06.730627Z",
name: "stage",
status: "IN_PROCESS",
version: "1.0",
key: "mef.sonata.api.quote",
componentName: "testname",
},
],
isLoading: false,
} as any);
});
const tabs = getAllByRole('radio')

afterAll(() => {
vi.clearAllMocks();
});
expect(tabs).toHaveLength(2)
expect(tabs[0].parentNode?.parentNode).toHaveTextContent('Running API mappings')
expect(tabs[1].parentNode?.parentNode).toHaveTextContent('Deployment history')

it("running components list", () => {
const { container } = render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<EnvironmentOverview />
</BrowserRouter>
</QueryClientProvider>
);
expect(container).toBeInTheDocument();
// Should default open running api mapping tab
await waitFor(() => expect(getByText('Component')).toBeInTheDocument())

// Open deployment history tab
fireEvent.click(tabs[1])
await waitFor(() => expect(getByText('API mapping')).toBeInTheDocument())
});
});
60 changes: 48 additions & 12 deletions kraken-app/kraken-app-portal/src/__test__/pages/NewAPIMapping/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { render, renderHook } from "@testing-library/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/utils/helpers/reactQuery";
import { BrowserRouter } from "react-router-dom";
import NewAPIMapping from "@/pages/NewAPIMapping";
import { useNewApiMappingStore } from "@/stores/newApiMapping.store";
import * as newApiMappingHooks from "@/stores/newApiMapping.store";
import { render, renderHook } from "@/__test__/utils";
import HeaderMapping from "@/pages/NewAPIMapping/components/HeaderMapping"

beforeEach(() => {
vi.clearAllMocks()
})

beforeAll(() => {
const { result } = renderHook(() => useNewApiMappingStore());
const { result } = renderHook(() => newApiMappingHooks.useNewApiMappingStore());
result.current.setResponseMapping([
{
name: "mapper.quote.uni.add.state",
Expand Down Expand Up @@ -110,12 +112,46 @@ beforeAll(() => {

test("NewAPIMapping page", () => {
const { container } = render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<NewAPIMapping isRequiredMapping={true} />
<NewAPIMapping isRequiredMapping={false} />
</BrowserRouter>
</QueryClientProvider>
<>
<NewAPIMapping isRequiredMapping={true} />
<NewAPIMapping isRequiredMapping={false} />
</>
);
expect(container).toBeInTheDocument();
});

describe('api mapping components tests', () => {
it('should render mapping header component', () => {
const setRightSide = vi.fn()
const setRequestMapping = vi.fn()
const setSellerApi = vi.fn()
const setServerKey = vi.fn()
const setListMappingStateResponse = vi.fn()

vi.spyOn(newApiMappingHooks, 'useNewApiMappingStore').mockReturnValue({
sellerApi: {
method: 'GET',
url: 'seller/a/b/c/d',

},
query: JSON.stringify({
method: 'POST',
path: 'query/path',
}),
rightSide: 0,
setRightSide,
setRequestMapping,
setSellerApi,
setServerKey,
setListMappingStateResponse
})

const { getByTestId } = render(<HeaderMapping mappers={{
request: [],
response: []
}} />)

expect(getByTestId('sonataApi')).toHaveTextContent('Sonata API')
expect(getByTestId('sellerApi')).toHaveTextContent('Seller API')
})
})
122 changes: 54 additions & 68 deletions kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { useAppStore } from "@/stores/app.store";
import { IUnifiedAsset } from "@/utils/types/common.type";
import { IComponent } from "@/utils/types/component.type";
import { CloseOutlined } from "@ant-design/icons";
import { Flex, Drawer, Spin, Table, Button, Tooltip } from "antd";
import { Flex, Drawer, Spin, Table, Tooltip } from "antd";
import { omit, startCase } from "lodash";
import { useMemo } from "react";
import { useNavigate } from "react-router-dom";
import MappingMatrix from "../MappingMatrix";
import RequestMethod from "../Method";
import { Text } from "../Text";
import TrimmedPath from "../TrimmedPath";
import styles from "./index.module.scss";
import { ApiCard } from "../ApiMapping";

type Props = {
isOpen: boolean;
Expand Down Expand Up @@ -46,42 +46,29 @@ const APIServerDrawer = ({ item, isOpen, onClose }: Props) => {
{
title: "Endpoint",
dataIndex: "facets",
width: "50%",
width: 400,
render: (facets: Record<string, any>) => (
<Flex justify="start">
<RequestMethod method={facets.endpoints[0]?.method} />
<TrimmedPath path={facets.endpoints[0]?.path} trimLevel={8} />
<TrimmedPath path={facets.endpoints[0]?.path} />
</Flex>
),
},
{
title: "Mapping use case",
width: 400,
render: (item: Record<string, any>) => {
const linkKey = findLinkedComponent(item.metadata.key);
return (
<Flex justify="start" align="center">
<RequestMethod method={item.facets.trigger?.method} />

<Tooltip title={linkKey ? null : "This use case does not exist."}>
<Button
role="none"
type="link"
onClick={() =>
linkKey ? navigate(`/api-mapping/${linkKey}`) : null
}
>
<TrimmedPath
path={item.facets.trigger.path}
trimLevel={2}
color={linkKey ? "#2962FF" : "rgba(0,0,0,0.45)"}
/>
</Button>
</Tooltip>

<MappingMatrix
mappingMatrix={omit(item.facets.trigger, ["method", "path"])}
/>
</Flex>
<Tooltip title={linkKey ? null : "This use case does not exist."}>
<ApiCard
apiInstance={{
method: item.facets.trigger.method,
path: item.facets.trigger.path,
mappingMatrix: omit(item.facets.trigger, ["method", "path"])
} as any}
onClick={() => linkKey && navigate(`/api-mapping/${linkKey}`)} />
</Tooltip>
);
},
},
Expand All @@ -104,48 +91,47 @@ const APIServerDrawer = ({ item, isOpen, onClose }: Props) => {
>
<Spin spinning={isLoading}>
<div className={styles.wrapper}>
<Flex align="flex-start" vertical gap={12}>
<Flex
vertical
gap={30}
align="flex-start"
className={styles.fullWidth}
>
{componentDetail &&
Object.keys(componentDetail.endpointUsage).map((key, index) => (
<Flex
key={`${key}-${index}`}
vertical
className={styles.fullWidth}
gap={20}
>
<Flex gap={12} justify="flex-start" align="center">
<TitleIcon />
<Text.NormalLarge>
Endpoints used in {startCase(key)}
</Text.NormalLarge>
</Flex>
{componentDetail.endpointUsage[
key as keyof typeof componentDetail.endpointUsage
].length > 0 ? (
<Table
columns={columns}
rowKey='id'
dataSource={
componentDetail.endpointUsage[
key as keyof typeof componentDetail.endpointUsage
]
}
pagination={false}
/>
) : (
<Text.LightMedium style={{ color: "rgba(0,0,0,0.45)" }}>
No any endpoints used
</Text.LightMedium>
)}
<Flex
vertical
gap={30}
align="flex-start"
className={styles.fullWidth}
>
{componentDetail &&
Object.keys(componentDetail.endpointUsage).map((key, index) => (
<Flex
key={`${key}-${index}`}
vertical
className={styles.fullWidth}
gap={20}
>
<Flex gap={12} justify="flex-start" align="center">
<TitleIcon />
<Text.NormalLarge>
Endpoints used in {startCase(key)}
</Text.NormalLarge>
</Flex>
))}
</Flex>
{componentDetail.endpointUsage[
key as keyof typeof componentDetail.endpointUsage
].length > 0 ? (
<Table
columns={columns}
rowKey='id'
tableLayout="fixed"
dataSource={
componentDetail.endpointUsage[
key as keyof typeof componentDetail.endpointUsage
]
}
pagination={false}
/>
) : (
<Text.LightMedium style={{ color: "rgba(0,0,0,0.45)" }}>
No any endpoints used
</Text.LightMedium>
)}
</Flex>
))}
</Flex>
</div>
</Spin>
Expand Down
Loading

0 comments on commit 706dd68

Please sign in to comment.