Add service template history view to the ISV view

src/components/content/catalog/services/details/ServiceProvider.tsx

@@ -32,6 +32,8 @@ import UnpublishService from '../unpublish/UnpublishService.tsx';
 import UpdateService from '../update/UpdateService';
 import { ServiceProviderSkeleton } from './ServiceProviderSkeleton';
 import ServiceTemplateDetails from './serviceTemplateDetails';
+import HistoryService from "../history/HistoryService";
+
 function ServiceProvider({
     categoryOclData,
     selectedServiceNameInTree,
@@ -197,6 +199,7 @@ function ServiceProvider({
                                     serviceDetail={activeServiceDetail}
                                     setIsViewDisabled={setIsViewDisabled}
                                 />
+                                <HistoryService serviceDetail={activeServiceDetail} />
                             </div>
                             <ServiceTemplateDetails
                                 isViewDisabled={isViewDisabled}

src/components/content/catalog/services/history/HistoryService.tsx

@@ -0,0 +1,61 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { Button, Modal } from 'antd';
+import React, { useState } from 'react';
+import catalogStyles from '../../../../../styles/catalog.module.css';
+import { ServiceTemplateDetailVo, ServiceTemplateRequestHistory } from '../../../../../xpanse-api/generated';
+import useServiceTemplateHistoryQuery from './useServiceTemplateHistoryQuery';
+import ServiceTemplateHistory from "./ServiceTemplateHistory";
+
+function historyService({ serviceDetail }: { serviceDetail: ServiceTemplateDetailVo }): React.JSX.Element {
+    const serviceTemplateHistoryQuery = useServiceTemplateHistoryQuery(serviceDetail.serviceTemplateId);
+    const [isServiceTemplateHistoryModalOpen, setIsServiceTemplateHistoryModalOpen] = useState(false);
+
+    let serviceTemplateRequestHistoryList: ServiceTemplateRequestHistory[] = [];
+    if (serviceTemplateHistoryQuery.isSuccess) {
+        serviceTemplateRequestHistoryList = serviceTemplateHistoryQuery.data;
+    }
+
+    const handleServiceTemplateHistoryOpenModal = () => {
+        setIsServiceTemplateHistoryModalOpen(true);
+    };
+
+    const handleServiceTemplateHistoryModalClose = () => {
+        setIsServiceTemplateHistoryModalOpen(false);
+    };
+
+    return (
+        <div>
+            {isServiceTemplateHistoryModalOpen && serviceTemplateRequestHistoryList.length > 0 ? (
+                    <Modal
+                        title={'Service Template History'}
+                        width={1600}
+                        footer={null}
+                        open={isServiceTemplateHistoryModalOpen}
+                        onCancel={handleServiceTemplateHistoryModalClose}
+                    >
+                        <ServiceTemplateHistory data={serviceTemplateRequestHistoryList}/>
+                    </Modal>
+                ) : null
+            }
+            {serviceTemplateHistoryQuery.isSuccess && serviceTemplateHistoryQuery.data.length > 0 ? (
+                <Button
+                    icon={<CloseCircleOutlined />}
+                    type='primary'
+                    onClick={() => {
+                        handleServiceTemplateHistoryOpenModal();
+                    }}
+                    className={catalogStyles.catalogManageBtnClass}
+                >
+                    History
+                </Button>
+            ) : null}
+        </div>
+    );
+}
+
+export default historyService;

src/components/content/catalog/services/history/ServiceTemplateHistory.tsx

@@ -0,0 +1,121 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Button, Modal, Table, Tag } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import React, { useState } from 'react';
+import { ServiceTemplateRequestHistory } from '../../../../../xpanse-api/generated';
+import ServiceTemplateRequested from './ServiceTemplateRequested';
+
+function serviceTemplateHistory({ data }: { data: ServiceTemplateRequestHistory[] }): React.JSX.Element {
+    const [isRequestedServiceTemplateQuery, setIsRequestedServiceTemplateQuery] = useState<boolean>(false);
+    const [serviceTemplateRequestId, setServiceTemplateRequestHistoryId] = useState('');
+
+    const columns: ColumnsType<ServiceTemplateRequestHistory> = [
+        {
+            title: 'RequestId',
+            dataIndex: 'requestId',
+            align: 'center',
+        },
+        {
+            title: 'RequestType',
+            dataIndex: 'requestType',
+            align: 'center',
+            render: (_text, record) => {
+                if (record.requestType === 'register') {
+                    return <Tag color='default'>{record.requestType}</Tag>;
+                } else if (record.requestType === 'republish') {
+                    return <Tag color='success'>{record.requestType}</Tag>;
+                } else if (record.requestType === 'unpublish') {
+                    return <Tag color='error'>{record.requestType}</Tag>;
+                } else {
+                    return <Tag color='processing'>{record.requestType}</Tag>;
+                }
+            },
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            align: 'center',
+            render: (_text, record) => {
+                if (record.status === 'in-review') {
+                    return <Tag color='processing'>{record.status}</Tag>;
+                } else if (record.status === 'accepted') {
+                    return <Tag color='success'>{record.status}</Tag>;
+                } else if (record.status === 'rejected') {
+                    return <Tag color='error'>{record.status}</Tag>;
+                } else {
+                    return <Tag color='default'>{record.status}</Tag>;
+                }
+            },
+        },
+        {
+            title: 'ReviewComment',
+            dataIndex: 'reviewComment',
+            align: 'center',
+        },
+        {
+            title: 'CreateTime',
+            dataIndex: 'createTime',
+            align: 'center',
+        },
+        {
+            title: 'LastModifiedTime',
+            dataIndex: 'lastModifiedTime',
+            align: 'center',
+        },
+        {
+            title: 'Operation',
+            dataIndex: 'operation',
+            render: (_text: string, record) => {
+                return (
+                    <>
+                        <Button
+                            type='primary'
+                            icon={<InfoCircleOutlined />}
+                            onClick={() => {
+                                handleRequestedServiceTemplateOpenModal(record);
+                            }}
+                        >
+                            template request
+                        </Button>
+                    </>
+                );
+            },
+            align: 'center',
+        },
+    ];
+
+    const handleRequestedServiceTemplateOpenModal = (record: ServiceTemplateRequestHistory) => {
+        setIsRequestedServiceTemplateQuery(true);
+        setServiceTemplateRequestHistoryId(record.requestId);
+    };
+
+    const handleRequestedServiceTemplateModalClose = () => {
+        setIsRequestedServiceTemplateQuery(false);
+        setServiceTemplateRequestHistoryId('');
+    };
+
+    return (
+        <div>
+            {isRequestedServiceTemplateQuery && serviceTemplateRequestId ? (
+                <Modal
+                    title={'Requested Service Template'}
+                    width={1600}
+                    footer={null}
+                    open={isRequestedServiceTemplateQuery}
+                    onCancel={handleRequestedServiceTemplateModalClose}
+                >
+                    <ServiceTemplateRequested requestId={serviceTemplateRequestId} />
+                </Modal>
+            ) : null}
+
+            <Table columns={columns} dataSource={data} rowKey={'id'} />
+        </div>
+    );
+}
+
+export default serviceTemplateHistory;

src/components/content/catalog/services/history/ServiceTemplateRequested.tsx

@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Alert, Skeleton } from 'antd';
+import React from 'react';
+import DisplayOclData from '../../../common/ocl/DisplayOclData';
+import useRequestedServiceTemplateQuery from './useRequestedServiceTemplateQuery';
+
+function serviceTemplateRequested({ requestId }: { requestId: string }): React.JSX.Element {
+    const requestedServiceTemplateQuery = useRequestedServiceTemplateQuery(requestId);
+
+    return (
+        <div>
+            {requestedServiceTemplateQuery.isLoading ? (
+                <Skeleton active />
+            ) : requestedServiceTemplateQuery.isSuccess ? (
+                <DisplayOclData ocl={requestedServiceTemplateQuery.data} />
+            ) : requestedServiceTemplateQuery.isError ? (
+                <Alert
+                    message='Error'
+                    description={requestedServiceTemplateQuery.error.message}
+                    type='error'
+                    showIcon
+                    closable
+                />
+            ) : null}
+        </div>
+    );
+}
+
+export default serviceTemplateRequested;

src/components/content/catalog/services/history/useRequestedServiceTemplateQuery.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import {
+    getRequestedServiceTemplateByRequestId,
+    GetRequestedServiceTemplateByRequestIdData,
+} from '../../../../../xpanse-api/generated';
+
+export default function useRequestedServiceTemplateQuery(requestId: string) {
+    return useQuery({
+        queryKey: ['getRequestedServiceTemplateByRequestId', requestId],
+        queryFn: () => {
+            const data: GetRequestedServiceTemplateByRequestIdData = {
+                requestId: requestId,
+            };
+            return getRequestedServiceTemplateByRequestId(data);
+        },
+        refetchOnWindowFocus: false,
+    });
+}

src/components/content/catalog/services/history/useServiceTemplateHistoryQuery.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import {useQuery} from '@tanstack/react-query';
+import {
+    getServiceTemplateRequestHistoryByServiceTemplateId,
+    GetServiceTemplateRequestHistoryByServiceTemplateIdData
+} from '../../../../../xpanse-api/generated';
+
+export default function useServiceTemplateHistoryQuery(serviceTemplateId: string) {
+    return useQuery({
+        queryKey: ['getServiceTemplateRequestHistoryByServiceTemplateId', serviceTemplateId],
+        queryFn: () => {
+            const data: GetServiceTemplateRequestHistoryByServiceTemplateIdData = {
+                serviceTemplateId: serviceTemplateId,
+            };
+            return getServiceTemplateRequestHistoryByServiceTemplateId(data);
+        },
+        refetchOnWindowFocus: false,
+    });
+}