design changes as per the new design of Share dialog

cspell.json

@@ -105,6 +105,7 @@
     "requirednumbervisibility",
     "rowspan",
     "selectitem",
+    "seperation",
     "sharedlinks",
     "sidenav",
     "snackbar",

lib/content-services/src/lib/content-node-share/content-node-share.dialog.html

@@ -1,107 +1,119 @@
 <div class="adf-share-link__dialog-content">
-    <div data-automation-id="adf-share-dialog-title" class="adf-share-link__title" role="heading" aria-level="1">
+    <div class="adf-share-link__dialog-container">
-        {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
+        <div class="adf-share-link--row">
-    </div>
+            <div data-automation-id="adf-share-dialog-title" class="adf-share-link__title adf-share-link__label" role="heading" aria-level="1">
+                {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
+            </div>
+            <mat-icon mat-dialog-close class="adf-share-link__close">close</mat-icon>
+        </div>
 
-    <mat-dialog-content>
+        <mat-dialog-content>
-        <p class="adf-share-link__info">{{ 'SHARE.DESCRIPTION' | translate }}</p>
+            <!-- <p class="adf-share-link__info">{{ 'SHARE.DESCRIPTION' | translate }}</p> -->
+            <hr class="adf-share-link__seperation-line" />
 
-        <form [formGroup]="form">
+            <form [formGroup]="form">
 
-            <div class="adf-share-link--row">
+                <div class="adf-share-link--row">
-                <mat-icon>timer</mat-icon>
+                    <mat-icon>timer</mat-icon>
 
-                <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}</div>
+                    <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}</div>
 
-                <mat-slide-toggle
+                    <mat-slide-toggle
-                    #slideToggleExpirationDate
+                        #slideToggleExpirationDate
-                    [disabled]="!canUpdate"
+                        [disabled]="!canUpdate"
+                        color="primary"
+                        data-automation-id="adf-expire-toggle"
+                        aria-label="{{ 'SHARE.EXPIRES' | translate }}"
+                        [checked]="time.value"
+                        (change)="onToggleExpirationDate($event)">
+                    </mat-slide-toggle>
+                </div>
+
+                <div *ngIf="isSlideToggleChecked" data-automation-id="adf-slide-toggle-checked">
+                    <mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
+                        <mat-label>{{ 'SHARE.EXPIRATION-LABEL' | translate }}</mat-label>
+                        <mat-datetimepicker-toggle
+                            #matDatetimepickerToggle="matDatetimepickerToggle"
+                            [disabled]="time.disabled"
+                            [for]="datetimePicker"
+                            matSuffix>
+                        </mat-datetimepicker-toggle>
+                        <mat-datetimepicker
+                            #datetimePicker
+                            (closed)="onDatetimepickerClosed()"
+                            [type]="type"
+                            [timeInterval]="1">
+                        </mat-datetimepicker>
+                        <input class="adf-share-link__input"
+                            #dateTimePickerInput
+                            matInput
+                            placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}"
+                            [attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
+                            [min]="minDate"
+                            formControlName="time"
+                            [matDatetimepicker]="datetimePicker" />
+                    </mat-form-field>
+                </div>
+
+
+                <p class="adf-share-link__info">{{ 'SHARE.SHARE-LINK' | translate }}</p>
+
+                <div class="adf-share-link--row">
+                    <mat-slide-toggle
                     color="primary"
-                    data-automation-id="adf-expire-toggle"
+                    data-automation-id="adf-share-toggle"
-                    aria-label="{{ 'SHARE.EXPIRES' | translate }}"
+                    aria-label="{{ 'SHARE.TITLE' | translate }}"
-                    [checked]="time.value"
+                    [checked]="isFileShared"
-                    (change)="onToggleExpirationDate($event)">
+                    [disabled]="!canUpdate || isDisabled"
-                </mat-slide-toggle>
+                    (change)="onSlideShareChange($event)">
-            </div>
+                    </mat-slide-toggle>
 
-            <mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
+                    <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}</div>
-                <mat-datetimepicker-toggle
-                    #matDatetimepickerToggle="matDatetimepickerToggle"
-                    [disabled]="time.disabled"
-                    [for]="datetimePicker"
-                    matSuffix>
-                </mat-datetimepicker-toggle>
-                <mat-datetimepicker
-                    #datetimePicker
-                    (closed)="onDatetimepickerClosed()"
-                    [type]="type"
-                    [timeInterval]="1">
-                </mat-datetimepicker>
-                <input class="adf-share-link__input"
-                    #dateTimePickerInput
-                    matInput
-                    placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}"
-                    [attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
-                    [min]="minDate"
-                    formControlName="time"
-                    [matDatetimepicker]="datetimePicker" />
-            </mat-form-field>
 
-            <p class="adf-share-link__info">{{ 'SHARE.SHARE-LINK' | translate }}</p>
+                </div>
 
-            <div class="adf-share-link--row">
+                <mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
-                <mat-slide-toggle
+                    <input
-                color="primary"
+                        #sharedLinkInput
-                data-automation-id="adf-share-toggle"
+                        data-automation-id="adf-share-link"
-                aria-label="{{ 'SHARE.TITLE' | translate }}"
+                        class="adf-share-link__input"
-                [checked]="isFileShared"
+                        matInput
-                [disabled]="!canUpdate || isDisabled"
+                        cdkFocusInitial
-                (change)="onSlideShareChange($event)">
+                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
-                </mat-slide-toggle>
+                        [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
+                        formControlName="sharedUrl"
+                        readonly="readonly">
+                    <mat-icon
+                        class="adf-input-action"
+                        role="button"
+                        matSuffix
+                        [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
+                        [attr.aria-label]="'SHARE.COPY_BUTTON_LABEL' | translate"
+                        [target]="sharedLinkInput"
+                        tabindex="0">
+                        content_copy
+                    </mat-icon>
+                </mat-form-field>
 
-                <div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}</div>
+                <p class="adf-share-link__warn" *ngIf="linkWithExpirySettings">
+                    {{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}
+                </p>
 
-            </div>
+                <div class="adf-share-link--row">
+                    <mat-icon>public</mat-icon>
 
-            <mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
+                    <p class="adf-share-link__info adf-sharable-link">{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p>
-                <input
+                </div>
-                    #sharedLinkInput
-                    data-automation-id="adf-share-link"
-                    class="adf-share-link__input"
-                    matInput
-                    cdkFocusInitial
-                    placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
-                    [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
-                    formControlName="sharedUrl"
-                    readonly="readonly">
-                <mat-icon
-                    class="adf-input-action"
-                    role="button"
-                    matSuffix
-                    [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
-                    [attr.aria-label]="'SHARE.COPY_BUTTON_LABEL' | translate"
-                    [target]="sharedLinkInput"
-                    tabindex="0">
-                    content_copy
-                </mat-icon>
-            </mat-form-field>
 
-            <p class="adf-share-link__warn" *ngIf="linkWithExpirySettings">
+            </form>
-                {{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}
-            </p>
 
-            <div class="adf-share-link--row">
+            <hr class="adf-share-link__seperation-line" />
-                <mat-icon>public</mat-icon>
+        </mat-dialog-content>
 
-                <p class="adf-share-link__info adf-sharable-link">{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p>
+        <div mat-dialog-actions>
-            </div>
+            <button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
-
+                {{ 'SHARE.CLOSE' | translate }}
-        </form>
+            </button>
-    </mat-dialog-content>
+        </div>
-
-    <div mat-dialog-actions>
-        <button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
-            {{ 'SHARE.CLOSE' | translate }}
-        </button>
     </div>
 </div>

lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss

@@ -7,6 +7,14 @@
         &__dialog-content {
             display: flex;
             flex-direction: column;
+            padding: 24px;
+            background-color: var(--theme-grey-background-color);
+        }
+
+        &__dialog-container {
+            background-color: var(--theme-card-background-color);
+            border-radius: 16px;
+            padding: 24px;
         }
 
         &__label,
@@ -41,12 +49,21 @@
             /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
             flex-wrap: wrap;
             align-items: center;
+            padding-bottom: 22px;
         }
 
         &__input {
             color: var(--adf-theme-foreground-text-color-087);
         }
 
+        &__seperation-line {
+            border: 1px solid var(--theme-grey-background-color);
+            margin: 0px -24px 12px;
+        }
+
+        &__close {
+            cursor: pointer;
+        }
     }
 
     .adf-input-action {
@@ -55,6 +72,11 @@
 
     .adf-full-width {
         width: 100%;
+        background-color: var(--theme-grey-background-color);
+        border-radius: 8px;
+        padding-right: 6px;
+        padding-left: 6px;
+        padding-top: 6px;
     }
 
     .adf-sharable-link {
@@ -69,7 +91,8 @@
         justify-content: flex-end;
 
         & > button {
-            text-transform: uppercase;
+            color: var(--adf-theme-foreground-base-color);
+            background-color: var(--theme-grey-background-color);
         }
     }
 
@@ -77,6 +100,18 @@
         align-items: center;
     }
 
+    .mat-dialog-container {
+        padding: 0px;
+    }
+
+    .mat-form-field-appearance-legacy .mat-form-field-underline {
+        display: none;
+    }
+
+    .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+        padding-bottom: 6px;
+    }
+
     @media screen and (max-width: 380px) {
         .mat-dialog-container {
             padding: 0 15px;

lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts

@@ -234,13 +234,19 @@ describe('ShareDialogComponent', () => {
         };
 
         fixture.detectChanges();
+        const slideToggleChecked: HTMLDivElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]');
 
+        expect(slideToggleChecked).toBe(null);
         expect(fixture.nativeElement.querySelector('[data-automation-id="adf-share-toggle"]').classList).toContain('mat-disabled');
-        expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true);
+        // expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true);
-        expect(fixture.nativeElement.querySelector('mat-datetimepicker-toggle button').disabled).toBe(true);
+        // expect(fixture.nativeElement.querySelector('mat-datetimepicker-toggle button').disabled).toBe(true);
     });
 
-    it('should reset expiration date when toggle is unchecked', async () => {
+    it('should delete the current link generated with expiry date and generate a new link without expiry date when toggle is unchecked', async () => {
+        spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of());
+        spyOn(sharedLinksApiService, 'deleteSharedLink').and.returnValue(of({}));
+        spyOn(renditionService, 'getNodeRendition');
+
         node.entry.properties['qshare:sharedId'] = 'sharedId';
         node.entry.properties['qshare:sharedId'] = '2017-04-15T18:31:37+00:00';
         node.entry.allowableOperations = ['update'];
@@ -249,6 +255,7 @@ describe('ShareDialogComponent', () => {
             baseShareUrl: 'some-url/'
         };
 
+
         fixture.detectChanges();
 
         component.form.controls['time'].setValue(moment());
@@ -263,9 +270,9 @@ describe('ShareDialogComponent', () => {
 
         await fixture.whenStable();
 
-        expect(
+        expect(sharedLinksApiService.deleteSharedLink).toHaveBeenCalled();
-            fixture.nativeElement.querySelector('input[formcontrolname="time"]').value
+        expect(sharedLinksApiService.createSharedLinks).toHaveBeenCalledWith('nodeId');
-        ).toBe('');
+
     });
 
     it('should not allow expiration date action when node has no update permission', async () => {
@@ -280,7 +287,10 @@ describe('ShareDialogComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true);
+        const slideToggleChecked: HTMLDivElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]');
+
+        expect(slideToggleChecked).toBe(null);
+        // expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true);
         expect(fixture.nativeElement.querySelector('.mat-slide-toggle[data-automation-id="adf-expire-toggle"]')
             .classList).toContain('mat-disabled');
     });

lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts

@@ -70,6 +70,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
     type: DatePickerType = 'datetime';
     maxDebounceTime = 500;
     expiryDate: string;
+    isSlideToggleChecked: boolean;
 
     @ViewChild('slideToggleExpirationDate', {static: true})
     slideToggleExpirationDate;
@@ -106,11 +107,14 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
                 this.isFileShared = true;
 
                 const expiryDate = this.updateForm();
-                if (expiryDate) {
+                if (expiryDate !== null && expiryDate !== undefined) {
                     this.time.enable();
                     this.linkWithExpirySettings = true;
+                    this.isSlideToggleChecked = true;
                 } else {
                     this.time.disable();
+                    this.isSlideToggleChecked = false;
+                    this.linkWithExpirySettings = false;
                 }
             }
         }
@@ -157,10 +161,12 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
 
     onToggleExpirationDate(slideToggle: MatSlideToggleChange) {
         if (slideToggle.checked) {
-            this.time.enable();
+                this.time.enable();
+                this.isSlideToggleChecked = true;
         } else {
-            this.time.disable();
+                this.time.disable();
-            this.time.setValue(null);
+                this.time.setValue(null);
+                this.deleteSharedLink(this.sharedId, true);
         }
     }
 
@@ -226,7 +232,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
         );
     }
 
-    deleteSharedLink(sharedId: string) {
+        deleteSharedLink(sharedId: string, dialogOpenFlag?: boolean) {
         this.isDisabled = true;
 
         this.sharedLinksApiService
@@ -241,7 +247,13 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
                             this.data.node.entry.properties['qshare:sharedId'] = null;
                             this.data.node.entry.properties['qshare:expiryDate'] = null;
                         }
-                        this.dialogRef.close(false);
+                        if (dialogOpenFlag) {
+                            this.createSharedLinks(this.data.node.entry.id);
+                            this.isSlideToggleChecked = false;
+                            this.linkWithExpirySettings = false;
+                        } else {
+                            this.dialogRef.close(false);
+                        }
                     }
                 }
             );
@@ -289,7 +301,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
             : date.utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ'))
             : null;
 
-        if (expiryDate !== null && this.sharedId) {
+        if (this.sharedId && expiryDate) {
                     this.isDisabled = true;
 
                     this.sharedLinksApiService
@@ -301,8 +313,8 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
                             this.handleError(response);
                         } else {
                             this.sharedLinkWithExpirySettings(expiryDate);
-                            this.updateEntryExpiryDate(date);
                             this.linkWithExpirySettings = true;
+                            this.updateEntryExpiryDate(date);
                         }
             });
         }

lib/content-services/src/lib/i18n/en.json

@@ -462,7 +462,7 @@
     "LINK-WITH-EXPIRY-SETTINGS": "New link has been generated with expiry settings",
     "EXPIRES": "Expires on",
     "LINK-EXPIRY-DATE": "Link Expiry Date",
-    "EXPIRATION-LABEL" : "Expiration Date",
+    "EXPIRATION-LABEL" : "MM/DD/YYYY",
     "CLIPBOARD-MESSAGE": "Link copied to the clipboard",
     "CLOSE": "Close",
     "COPY_BUTTON_LABEL": "Copy link",