diff --git a/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx b/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx
index 10227bda3..b5b928f0d 100644
--- a/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx
+++ b/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx
@@ -1,10 +1,8 @@
import * as React from "react";
import { useState } from "react";
-import { Stack } from "@fluentui/react";
+import { ApiCard } from "@microsoft/api-docs-ui";
import { Api } from "../../../../../models/api";
import { TagGroup } from "../../../../../models/tagGroup";
-import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
-import { markdownMaxCharsMap } from "../../../../../constants";
import { isApisGrouped, toggleValueInSet, TagGroupToggleBtn, TApisData } from "./utils";
type Props = {
@@ -13,36 +11,6 @@ type Props = {
detailsPageTarget: string;
};
-const ApiCard = ({ api, getReferenceUrl, showApiType, detailsPageTarget }: Props & { api: Api }) => {
- return (
-
-
- {showApiType && (
-
- API
- {api.typeName}
-
- )}
-
{api.displayName}
-
-
-
-
-
-
- Go to API
-
-
-
- );
-};
-
const ApisCardsContainer = ({ apis, ...props }: Props & { apis: Api[] }) => (
<>
{apis?.length > 0
diff --git a/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx b/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx
index 9fd76d4e0..d2ebc0d07 100644
--- a/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx
+++ b/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx
@@ -1,19 +1,11 @@
import * as React from "react";
import { useState } from "react";
-import {
- Table,
- TableBody,
- TableCell,
- TableHeader,
- TableHeaderCell,
- TableRow,
-} from "@fluentui/react-components";
+import { TableCell, TableRow } from "@fluentui/react-components";
+import { InfoTable, MarkdownRenderer } from "@microsoft/api-docs-ui";
import { Api } from "../../../../../models/api";
import { Page } from "../../../../../models/page";
import { TagGroup } from "../../../../../models/tagGroup";
-import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
import { NoRecordsRow } from "../../../../utils/react/NoRecordsRow";
-import { ScrollableTableContainer } from "../../../../utils/react/ScrollableTableContainer";
import { markdownMaxCharsMap } from "../../../../../constants";
import {
isApisGrouped,
@@ -40,7 +32,7 @@ const TableBodyApis = ({ showApiType, apis, getReferenceUrl, detailsPageTarget }
-
+
{showApiType &&
{api.typeName}}
@@ -88,38 +80,23 @@ const TableBodyTags = ({ tags, ...props }: Props & { tags: Page
> }
);
};
-export const ApisTable = ({ apis, ...props }: Props & { apis: TApisData }) => (
-
-
-
-
-
- Name
-
-
- Description
-
- {props.showApiType && (
-
- Type
-
- )}
-
-
+export const ApisTable = ({ apis, ...props }: Props & { apis: TApisData }) => {
+ const tableColumns = ["Name", "Description"];
+ props.showApiType && tableColumns.push("Type");
-
- {isApisGrouped(apis) ? (
-
+ return (
+
) : (
-
- )}
-
-
-
-);
+
+ )
+ }
+ noDataMessage="No APIs to display"
+ />
+ );
+}
diff --git a/src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx b/src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx
index 45f7fcb36..5e6e873b3 100644
--- a/src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx
+++ b/src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx
@@ -1,7 +1,5 @@
import * as React from "react";
import { useCallback, useEffect, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
import Editor, { Monaco } from '@monaco-editor/react';
import { ISettingsProvider } from "@paperbits/common/configuration";
import { SessionManager } from "@paperbits/common/persistence/sessionManager";
@@ -36,6 +34,7 @@ import {
truncateBreadcrumbLongName
} from "@fluentui/react-components";
import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { MarkdownRenderer, SyntaxHighlighter } from "@microsoft/api-docs-ui";
import { RouteHelper } from "../../../../../routing/routeHelper";
import { Api } from "../../../../../models/api";
import { ConsoleHeader } from "../../../../../models/console/consoleHeader";
@@ -49,7 +48,6 @@ import { ProductService } from "../../../../../services/productService";
import { UsersService } from "../../../../../services/usersService";
import { GraphqlService, TGraphqlTypes } from "../../../../../services/graphqlService";
import { GqlWsMessageType, GraphqlProtocols, graphqlSubProtocol, GraphqlTypes } from "../../../../../constants";
-import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
import { Utils } from "../../../../../utils";
import { ConsoleAuthorization } from "./operation-console/ConsoleAuthorization";
import { ConsoleHeaders } from "./operation-console/ConsoleHeaders";
@@ -702,8 +700,8 @@ export const OperationConsoleGql = ({
}
{selectedTab === ConsoleTab.response &&
(requestError
- ?
- : response &&
+ ?
+ : response &&
)
}
{selectedTab === ConsoleTab.wsconsole &&
diff --git a/src/components/operations/operation-details/react/runtime/OperationDetails.tsx b/src/components/operations/operation-details/react/runtime/OperationDetails.tsx
index caa8841c6..087d9ddfe 100644
--- a/src/components/operations/operation-details/react/runtime/OperationDetails.tsx
+++ b/src/components/operations/operation-details/react/runtime/OperationDetails.tsx
@@ -4,19 +4,9 @@ import { ISettingsProvider } from "@paperbits/common/configuration";
import { SessionManager } from "@paperbits/common/persistence/sessionManager";
import { HttpClient } from "@paperbits/common/http/httpClient";
import { Stack } from "@fluentui/react";
-import {
- Badge,
- Button,
- Spinner,
- Table,
- TableBody,
- TableCell,
- TableHeader,
- TableHeaderCell,
- TableRow,
- Tooltip,
-} from "@fluentui/react-components";
+import { Badge, Button, Spinner, TableCell, TableRow, Tooltip } from "@fluentui/react-components";
import { Copy16Regular } from "@fluentui/react-icons";
+import { InfoPanel, InfoTable, MarkdownRenderer } from "@microsoft/api-docs-ui";
import { RouteHelper } from "../../../../../routing/routeHelper";
import { ApiService } from "../../../../../services/apiService";
import { UsersService } from "../../../../../services/usersService";
@@ -36,8 +26,6 @@ import {
TypeDefinitionPropertyTypePrimitive,
TypeDefinitionPropertyTypeReference,
} from "../../../../../models/typeDefinition";
-import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
-import { ScrollableTableContainer } from "../../../../utils/react/ScrollableTableContainer";
import { OperationDetailsRuntimeProps } from "./OperationDetailsRuntime";
import {
OperationRepresentation,
@@ -346,11 +334,7 @@ export const OperationDetails = ({
{operation.displayName}
{operation.description && (
-
-
-
+
)}
-
-
- Endpoint:
- {tags.length > 0 && (
+ 0 && (
))}
- )}
-
-
-
-
+ )
+ }
+ children={
+
+
{operation.method}
@@ -421,8 +402,8 @@ export const OperationDetails = ({
/>
-
-
+ }
+ />
{enableConsole && (