FUI - APIs list

package.json

@@ -85,7 +85,7 @@
         "@paperbits/common": "0.1.593-hotfix2",
         "@paperbits/core": "0.1.593-hotfix2",
         "@paperbits/forms": "0.1.593-hotfix2",
-        "@paperbits/react": "^1.0.8",
+        "@paperbits/react": "1.0.8",
         "@paperbits/styles": "0.1.593-hotfix2",
         "@webcomponents/custom-elements": "1.6.0",
         "@webcomponents/shadydom": "^1.11.0",

src/apim.design.module.ts

@@ -1,7 +1,7 @@
+import { ReactModule } from "@paperbits/react/react.module";
 import * as Constants from "./constants";
 import "./bindingHandlers/codeEditor";
 import "./bindingHandlers/copyToClipboard";
-import { ReactModule } from "@paperbits/react/react.module";
 import { UnsavedChangesRouteGuard } from "./routing/unsavedChangesRouteGuard";
 import { MapiObjectStorage, MapiBlobStorage } from "./persistence";
 import { DefaultAuthenticator } from "./components/defaultAuthenticator";
@@ -51,7 +51,6 @@ import { CustomHtmlDesignModule } from "./components/custom-html/customHtml.desi
 import { CustomWidgetDesignModule } from "./components/custom-widget/customWidget.design.module";
 import { CodeEditor } from "./components/code-editor/code-editor";
 
-
 export class ApimDesignModule implements IInjectorModule {
     public register(injector: IInjector): void {
         injector.bindModule(new SetupModule());

src/apim.runtime.module.ts

@@ -89,9 +89,10 @@ import { TagService } from "./services/tagService";
 import { TenantService } from "./services/tenantService";
 import { UsersService } from "./services/usersService";
 import { TraceClick } from "./bindingHandlers/traceClick";
+import { GraphqlService } from "./services/graphqlService";
+import { ListOfApisRuntimeModule } from "./components/apis/list-of-apis/listOfApis.runtime.module";
 import { OperationListRuntimeModule } from "./components/operations/operation-list/operationList.runtime.module";
 import { DetailsOfApiRuntimeModule } from "./components/apis/details-of-api/detailsOfApi.runtime.module";
-import { GraphqlService } from "./services/graphqlService";
 
 export class ApimRuntimeModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -170,6 +171,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("oauthServerConfiguration", OauthServerConfiguration);
         injector.bindModule(new CustomWidgetRuntimeModule());
         injector.bindModule(new RoleBasedSecurityRuntimeModule());
+        injector.bindModule(new ListOfApisRuntimeModule());
         injector.bindModule(new OperationListRuntimeModule());
         injector.bindModule(new DetailsOfApiRuntimeModule());
 

src/components/apis/list-of-apis/ko/listOfApis.html

@@ -1,11 +1,11 @@
 <!-- ko if: layout() === 'list' -->
-<api-list data-bind="attr: { params: runtimeConfig }"></api-list>
+<fui-api-list-runtime data-bind="attr: { props: runtimeConfig }"></fui-api-list-runtime>
 <!-- /ko -->
 
 <!-- ko if: layout() === 'dropdown' -->
 <api-list-dropdown data-bind="attr: { params: runtimeConfig }"></api-list-dropdown>
 <!-- /ko -->
 
 <!-- ko if: layout() === 'tiles' -->
-<api-list-tiles data-bind="attr: { params: runtimeConfig }"></api-list-tiles>
+<fui-api-list-runtime data-bind="attr: { props: runtimeConfig }"></fui-api-list-runtime>
 <!-- /ko -->

src/components/apis/list-of-apis/ko/listOfApisViewModelBinder.ts

@@ -2,7 +2,13 @@ import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
 import { ListOfApisViewModel } from "./listOfApisViewModel";
 import { ListOfApisModel } from "../listOfApisModel";
 import { StyleCompiler } from "@paperbits/common/styles";
+import { TLayout } from "../react/runtime/ApisListInfo";
 
+const layoutsMap = {
+    "tiles": TLayout.cards,
+    "list": TLayout.table,
+    "dropdown": undefined, // TODO
+}
 
 export class ListOfApisViewModelBinder implements ViewModelBinder<ListOfApisModel, ListOfApisViewModel> {
     constructor(private readonly styleCompiler: StyleCompiler) { }
@@ -15,7 +21,8 @@ export class ListOfApisViewModelBinder implements ViewModelBinder<ListOfApisMode
             allowSelection: state.allowSelection,
             showApiType: state.showApiType,
             defaultGroupByTagToEnabled: state.defaultGroupByTagToEnabled,
-            detailsPageUrl: state.detailsPageUrl
+            detailsPageUrl: state.detailsPageUrl,
+            layoutDefault: layoutsMap[state.layout],
         }));
     }
 

src/components/apis/list-of-apis/listOfApis.runtime.module.ts

@@ -0,0 +1,10 @@
+import { IInjector, IInjectorModule } from "@paperbits/common/injection";
+import { ApiListRuntime } from "./react/runtime/ApiListRuntime";
+import { registerCustomElement } from "@paperbits/react/customElements";
+
+export class ListOfApisRuntimeModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("listOfApisRuntime", ApiListRuntime);
+        registerCustomElement(ApiListRuntime, "fui-api-list-runtime", injector);
+    }
+}

src/components/apis/list-of-apis/react/runtime/ApiListRuntime.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { FluentProvider, Spinner } from "@fluentui/react-components";
+import { Resolve } from "@paperbits/react/decorators";
+import { SearchQuery } from "../../../../../contracts/searchQuery";
+import * as Constants from "../../../../../constants";
+import { Api } from "../../../../../models/api";
+import { ApiService } from "../../../../../services/apiService";
+import { RouteHelper } from "../../../../../routing/routeHelper";
+import { Pagination } from "./Pagination";
+import { ApisListInfo, TLayout } from "./ApisListInfo";
+import { fuiTheme } from "../../../../../constants";
+import { ApisTable } from "./ApisTable";
+import { ApisCards } from "./ApisCards";
+import { TApisData } from "./utils";
+
+export interface ApiListProps {
+  allowSelection?: boolean;
+  showApiType?: boolean;
+  defaultGroupByTagToEnabled?: boolean;
+  detailsPageUrl: string;
+
+  layoutDefault: TLayout | undefined; // TODO remove undefined once finished
+}
+
+const loadData = async (apiService: ApiService, query: SearchQuery, groupByTags?: boolean) => {
+    let apis: TApisData;
+
+    try {
+        apis = await (groupByTags ? apiService.getApisByTags(query) : apiService.getApis(query));
+    } catch (error) {
+        throw new Error(`Unable to load APIs. Error: ${error.message}`);
+    }
+
+    return apis;
+}
+
+const ApiListRuntimeFC = ({apiService, getReferenceUrl, layoutDefault, showApiType}: ApiListProps & { apiService: ApiService, getReferenceUrl: (api: Api) => string }) => {
+    const [working, setWorking] = useState(false)
+    const [pageNumber, setPageNumber] = useState(1)
+    const [apis, setApis] = useState<TApisData>()
+    const [layout, setLayout] = useState<TLayout>(layoutDefault ?? TLayout.table)
+    const [pattern, setPattern] = useState<string>()
+    // const [tags, setTags] = useState(new Set<Tag>())
+
+    /**
+     * Loads page of APIs.
+     */
+    useEffect(() => {
+        const query: SearchQuery = {
+            pattern,
+            // tags: [...tags],
+            skip: (pageNumber - 1) * Constants.defaultPageSize,
+            take: Constants.defaultPageSize
+        };
+
+        setWorking(true)
+        loadData(apiService, query, true) // TODO
+            .then(apis => setApis(apis))
+            .finally(() => setWorking(false))
+    }, [apiService, pageNumber, pattern])
+
+    return (
+        <>
+            <ApisListInfo pageNumber={pageNumber} layout={layout} setLayout={setLayout} pattern={pattern} setPattern={setPattern} />
+
+            {working || !apis ? (
+                <div className={"table-body"}>
+                    <Spinner label="Loading APIs" labelPosition="below" size="extra-large" />
+                </div>
+            ) : (
+              <>
+                  {layout === TLayout.table ? (
+                      <ApisTable apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} />
+                  ) : (
+                      <ApisCards apis={apis} showApiType={showApiType} getReferenceUrl={getReferenceUrl} />
+                  )}
+
+                  <div className={"fui-pagination-container"}>
+                      <Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} pageMax={Math.ceil(apis?.count / Constants.defaultPageSize)} />
+                  </div>
+              </>
+            )}
+        </>
+    );
+}
+
+export class ApiListRuntime extends React.Component<ApiListProps> {
+    @Resolve("apiService")
+    public apiService: ApiService;
+
+    @Resolve("routeHelper")
+    public routeHelper: RouteHelper;
+
+    private getReferenceUrl(api: Api): string {
+        return this.routeHelper.getApiReferenceUrl(api.name, this.props.detailsPageUrl);
+    }
+
+    render() {
+        return (
+          <FluentProvider theme={fuiTheme}>
+            <ApiListRuntimeFC
+              {...this.props}
+              apiService={this.apiService}
+              getReferenceUrl={(api) => this.getReferenceUrl(api)}
+            />
+          </FluentProvider>
+        );
+    }
+}

src/components/apis/list-of-apis/react/runtime/ApisCards.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Body1, Body1Strong, Button, Caption1, Caption1Stronger, Link, Subtitle1 } from "@fluentui/react-components";
+import { Api } from "../../../../../models/api";
+import { isApisGrouped, toggleValueInSet, TagGroupToggleBtn, TApisData } from "./utils";
+import { TagGroup } from "../../../../../models/tagGroup";
+import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+
+type Props = {
+    showApiType: boolean;
+    getReferenceUrl: (api: Api) => string;
+};
+
+const ApiCard = ({ api, getReferenceUrl, showApiType }: Props & { api: Api }) => {
+    return (
+        <div className={"fui-api-card"}>
+            <div style={{ height: "100%" }}>
+                {showApiType && (
+                    <div className={"fui-api-card-tags"}>
+                        <Caption1Stronger>API</Caption1Stronger>
+                        <span>{api.typeName}</span>
+                    </div>
+                )}
+                <Subtitle1>{api.displayName}</Subtitle1>
+
+                <MarkdownProcessor markdownToDisplay={api.description}/>
+            </div>
+
+            <div>
+                <Link href={getReferenceUrl(api)} title={api.displayName}>
+                    <Button appearance={"outline"}>
+                        Go to API
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    );
+};
+
+const ApisCardsContainer = ({ showApiType, apis, getReferenceUrl }: Props & { apis: Api[] }) => (
+    <div className={"fui-api-cards-container"}>
+        {apis?.map((api) => (
+            <ApiCard
+                key={api.id}
+                api={api}
+                getReferenceUrl={getReferenceUrl}
+                showApiType={showApiType}
+            />
+        ))}
+    </div>
+);
+
+const ApisGroupedCards = ({ showApiType, tags, getReferenceUrl }: Props & { tags: TagGroup<Api>[] }) => {
+    const [expanded, setExpanded] = React.useState(new Set());
+
+    return (
+        <div className={"fui-api-tag-cards-container"}>
+            {tags?.map(({ tag, items }) => (
+                <div key={tag}>
+                    <div
+                        className={"fui-api-tag-cards"}
+                        onClick={() => setExpanded(old => toggleValueInSet(old, tag))}
+                    >
+                        <TagGroupToggleBtn expanded={expanded.has(tag)}/>
+
+                        <Body1Strong>
+                            {tag}
+                        </Body1Strong>
+                    </div>
+
+                    {expanded.has(tag) && (
+                        <ApisCardsContainer
+                            apis={items}
+                            getReferenceUrl={getReferenceUrl}
+                            showApiType={showApiType}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const ApisCards = ({ showApiType, apis, getReferenceUrl }: Props & { apis: TApisData }) =>
+    isApisGrouped(apis) ? (
+        <ApisGroupedCards
+            tags={apis.value}
+            getReferenceUrl={getReferenceUrl}
+            showApiType={showApiType}
+        />
+    ) : (
+        <ApisCardsContainer
+            apis={apis.value}
+            getReferenceUrl={getReferenceUrl}
+            showApiType={showApiType}
+        />
+    );