Fixed UI bugs for Subscriptions on the profile page (#2185)

Azure · May 23, 2023 · a1086a7 · a1086a7
1 parent 0b43193
commit a1086a7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 1 deletion.
diff --git a/src/components/users/subscriptions/ko/runtime/subscriptionListItem.ts b/src/components/users/subscriptions/ko/runtime/subscriptionListItem.ts
@@ -3,6 +3,7 @@ import { EventManager } from "@paperbits/common/events";
 import { Subscription } from "../../../../../models/subscription";
 import { dispatchErrors} from "../../../validation-summary/utils";
 import { ErrorSources } from "../../../validation-summary/constants";
+import { ValidationMessages } from "../../../validationMessages";
 
 export class SubscriptionListItem {
     private hiddenKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
@@ -32,6 +33,8 @@ export class SubscriptionListItem {
         this.changedItem = ko.observable();
         this.editName = ko.observable(model.name);
         this.isEdit = ko.observable(false);
+
+        this.editName.extend(<any>{ required: { message: ValidationMessages.subscriptionNameRequired } });
     }
 
     public toggleEdit(): void {

diff --git a/src/components/users/subscriptions/ko/runtime/subscriptions.html b/src/components/users/subscriptions/ko/runtime/subscriptions.html
@@ -19,6 +19,7 @@
         <!-- ko foreach: subscriptions -->
         <div role="row" class="table-row">
             <div role="cell" class="col-8">
+                <div class="columnheader">Subscription details</div>
                 <div role="table">
                     <div role="row" class="row">
                         <div role="rowheader" class="col-md-3">
@@ -30,7 +31,10 @@
                             <!-- /ko -->
 
                             <!-- ko if: $data.isEdit -->
-                            <input type="text" class="form-control" data-bind="value: editName" />
+                            <div class="input-group has-validation">
+                                <input type="text" class="form-control" data-bind="value: editName" aria-required="true" />
+                                <span class="invalid-feedback" data-bind="validationMessage: editName"></span>
+                            </div>
                             <!-- /ko -->
                         </div>
                         <div role="cell" class="col-md-3">
@@ -121,13 +125,16 @@
                 </div>
             </div>
             <div role="cell" class="col-2 text-wrap">
+                <div class="columnheader">Product</div>
                 <span data-bind="text: model.productName"></span>
             </div>
             <div role="cell" class="col-1">
+                <div class="columnheader">State</div>
                 <span data-bind="text: model.state"></span>
             </div>
             <div role="cell" class="col-1">
                 <!-- ko if: $data.model.canBeCancelled() -->
+                <div class="columnheader">Action</div>
                 <a class="btn-link" href="#" data-bind="click: $parent.cancelSubscription"
                     aria-label="Cancel subscription">
                     Cancel

diff --git a/src/components/users/validationMessages.ts b/src/components/users/validationMessages.ts
@@ -8,4 +8,5 @@ export class ValidationMessages {
     static passwordConfirmationMustMatch = `Password confirmation field must be equal to password.`;
     static newPasswordRequired = `New password is required.`;
     static consentRequired = `You must agree to the terms of use.`;
+    static subscriptionNameRequired = `Subscription name is required.`;
 }
diff --git a/src/themes/website/styles/styles.scss b/src/themes/website/styles/styles.scss
@@ -30,3 +30,4 @@
 @import "monaco.editor.scss";
 @import "gql.scss";
 @import "details.scss";
+@import "subscriptions.scss";
diff --git a/src/themes/website/styles/subscriptions.scss b/src/themes/website/styles/subscriptions.scss
@@ -0,0 +1,28 @@
+subscriptions-runtime {
+    .table .table-head {
+        @media (max-width: $breakpoint-md) {
+            display: none;
+        }
+    }
+
+    .table .table-row {
+        @media (max-width: $breakpoint-md) {
+            display: block;
+        }
+
+        > div {
+            @media (max-width: $breakpoint-md) {
+                max-width: 100%;
+            }
+
+            .columnheader {
+                font-weight: bold;
+                margin-bottom: 10px;
+
+                @media (min-width: $breakpoint-md) {
+                    display: none;
+                }
+            }
+        }
+    }
+}
diff --git a/src/themes/website/styles/utils.scss b/src/themes/website/styles/utils.scss
@@ -66,6 +66,42 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &:hover + .text-truncate-tooltip {
+        display: block;
+    }
+}
+
+// Not used yet but can be for a truncatable text
+// Usage  example: <div role="columnheader" class="col-2"><div class="text-truncate">Product</div><div class="text-truncate-tooltip">Product</div></div>
+.text-truncate-tooltip {
+    position: absolute;
+    top: 90%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #000;
+    background-color: hsla(0, 0%, 20%, 0.9);
+    color: #fff;
+    font-weight: normal;
+    border-radius: 5px;
+    width: max-content;
+    padding: 5px 10px;
+    z-index: 1;
+    display: none;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        margin-top: -16px;
+        z-index: 1001;
+        background: transparent;
+        border: 6px solid transparent;
+        transform: translateX(-50%);
+        border-top-color: transparent;
+        border-bottom-color: #000;
+        border-bottom-color: hsla(0, 0%, 20%, 0.9);
+    }
 }
 
 .text-wrap {