Azure · JMach1 · May 28, 2024 · Feb 6, 2024 · Feb 13, 2024 · Feb 20, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -121,6 +121,7 @@
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^5.0.1",
         "rehype-stringify": "^9.0.3",
+        "rehype-truncate": "^1.2.2",
         "remark": "^14.0.3",
         "remark-gfm": "^3.0.1",
         "remark-parse": "^10.0.2",

diff --git a/src/apim.runtime.module.ts b/src/apim.runtime.module.ts
@@ -92,6 +92,7 @@ import { TraceClick } from "./bindingHandlers/traceClick";
 import { GraphqlService } from "./services/graphqlService";
 import { ListOfApisRuntimeModule } from "./components/apis/list-of-apis/listOfApis.runtime.module";
 import { ProductListRuntimeModule } from "./components/products/product-list/productList.runtime.module";
+import { ProductApisRuntimeModule } from "./components/products/product-apis/productApis.runtime.module";
 import { OperationListRuntimeModule } from "./components/operations/operation-list/operationList.runtime.module";
 import { DetailsOfApiRuntimeModule } from "./components/apis/details-of-api/detailsOfApi.runtime.module";
 
@@ -174,6 +175,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindModule(new RoleBasedSecurityRuntimeModule());
         injector.bindModule(new ListOfApisRuntimeModule());
         injector.bindModule(new ProductListRuntimeModule());
+        injector.bindModule(new ProductApisRuntimeModule());
         injector.bindModule(new OperationListRuntimeModule());
         injector.bindModule(new DetailsOfApiRuntimeModule());
 

diff --git a/src/components/apis/list-of-apis/ko/listOfApisViewModelBinder.ts b/src/components/apis/list-of-apis/ko/listOfApisViewModelBinder.ts
@@ -2,13 +2,7 @@ import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
 import { ListOfApisViewModel } from "./listOfApisViewModel";
 import { ListOfApisModel } from "../listOfApisModel";
 import { StyleCompiler } from "@paperbits/common/styles";
-import { TLayout } from "../../../utils/react/TableListInfo";
-
-const layoutsMap = {
-    "tiles": TLayout.cards,
-    "list": TLayout.table,
-    "dropdown": undefined, // TODO
-}
+import { layoutsMap } from "../../../utils/react/TableListInfo";
 
 export class ListOfApisViewModelBinder implements ViewModelBinder<ListOfApisModel, ListOfApisViewModel> {
     constructor(private readonly styleCompiler: StyleCompiler) { }
@@ -22,21 +16,24 @@ export class ListOfApisViewModelBinder implements ViewModelBinder<ListOfApisMode
             allowViewSwitching: state.allowViewSwitching,
             showApiType: state.showApiType,
             defaultGroupByTagToEnabled: state.defaultGroupByTagToEnabled,
-            detailsPageUrl: state.detailsPageUrl,
             layoutDefault: layoutsMap[state.layout],
+            detailsPageUrl: state.detailsPageHyperlink
+                ? state.detailsPageHyperlink.href
+                : undefined,
+            detailsPageTarget: state.detailsPageHyperlink
+                ? state.detailsPageHyperlink.target
+                : undefined,
         }));
     }
 
     public async modelToState(model: ListOfApisModel, state: WidgetState): Promise<void> {
         state.layout = model.layout;
 
-        state.allowSelection = model.allowSelection,
-        state.allowViewSwitching = model.allowViewSwitching,
-        state.showApiType = model.showApiType,
-        state.defaultGroupByTagToEnabled = model.defaultGroupByTagToEnabled,
-        state.detailsPageUrl = model.detailsPageHyperlink
-            ? model.detailsPageHyperlink.href
-            : undefined
+        state.allowSelection = model.allowSelection;
+        state.allowViewSwitching = model.allowViewSwitching;
+        state.showApiType = model.showApiType;
+        state.defaultGroupByTagToEnabled = model.defaultGroupByTagToEnabled;
+        state.detailsPageHyperlink = model.detailsPageHyperlink;
 
         if (model.styles) {
             state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);

diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts b/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts
@@ -39,6 +39,7 @@ export class ApiListDropdown {
     ) {
         this.apis = ko.observableArray([]);
         this.detailsPageUrl = ko.observable();
+        this.detailsPageTarget = ko.observable();
         this.allowSelection = ko.observable(false);
         this.defaultGroupByTagToEnabled = ko.observable(false);
         this.groupByTag = ko.observable(false);
@@ -63,6 +64,9 @@ export class ApiListDropdown {
     @Param()
     public detailsPageUrl: ko.Observable<string>;
 
+    @Param()
+    public detailsPageTarget: ko.Observable<string>;
+
     @Param()
     public defaultGroupByTagToEnabled: ko.Observable<boolean>;
 

diff --git a/src/components/apis/list-of-apis/react/runtime/ApiListRuntime.tsx b/src/components/apis/list-of-apis/react/runtime/ApiListRuntime.tsx
@@ -16,20 +16,28 @@ import { ApisCards } from "./ApisCards";
 import { TApisData } from "./utils";
 
 export interface ApiListProps {
+    productName?: string;
     allowSelection?: boolean;
     allowViewSwitching?: boolean;
     showApiType?: boolean;
     defaultGroupByTagToEnabled?: boolean;
     detailsPageUrl: string;
+    detailsPageTarget: string;
 
     layoutDefault: TLayout | undefined; // TODO remove undefined once finished
 }
 
-const loadApis = async (apiService: ApiService, query: SearchQuery, groupByTags?: boolean) => {
+const loadApis = async (apiService: ApiService, query: SearchQuery, groupByTags?: boolean, productName?: string) => {
     let apis: TApisData;
 
     try {
-        apis = await (groupByTags ? apiService.getApisByTags(query) : apiService.getApis(query));
+        if (productName) {
+            apis = await apiService.getProductApis(`products/${productName}`, query);
+        } else if (groupByTags) {
+            apis = await apiService.getApisByTags(query);
+        } else {
+            apis = await apiService.getApis(query);
+        }
     } catch (error) {
         throw new Error(`Unable to load APIs. Error: ${error.message}`);
     }
@@ -38,7 +46,7 @@ const loadApis = async (apiService: ApiService, query: SearchQuery, groupByTags?
 }
 
 const ApiListRuntimeFC = ({
-    apiService, getReferenceUrl, layoutDefault, showApiType, allowViewSwitching, defaultGroupByTagToEnabled
+    apiService, getReferenceUrl, productName, layoutDefault, showApiType, allowViewSwitching, detailsPageTarget, defaultGroupByTagToEnabled
 }: ApiListProps & { apiService: ApiService, getReferenceUrl: (api: Api) => string }) => {
     const [working, setWorking] = useState(false)
     const [pageNumber, setPageNumber] = useState(1)
@@ -60,10 +68,10 @@ const ApiListRuntimeFC = ({
         };
 
         setWorking(true)
-        loadApis(apiService, query, groupByTag)
+        loadApis(apiService, query, groupByTag, productName)
             .then(apis => setApis(apis))
             .finally(() => setWorking(false))
-    }, [apiService, pageNumber, groupByTag, pattern])
+    }, [apiService, pageNumber, groupByTag, pattern, productName])
 
     return (
         <Stack tokens={{childrenGap: "1rem"}}>
@@ -73,7 +81,7 @@ const ApiListRuntimeFC = ({
                     setLayout={setLayout}
                     pattern={pattern}
                     setPattern={setPattern}
-                    setGroupByTag={setGroupByTag} // don't allow grouping by tags when filtering for product APIs
+                    setGroupByTag={productName ? undefined : setGroupByTag} // don't allow grouping by tags when filtering for product APIs
                     allowViewSwitching={allowViewSwitching}
                     defaultGroupByTagToEnabled={defaultGroupByTagToEnabled}
                 />
@@ -89,9 +97,9 @@ const ApiListRuntimeFC = ({
                 <>
                     <Stack.Item>
                         {layout === TLayout.table ? (
-                            <ApisTable apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} />
+                            <ApisTable apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} detailsPageTarget={detailsPageTarget} />
                         ) : (
-                            <ApisCards apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} />
+                            <ApisCards apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} detailsPageTarget={detailsPageTarget} />
                         )}
                     </Stack.Item>
 

diff --git a/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx b/src/components/apis/list-of-apis/react/runtime/ApisCards.tsx
@@ -4,13 +4,15 @@ import { Api } from "../../../../../models/api";
 import { isApisGrouped, toggleValueInSet, TagGroupToggleBtn, TApisData } from "./utils";
 import { TagGroup } from "../../../../../models/tagGroup";
 import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+import { markdownMaxCharsMap } from "../../../../../constants";
 
 type Props = {
     showApiType: boolean;
     getReferenceUrl: (api: Api) => string;
+    detailsPageTarget: string;
 };
 
-const ApiCard = ({ api, getReferenceUrl, showApiType }: Props & { api: Api }) => {
+const ApiCard = ({ api, getReferenceUrl, showApiType, detailsPageTarget }: Props & { api: Api }) => {
     return (
         <div className={"fui-list-card"}>
             <div style={{ height: "100%" }}>
@@ -22,11 +24,11 @@ const ApiCard = ({ api, getReferenceUrl, showApiType }: Props & { api: Api }) =>
                 )}
                 <Subtitle1>{api.displayName}</Subtitle1>
 
-                <MarkdownProcessor markdownToDisplay={api.description}/>
+                <MarkdownProcessor markdownToDisplay={api.description} maxChars={markdownMaxCharsMap.cards} />
             </div>
 
             <div>
-                <Link href={getReferenceUrl(api)} title={api.displayName}>
+                <Link href={getReferenceUrl(api)} target={detailsPageTarget} title={api.displayName}>
                     <Button appearance={"outline"}>
                         Go to API
                     </Button>
@@ -36,20 +38,19 @@ const ApiCard = ({ api, getReferenceUrl, showApiType }: Props & { api: Api }) =>
     );
 };
 
-const ApisCardsContainer = ({ showApiType, apis, getReferenceUrl }: Props & { apis: Api[] }) => (
+const ApisCardsContainer = ({ apis, ...props }: Props & { apis: Api[] }) => (
     <div className={"fui-list-cards-container"}>
         {apis?.map((api) => (
             <ApiCard
+                {...props}
                 key={api.id}
                 api={api}
-                getReferenceUrl={getReferenceUrl}
-                showApiType={showApiType}
             />
         ))}
     </div>
 );
 
-const ApisGroupedCards = ({ showApiType, tags, getReferenceUrl }: Props & { tags: TagGroup<Api>[] }) => {
+const ApisGroupedCards = ({ tags, ...props }: Props & { tags: TagGroup<Api>[] }) => {
     const [expanded, setExpanded] = React.useState(new Set());
 
     return (
@@ -69,9 +70,8 @@ const ApisGroupedCards = ({ showApiType, tags, getReferenceUrl }: Props & { tags
 
                     {expanded.has(tag) && (
                         <ApisCardsContainer
+                            {...props}
                             apis={items}
-                            getReferenceUrl={getReferenceUrl}
-                            showApiType={showApiType}
                         />
                     )}
                 </div>
@@ -80,17 +80,15 @@ const ApisGroupedCards = ({ showApiType, tags, getReferenceUrl }: Props & { tags
     );
 };
 
-export const ApisCards = ({ showApiType, apis, getReferenceUrl }: Props & { apis: TApisData }) =>
+export const ApisCards = ({ apis, ...props }: Props & { apis: TApisData }) =>
     isApisGrouped(apis) ? (
         <ApisGroupedCards
+            {...props}
             tags={apis.value}
-            getReferenceUrl={getReferenceUrl}
-            showApiType={showApiType}
         />
     ) : (
         <ApisCardsContainer
+            {...props}
             apis={apis.value}
-            getReferenceUrl={getReferenceUrl}
-            showApiType={showApiType}
         />
     );
diff --git a/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx b/src/components/apis/list-of-apis/react/runtime/ApisTable.tsx
@@ -15,34 +15,34 @@ import { Page } from "../../../../../models/page";
 import { TagGroup } from "../../../../../models/tagGroup";
 import { isApisGrouped, toggleValueInSet, TagGroupToggleBtn, TApisData } from "./utils";
 import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+import { markdownMaxCharsMap } from "../../../../../constants";
 
 type Props = {
     showApiType: boolean;
     getReferenceUrl: (api: Api) => string;
+    detailsPageTarget: string;
 };
 
-const TableBodyApis = ({ showApiType, apis, getReferenceUrl }: Props & { apis: Api[] }) => (
+const TableBodyApis = ({ showApiType, apis, getReferenceUrl, detailsPageTarget }: Props & { apis: Api[] }) => (
     <>
         {apis?.map((api) => (
             <TableRow key={api.id}>
                 <TableCell>
-                    <Link href={getReferenceUrl(api)} title={api.displayName}>
+                    <Link href={getReferenceUrl(api)} target={detailsPageTarget} title={api.displayName}>
                         {api.displayName}
                         {!!api.apiVersion && " - " + api.apiVersion}
                     </Link>
                 </TableCell>
-                <TableCell>
-                    <TableCellLayout truncate title={api.description}>
-                        <MarkdownProcessor markdownToDisplay={api.description} />
-                    </TableCellLayout>
+                <TableCell style={{padding: ".5rem 0"}}>
+                    <MarkdownProcessor markdownToDisplay={api.description} maxChars={markdownMaxCharsMap.table} />
                 </TableCell>
                 {showApiType && <TableCell>{api.typeName}</TableCell>}
             </TableRow>
         ))}
     </>
 );
 
-const TableBodyTags = ({ showApiType, tags, getReferenceUrl }: Props & { tags: Page<TagGroup<Api>> }) => {
+const TableBodyTags = ({ tags, ...props }: Props & { tags: Page<TagGroup<Api>> }) => {
     const [expanded, setExpanded] = React.useState(new Set());
 
     return (
@@ -61,14 +61,13 @@ const TableBodyTags = ({ showApiType, tags, getReferenceUrl }: Props & { tags: P
                             <TagGroupToggleBtn expanded={expanded.has(tag)}/>
                         </TableCell>
                         <TableCell></TableCell>
-                        {showApiType && <TableCell></TableCell>}
+                        {props.showApiType && <TableCell></TableCell>}
                     </TableRow>
 
                     {expanded.has(tag) && (
                         <TableBodyApis
+                            {...props}
                             apis={items}
-                            showApiType={showApiType}
-                            getReferenceUrl={getReferenceUrl}
                         />
                     )}
                 </React.Fragment>
@@ -77,7 +76,7 @@ const TableBodyTags = ({ showApiType, tags, getReferenceUrl }: Props & { tags: P
     );
 };
 
-export const ApisTable = ({ showApiType, apis, getReferenceUrl }: Props & { apis: TApisData }) => (
+export const ApisTable = ({ apis, ...props }: Props & { apis: TApisData }) => (
     <div className={"fui-table"}>
         <Table size={"small"} aria-label={"APIs List table"}>
             <TableHeader>
@@ -88,7 +87,7 @@ export const ApisTable = ({ showApiType, apis, getReferenceUrl }: Props & { apis
                     <TableHeaderCell>
                         <Body1Strong>Description</Body1Strong>
                     </TableHeaderCell>
-                    {showApiType && (
+                    {props.showApiType && (
                         <TableHeaderCell style={{ width: "8em" }}>
                             <Body1Strong>Type</Body1Strong>
                         </TableHeaderCell>
@@ -99,15 +98,13 @@ export const ApisTable = ({ showApiType, apis, getReferenceUrl }: Props & { apis
             <TableBody>
                 {isApisGrouped(apis) ? (
                     <TableBodyTags
+                        {...props}
                         tags={apis}
-                        showApiType={showApiType}
-                        getReferenceUrl={getReferenceUrl}
                     />
                 ) : (
                     <TableBodyApis
+                        {...props}
                         apis={apis.value}
-                        showApiType={showApiType}
-                        getReferenceUrl={getReferenceUrl}
                     />
                 )}
             </TableBody>

diff --git a/src/components/products/product-apis/ko/productApis.html b/src/components/products/product-apis/ko/productApis.html
@@ -1,7 +1 @@
-<!-- ko if: layout() === 'list' -->
-<product-apis-runtime data-bind="attr: { params: runtimeConfig }"></product-apis-runtime>
-<!-- /ko -->
-
-<!-- ko if: layout() === 'tiles' -->
-<product-apis-tiles-runtime data-bind="attr: { params: runtimeConfig }"></product-apis-tiles-runtime>
-<!-- /ko -->
+<fui-product-apis-runtime data-bind="attr: { props: runtimeConfig }"></fui-product-apis-runtime>