minor fixes

malincrist · malincrist · commit 34fb461e8af5 · 2023-07-24T14:26:21.000+02:00
diff --git a/src/components/template-pages/api-details-page/apiDetailsPageHandlers.ts b/src/components/template-pages/api-details-page/apiDetailsPageHandlers.ts
@@ -43,12 +43,25 @@ export class ApiDetailsPageHandlers implements IWidgetHandler {
                         titleText: {
                             displayName: "Title text",
                             plugins: ["typography"],
-                            defaults:{
+                            defaults: {
                                 typography: {
                                     fontWeight: "normal",
                                     colorKey: "colors/primaryText"
                                 },
                             }
+                        },
+                        highlightSelectedItem: {
+                            displayName: "Highlight selected item",
+                            plugins: ["border"],
+                            defaults: {
+                                border: {
+                                    left: {
+                                        width: 5,
+                                        style: "solid",
+                                        colorKey: "colors/Bqr2r"
+                                    }
+                                }
+                            }
                         }
                     }
                 }
diff --git a/src/components/template-pages/api-details-page/ko/runtime/api-details-page.html b/src/components/template-pages/api-details-page/ko/runtime/api-details-page.html
@@ -29,7 +29,7 @@ <h1 class="title-text" data-bind="text: api() ? api().displayName : 'The specifi
         <!-- ko if: api -->
 
         <!-- ko if: selectedMenuItem()?.type === 'static' -->
-        <!-- ko if: selectedMenuItem()?.value === 'about' -->
+        <!-- ko if: selectedMenuItem()?.value === 'details' -->
         <!-- ko template: { name: 'aboutApi', data: {api: api(), lastModifiedDate: lastModifiedDate()} } -->
         <!-- /ko -->
         <!-- /ko -->
diff --git a/src/components/template-pages/api-details-page/ko/runtime/api-details-page.ts b/src/components/template-pages/api-details-page/ko/runtime/api-details-page.ts
@@ -96,7 +96,7 @@ export class ApiDetailsPage {
             let url = ""
 
             if (menuItem.type === menuItemType.staticMenuItemType) {
-                url = this.routeHelper.getProductDetailsPageReference(this.api().name, menuItem.value);
+                url = this.routeHelper.getApiDetailsPageReference(this.api().name, menuItem.value);
             }
 
             if (menuItem.type === menuItemType.operationMenuItem) {
@@ -166,8 +166,8 @@ export class ApiDetailsPage {
         const apiReferenceUrl = this.routeHelper.getApiReferenceUrl(this.api().name);
         this.breadcrumbItems([{ title: "Home", url: "/" },
         { title: "APIs", url: "/apis" },
-        { title: this.api().name, url: this.routeHelper.getApiDetailsPageReference(this.api().name, "about") },
-        { title: "About this API", url: apiReferenceUrl }])
+        { title: this.api().name, url: this.routeHelper.getApiDetailsPageReference(this.api().name, "details") },
+        { title: "Details", url: apiReferenceUrl }])
     }
 
     private onVersionChange(selectedApiName: string): void {
diff --git a/src/components/template-pages/api-details-page/ko/runtime/menu/api-nav-menu.html b/src/components/template-pages/api-details-page/ko/runtime/menu/api-nav-menu.html
@@ -25,7 +25,7 @@
             <div class="menu-list" role="listbox" aria-label="About this API">
                 <!-- ko foreach: { data: staticSelectableMenuItems, as: 'menuItem' } -->
                 <div class="menu-list-item" role="option"
-                    data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                    data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                     <span data-bind="text: menuItem.displayName"></span>
                 </div>
                 <!-- /ko -->
@@ -34,28 +34,28 @@
 
         <hr>
         <details open class="details-styled" id="details-wiki">
-            <summary aria-label="Documentations">
+            <summary aria-label="Documentation">
                 <div class="menu-list-heading title">
-                    Documentations
+                    Documentation
                     <i class="icon-emb icon-emb-chevron-down"></i>
                 </div>
             </summary>
-            <div class="menu-list" role="listbox" aria-label="Documentations">
+            <div class="menu-list" role="listbox" aria-label="Documentation">
                 <!-- ko if: wikiLoading -->
                 <spinner class="menu-list-item"></spinner>
                 <!-- /ko -->
 
                 <!-- ko ifnot: wikiLoading -->
                 <!-- ko foreach: { data: filteredWikiDocumentationMenuItems(), as: 'menuItem' } -->
                 <div class="menu-list-item" role="option"
-                    data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                    data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                     <span
                         data-bind="text: menuItem.displayName, css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }"></span>
                 </div>
                 <!-- /ko -->
 
                 <!-- ko if: filteredWikiDocumentationMenuItems().length == 0 -->
-                <span>No documentations to display</span>
+                <span>No documentation to display</span>
                 <!-- /ko -->
                 <!-- /ko -->
             </div>
@@ -102,7 +102,7 @@
             </div>
             <!-- ko foreach: { data: graphqlNodes(), as: 'menuItem' } -->
             <div class="menu-list-item" role="option"
-                data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                 <div class="http-method" data-bind="attr: { 'data-method': menuItem.method }"></div>
                 <span
                     data-bind="text: menuItem.displayName, css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }"></span>
@@ -121,7 +121,7 @@
                 <!-- ko ifnot: operationsLoading -->
                 <!-- ko foreach: { data: operationsMenuItems(), as: 'menuItem' } -->
                 <div class="menu-list-item" role="option"
-                    data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                    data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                     <div class="http-method" data-bind="attr: { 'data-method': menuItem.method }"></div>
                     <span
                         data-bind="text: menuItem.displayName, css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }"></span>
@@ -164,7 +164,7 @@
                     <div role="listbox" aria-label="Operations">
                         <!-- ko foreach: { data: tagMenuItem.operations, as: 'menuItem' } -->
                         <div class="menu-list-item" role="option"
-                            data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                            data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                             <div class="http-method" data-bind="attr: { 'data-method': menuItem.method }">
                             </div>
                             <span data-bind="text: menuItem.displayName"></span>
diff --git a/src/components/template-pages/api-details-page/ko/runtime/menu/api-nav-menu.ts b/src/components/template-pages/api-details-page/ko/runtime/menu/api-nav-menu.ts
@@ -28,8 +28,8 @@ interface tagOperationMenuItem {
 })
 export class ApiNavMenu {
     public readonly staticSelectableMenuItems: menuItem[] = [
-        { displayName: "About this API", value: "about", type: menuItemType.staticMenuItemType },
-        { displayName: "Products that use this API", value: "products", type: menuItemType.staticMenuItemType },
+        { displayName: "Details", value: "details", type: menuItemType.staticMenuItemType },
+        { displayName: "Associated products", value: "products", type: menuItemType.staticMenuItemType },
         { displayName: "Changelog", value: "changelog", type: menuItemType.staticMenuItemType }
     ];
 
@@ -352,7 +352,7 @@ export class ApiNavMenu {
     private async onRouteChange(): Promise<void> {
         const apiName = this.routeHelper.getApiName();
 
-        if (!apiName || apiName === this.api()?.name) {
+        if (!apiName) {
             return;
         }
 
diff --git a/src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.html b/src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.html
@@ -52,7 +52,7 @@ <h3>Products that use this API</h3>
 </div>
 
 <!-- ko if: showQuickView() && quickViewProduct() -->
-<div class="detachable-right">
+<div class="detachable-right scrollable">
     <div class="panel">
         <div style="display: flex; justify-content: space-between">
             <h2 data-bind="text: quickViewProduct().name"></h2>
diff --git a/src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.ts b/src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.ts
@@ -101,7 +101,7 @@ export class ApiProductsCards {
         this.showQuickView(false);
     }
 
-    public getFullProductUrl(product: Product): string {
-        return window.location.host + "/" + this.routeHelper.getProductReferenceUrl(product.name, "product");
+    public getFullProductUrl(product: ko.Observable<Product>): string {
+        return window.location.host + "/" + this.routeHelper.getProductReferenceUrl(product().name, "product");
     }
 }
diff --git a/src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.html b/src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.html
@@ -16,7 +16,7 @@
             <div class="menu-list" role="listbox" aria-label="About this Product">
                 <!-- ko foreach: { data: staticSelectableMenuItems, as: 'menuItem' } -->
                 <div class="menu-list-item" role="option"
-                    data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                    data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                     <span data-bind="text: menuItem.displayName"></span>
                 </div>
                 <!-- /ko -->
@@ -25,28 +25,28 @@
 
         <hr>
         <details open class="details-styled" id="details-wiki">
-            <summary aria-label="Documentations">
+            <summary aria-label="Documentation">
                 <div class="menu-list-heading title">
-                    Documentations
+                    Documentation
                     <i class="icon-emb icon-emb-chevron-down"></i>
                 </div>
             </summary>
-            <div class="menu-list" role="listbox" aria-label="Documentations">
+            <div class="menu-list" role="listbox" aria-label="Documentation">
                 <!-- ko if: wikiLoading -->
                 <spinner class="menu-list-item"></spinner>
                 <!-- /ko -->
 
                 <!-- ko ifnot: wikiLoading -->
                 <!-- ko foreach: { data: filteredWikiDocumentationMenuItems(), as: 'menuItem' } -->
                 <div class="menu-list-item" role="option"
-                    data-bind="activate: $component.selectMenuItem, css: { 'selected': $component.selectedMenuItem() == menuItem }">
+                    data-bind="activate: $component.selectMenuItem, css: { 'selected highlight-selected-item': $component.selectedMenuItem() == menuItem }">
                     <span
                         data-bind="text: menuItem.displayName, css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }"></span>
                 </div>
                 <!-- /ko -->
 
                 <!-- ko if: filteredWikiDocumentationMenuItems().length == 0 -->
-                <span>No documentations to display</span>
+                <span>No documentation to display</span>
                 <!-- /ko -->
                 <!-- /ko -->
             </div>
diff --git a/src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.ts b/src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.ts
@@ -14,7 +14,7 @@ import * as Constants from "../../../../../../constants";
 })
 export class ProductNavMenu {
     public readonly staticSelectableMenuItems: menuItem[] = [
-        { displayName: "About this Product", value: "about", type: menuItemType.staticMenuItemType },
+        { displayName: "Details", value: "details", type: menuItemType.staticMenuItemType },
         { displayName: "APIs included", value: "apis", type: menuItemType.staticMenuItemType },
         { displayName: "Subscriptions", value: "subscriptions", type: menuItemType.staticMenuItemType }
     ];
@@ -47,7 +47,7 @@ export class ProductNavMenu {
         this.productLoading = ko.observable();
         this.wikiDocumentationMenuItems = ko.observable([]);
         this.filteredWikiDocumentationMenuItems = ko.observable([]);
-        this.wikiLoading = ko.observable();
+        this.wikiLoading = ko.observable(true);
         this.product = ko.observable();
     }
 
@@ -56,8 +56,7 @@ export class ProductNavMenu {
         this.productLoading.subscribe(async (newValue) => {
             if (!newValue) {
                 await this.loadWiki();
-                // to do: [0]
-                this.selectMenuItem(this.staticSelectableMenuItems[2]);
+                this.selectMenuItem(this.staticSelectableMenuItems[0]);
             }
         });
 
@@ -104,11 +103,10 @@ export class ProductNavMenu {
         this.wikiLoading(false);
     }
 
-
     private async onRouteChange(): Promise<void> {
         const productName = this.routeHelper.getProductName();
 
-        if (!productName || productName === this.product()?.name) {
+        if (!productName) {
             return;
         }
 
diff --git a/src/components/template-pages/product-details-page/ko/runtime/product-details-page.html b/src/components/template-pages/product-details-page/ko/runtime/product-details-page.html
@@ -40,7 +40,7 @@
         <!-- ko if: product -->
 
         <!-- ko if: selectedMenuItem()?.type === 'static' -->
-        <!-- ko if: selectedMenuItem()?.value === 'about' -->
+        <!-- ko if: selectedMenuItem()?.value === 'details' -->
         <h3>About this Product</h3>
 
         <div class="pb-12">
diff --git a/src/components/template-pages/product-details-page/ko/runtime/product-details-page.ts b/src/components/template-pages/product-details-page/ko/runtime/product-details-page.ts
@@ -72,12 +72,8 @@ export class ProductDetailsPage {
         this.showSubscribeForm(true);
     }
 
-    public closeSubscriptionForm(reloadSubscriptions?: boolean) {
+    public closeSubscriptionForm() {
         this.showSubscribeForm(false);
-
-        if (!!reloadSubscriptions) {
-            this.loadProduct(this.product().name);
-        }
     }
 
     public async calculateCanCreateNewSubscription(): Promise<void> {
@@ -127,7 +123,7 @@ export class ProductDetailsPage {
         const productReferenceUrl = this.routeHelper.getProductReferenceUrl(this.product().name);
         this.breadcrumbItems([{ title: "Home", url: "/" },
         { title: "Products", url: "/products" },
-        { title: this.product().name, url: this.routeHelper.getProductDetailsPageReference(this.product().name, "about") },
-        { title: "About this Product", url: productReferenceUrl }])
+        { title: this.product().name, url: this.routeHelper.getProductDetailsPageReference(this.product().name, "details") },
+        { title: "Details", url: productReferenceUrl }])
     }
 }
diff --git a/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.html b/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.html
@@ -52,7 +52,7 @@ <h3>APIs in this prduct</h3>
 </div>
 
 <!-- ko if: showQuickView() && quickViewApi() -->
-<div class="detachable-right">
+<div class="detachable-right scrollable">
     <div class="panel">
         <div style="display: flex; justify-content: space-between">
             <h2 data-bind="text: quickViewApi().name"></h2>
diff --git a/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.ts b/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.ts
@@ -94,8 +94,8 @@ export class ProductApisCards {
         this.showQuickView(false);
     }
 
-    public getFullApiUrl(api: Api): string {
-        return window.location.host + "/" + this.routeHelper.getProductReferenceUrl(api.name, "api-details");
+    public getFullApiUrl(api: ko.Observable<Api>): string {
+        return window.location.host + "/" + this.routeHelper.getApiReferenceUrl(api().name, "api-details");
     }
 
     public getApiUrl(api: Api): string {
diff --git a/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.html b/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.html
@@ -2,8 +2,12 @@ <h3>Subscriptions</h3>
 
 <!-- ko ifnot: isUserSignedIn() -->
 <p>
-    You need to sign in to see your subscriptions.
+    You need to sign in or create an account to see your subscriptions.
 </p>
+<div class="flex flex-column" style="padding:0 150px">
+    <button class="button button-primary sign-in-button" data-bind="click: signIn">Sign in</button>
+    <button class="button sign-up-button" data-bind="click: signUp">Create an account</button>
+</div>
 <!-- /ko -->
 
 <!-- ko if: working -->
@@ -108,7 +112,7 @@ <h3>Subscriptions</h3>
             </div>
         </div>
         <!-- /ko -->
-        
+
     </div>
     <!-- /ko -->
 </div>
diff --git a/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.ts b/src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.ts
@@ -119,9 +119,17 @@ export class ProdutDetailsPageSubscriptions {
         }
     }
 
+    public signIn(): void {
+        this.usersService.navigateToSignin();
+    }
+
+    public signUp(): void {
+        this.usersService.navigateToSignup();
+    }
+
     private async loadProductSubscriptions(): Promise<void> {
+        this.working(true);
         const userId = await this.usersService.getCurrentUserId();
-        //this.isUserSignedIn(false);
         this.isUserSignedIn(!!userId);
 
         if (!userId) {
@@ -134,8 +142,6 @@ export class ProdutDetailsPageSubscriptions {
             return;
         }
 
-        this.working(true);
-
         try {
             const pageOfSubscriptions = await this.productService.getSubscriptionsForProduct(userId, `/products/${productName}`);
             const subscriptions = pageOfSubscriptions.value.map(item => new SubscriptionListItem(item, this.eventManager));
diff --git a/src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.html b/src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.html
@@ -2,7 +2,7 @@
     <div class="panel-header">
         <h3>Create subscription</h3>
         <button type="button" tabindex="0" class="no-border pull-right" data-dismiss="modal"
-            aria-label="Close subscription form" data-bind="click: closeSubscriptionForm(false)">
+            aria-label="Close subscription form" data-bind="click: closeSubscriptionForm">
             <i class="icon-emb icon-emb-simple-remove"></i>
         </button>
     </div>
diff --git a/src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.ts b/src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.ts
@@ -24,7 +24,7 @@ export class SubscriptionForm {
     product: ko.Observable<Product>;
 
     @Param()
-    closeSubscriptionForm: (reloadSubscriptions?: boolean) => void;
+    closeSubscriptionForm: () => void;
 
     constructor(private readonly usersService: UsersService,
         private readonly productService: ProductService,
@@ -93,7 +93,7 @@ export class SubscriptionForm {
             await this.productService.createSubscription(subscriptionId, userId, `/products/${this.product().name}`, this.subscriptionName());
 
 
-            this.closeSubscriptionForm(true);
+            this.closeSubscriptionForm();
         }
         catch (error) {
             this.hasError(true);
diff --git a/src/components/template-pages/product-details-page/productDetailsPageHandlers.ts b/src/components/template-pages/product-details-page/productDetailsPageHandlers.ts
diff --git a/src/services/usersService.ts b/src/services/usersService.ts
diff --git a/src/themes/website/styles/widgets/static-pages.scss b/src/themes/website/styles/widgets/static-pages.scss

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export class ApiProductsCards {`
`101`	`101`	`this.showQuickView(false);`
`102`	`102`	`}`
`103`	`103`
`104`		`- public getFullProductUrl(product: Product): string {`
`105`		`- return window.location.host + "/" + this.routeHelper.getProductReferenceUrl(product.name, "product");`
	`104`	`+ public getFullProductUrl(product: ko.Observable<Product>): string {`
	`105`	`+ return window.location.host + "/" + this.routeHelper.getProductReferenceUrl(product().name, "product");`
`106`	`106`	`}`
`107`	`107`	`}`