[ACA-4471] - Added show preview action for files in search results (#2169)

* [ACA-4472] - added preview button on info drawer

* [ACA-4472] - added preview button on info drawer

* [ACA-4472] - added preview button on info drawer

* [ACA-4472] - fixed lint

* [ACA-4472] - fixed unit test

* [ACA-4472] - fixed wrong import

* [ACA-4472] - reverted app.config

* [ACA-4472] - added some upgrades for styling

* [ACA-4472] - added some upgrades for styling

* [ACA-4472] - start fixing e2e

* [ACA-4472] - wrong whitespace

* [ACA-4471] - readded view button and fixed bug on closing

* [ACA-4471] - readded action

* [ACA-4238] - fix e2e #2

* [ACA-4471] - readded view button for e2e

* [ACA-4471] - readded view button for e2e

projects/aca-shared/rules/src/app.rules.ts

@@ -495,3 +495,16 @@ export function canShowLogout(context: AcaRuleContext): boolean {
 export function isLibraryManager(context: RuleContext): boolean {
   return hasLibrarySelected(context) && context.selection.library.entry && context.selection.library.entry.role === 'SiteManager';
 }
+
+/**
+ * Checks if the preview button for search results can be showed
+ * JSON ref: `canInfoPreview`
+ * @param context Rule execution context
+ */
+export function canInfoPreview(context: RuleContext): boolean {
+  return navigation.isSearchResults(context) && !isMultiselection(context) && !hasFolderSelected(context) && !navigation.isPreview(context);
+}
+
+export function showInfoSelectionButton(context: RuleContext): boolean {
+  return navigation.isSearchResults(context) && !navigation.isPreview(context);
+}

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -9,7 +9,7 @@
   >
     <adf-toolbar class="adf-toolbar--inline" info-drawer-buttons>
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+        <aca-toolbar-action [actionRef]="entry" [color]="entry?.color"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
 

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -27,12 +27,11 @@ import { Component, HostListener, Input, OnChanges, OnDestroy, OnInit } from '@a
 import { MinimalNodeEntity, MinimalNodeEntryEntity, SiteEntry } from '@alfresco/js-api';
 import { ContentActionRef, SidebarTabRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
-import { getAppSelection, SetInfoDrawerStateAction, ToggleInfoDrawerAction } from '@alfresco/aca-shared/store';
+import { getAppSelection, SetInfoDrawerStateAction, ToggleInfoDrawerAction, infoDrawerPreview } from '@alfresco/aca-shared/store';
 import { AppExtensionService } from '../../services/app.extension.service';
 import { ContentApiService } from '../../services/content-api.service';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-
 @Component({
   selector: 'aca-info-drawer',
   templateUrl: './info-drawer.component.html'
@@ -49,6 +48,7 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   tabs: Array<SidebarTabRef> = [];
   actions: Array<ContentActionRef> = [];
   onDestroy$ = new Subject<boolean>();
+  preventFromClosing = false;
 
   @HostListener('keydown.escape')
   onEscapeKeyboardEvent(): void {
@@ -65,12 +65,21 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
       .subscribe(() => {
         this.actions = this.extensions.getAllowedSidebarActions();
       });
+
+    this.store
+      .select(infoDrawerPreview)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((isInfoDrawerPreviewOpened) => {
+        this.preventFromClosing = isInfoDrawerPreviewOpened;
+      });
   }
 
   ngOnDestroy() {
     this.onDestroy$.next(true);
     this.onDestroy$.complete();
-    this.store.dispatch(new SetInfoDrawerStateAction(false));
+    if (!this.preventFromClosing) {
+      this.store.dispatch(new SetInfoDrawerStateAction(false));
+    }
   }
 
   ngOnChanges() {

projects/aca-shared/store/src/actions/app.actions.ts

@@ -44,7 +44,9 @@ export enum AppActionTypes {
   SetInfoDrawerState = 'SET_INFO_DRAWER_STATE',
   SetInfoDrawerMetadataAspect = 'SET_INFO_DRAWER_METADATA_ASPECT',
   CloseModalDialogs = 'CLOSE_MODAL_DIALOGS',
-  SetFileUploadingDialog = 'SET_FILE_UPLOADING_DIALOG'
+  SetFileUploadingDialog = 'SET_FILE_UPLOADING_DIALOG',
+  ShowInfoDrawerPreview = 'SHOW_INFO_DRAWER_PREVIEW',
+  SetInfoDrawerPreviewState = 'SET_INFO_DRAWER_PREVIEW_STATE'
 }
 
 export class SetSettingsParameterAction implements Action {
@@ -134,3 +136,13 @@ export class SetFileUploadingDialogAction implements Action {
 
   constructor(public payload: boolean) {}
 }
+
+export class ShowInfoDrawerPreviewAction implements Action {
+  readonly type = AppActionTypes.ShowInfoDrawerPreview;
+}
+
+export class SetInfoDrawerPreviewStateAction implements Action {
+  readonly type = AppActionTypes.SetInfoDrawerPreviewState;
+
+  constructor(public payload: boolean) {}
+}

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -39,6 +39,7 @@ export const getAppSelection = createSelector(selectApp, (state) => state.select
 export const getSharedUrl = createSelector(selectApp, (state) => state.sharedUrl);
 export const getNavigationState = createSelector(selectApp, (state) => state.navigation);
 export const isInfoDrawerOpened = createSelector(selectApp, (state) => state.infoDrawerOpened);
+export const infoDrawerPreview = createSelector(selectApp, (state) => state.infoDrawerPreview);
 export const showFacetFilter = createSelector(selectApp, (state) => state.showFacetFilter);
 export const getDocumentDisplayMode = createSelector(selectApp, (state) => state.documentDisplayMode);
 export const getRepositoryStatus = createSelector(selectApp, (state) => state.repository);

projects/aca-shared/store/src/states/app.state.ts

@@ -37,6 +37,7 @@ export interface AppState {
   user: ProfileState;
   navigation: NavigationState;
   infoDrawerOpened: boolean;
+  infoDrawerPreview: boolean;
   infoDrawerMetadataAspect: string;
   showFacetFilter: boolean;
   documentDisplayMode: string;

src/app/components/search/search-results/search-results.component.html

@@ -112,8 +112,33 @@
         </div>
       </div>
     </div>
-    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+    <div
-      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+      [ngClass]="(infoDrawerPreview$ | async) === true ? 'adf-search-results--right_panel_section-extended' : 'adf-search-results--right_panel_section'"
+      *ngIf="infoDrawerOpened$ | async">
+      <adf-viewer class="adf-search-results--embedded_viewer" [nodeId]="selection.last.entry.id" *ngIf="(infoDrawerPreview$ | async); else infoDrawerPanel">
+        <adf-viewer-toolbar>
+          <div class="adf-search-results--preview-toolbar">
+            <div>
+              <button mat-icon-button title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}" (click)="onDrawerClosed()">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+            <div>
+              <button mat-icon-button title="{{ 'ADF_VIEWER.ACTIONS.PREVIEW' | translate }}" color="accent" class="adf-search-results--visibility_button">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button mat-icon-button title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}" (click)="onPreviewClosed()">
+                <mat-icon>info_outline</mat-icon>
+              </button>
+            </div>
+          </div>
+        </adf-viewer-toolbar>
+      </adf-viewer>
+      <ng-template #infoDrawerPanel>
+        <div class="sidebar">
+          <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+        </div>
+      </ng-template>
     </div>
   </aca-page-layout-content>
 </aca-page-layout>

src/app/components/search/search-results/search-results.component.scss

@@ -29,6 +29,35 @@
     color: rgba(0, 0, 0, 0.54);
   }
 
+  &--embedded_viewer {
+    position: unset;
+    display: flex;
+    width: 100%;
+  }
+
+  &--right_panel_section {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  &--right_panel_section-extended {
+    display: flex;
+    justify-content: flex-start;
+    flex-basis: 55%;
+  }
+
+  &--preview-toolbar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 0px 5px;
+    padding-right: 24px;
+  }
+
+  &--visibility_button {
+    margin-right: 8px;
+  }
+
   .adf-search-filter {
     min-width: 260px;
     max-width: 320px;

src/app/components/search/search-results/search-results.component.ts

@@ -29,7 +29,16 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { SearchQueryBuilderService, SearchFilterComponent } from '@alfresco/adf-content-services';
 import { PageComponent } from '../../page.component';
 import { Store } from '@ngrx/store';
-import { AppStore, NavigateToFolder, SnackbarErrorAction, showFacetFilter } from '@alfresco/aca-shared/store';
+import {
+  AppStore,
+  NavigateToFolder,
+  SnackbarErrorAction,
+  showFacetFilter,
+  infoDrawerPreview,
+  ShowInfoDrawerPreviewAction,
+  SetInfoDrawerStateAction,
+  SetInfoDrawerPreviewStateAction
+} from '@alfresco/aca-shared/store';
 import { ContentManagementService } from '../../../services/content-management.service';
 import { AppConfigService, TranslationService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs';
@@ -46,6 +55,7 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
   searchFilter: SearchFilterComponent;
 
   showFacetFilter$: Observable<boolean>;
+  infoDrawerPreview$: Observable<boolean>;
 
   searchedWord: string;
   queryParamName = 'q';
@@ -73,6 +83,7 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
     };
 
     this.showFacetFilter$ = store.select(showFacetFilter);
+    this.infoDrawerPreview$ = store.select(infoDrawerPreview);
   }
 
   ngOnInit() {
@@ -239,4 +250,13 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
   hideSearchFilter() {
     return !this.totalResults && !this.hasSelectedFilters;
   }
+
+  onPreviewClosed() {
+    this.store.dispatch(new ShowInfoDrawerPreviewAction());
+  }
+
+  onDrawerClosed() {
+    this.store.dispatch(new SetInfoDrawerPreviewStateAction(false));
+    this.store.dispatch(new SetInfoDrawerStateAction(false));
+  }
 }

src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts

@@ -39,7 +39,7 @@ import { ToggleInfoDrawerAction, isInfoDrawerOpened } from '@alfresco/aca-shared
       [attr.title]="'APP.ACTIONS.DETAILS' | translate"
       (click)="onClick()"
     >
-      <mat-icon>info_outline</mat-icon>
+      <mat-icon>menu_open</mat-icon>
     </button>
   `,
   encapsulation: ViewEncapsulation.None,

src/app/extensions/core.extensions.module.ts

@@ -132,6 +132,8 @@ export class CoreExtensionsModule {
       canToggleFavorite: rules.canToggleFavorite,
       isLibraryManager: rules.isLibraryManager,
       canEditAspects: rules.canEditAspects,
+      canInfoPreview: rules.canInfoPreview,
+      showInfoSelectionButton: rules.showInfoSelectionButton,
 
       'app.selection.canDelete': rules.canDeleteSelection,
       'app.selection.file.canUnlock': rules.canUnlockFile,

src/app/material.module.ts

@@ -31,10 +31,11 @@ import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/d
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
-  imports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule],
+  imports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule, MatCardModule],
-  exports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule],
+  exports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule, MatCardModule],
   providers: [
     {
       provide: MAT_DIALOG_DEFAULT_OPTIONS,

src/app/store/initial-state.ts

@@ -48,6 +48,7 @@ export const INITIAL_APP_STATE: AppState = {
   },
   currentNodeVersion: null,
   infoDrawerOpened: false,
+  infoDrawerPreview: false,
   infoDrawerMetadataAspect: '',
   showFacetFilter: true,
   fileUploadingDialog: true,

src/app/store/reducers/app.reducer.ts

@@ -39,7 +39,8 @@ import {
   SetInfoDrawerMetadataAspectAction,
   SetHeaderColorAction,
   SetCurrentNodeVersionAction,
-  SetFileUploadingDialogAction
+  SetFileUploadingDialogAction,
+  SetInfoDrawerPreviewStateAction
 } from '@alfresco/aca-shared/store';
 import { INITIAL_APP_STATE } from '../initial-state';
 
@@ -98,6 +99,12 @@ export function appReducer(state: AppState = INITIAL_APP_STATE, action: Action):
     case AppActionTypes.SetFileUploadingDialog:
       newState = setUploadDialogVisibility(state, action as SetFileUploadingDialogAction);
       break;
+    case AppActionTypes.ShowInfoDrawerPreview:
+      newState = showInfoDrawerPreview(state);
+      break;
+    case AppActionTypes.SetInfoDrawerPreviewState:
+      newState = setInfoDrawerPreview(state, action as SetInfoDrawerPreviewStateAction);
+      break;
     default:
       newState = { ...state };
   }
@@ -186,6 +193,21 @@ function toggleInfoDrawer(state: AppState) {
   return newState;
 }
 
+function showInfoDrawerPreview(state: AppState) {
+  const newState = { ...state };
+
+  let value = state.infoDrawerPreview;
+  if (state.selection.isEmpty) {
+    value = false;
+  } else {
+    value = !value;
+  }
+
+  newState.infoDrawerPreview = value;
+
+  return newState;
+}
+
 function toggleDocumentDisplayMode(state: AppState) {
   return {
     ...state,
@@ -248,6 +270,13 @@ function setInfoDrawer(state: AppState, action: SetInfoDrawerStateAction) {
   };
 }
 
+function setInfoDrawerPreview(state: AppState, action: SetInfoDrawerPreviewStateAction) {
+  return {
+    ...state,
+    infoDrawerPreview: action.payload
+  };
+}
+
 function setInfoDrawerAspect(state: AppState, action: SetInfoDrawerMetadataAspectAction) {
   return {
     ...state,

src/assets/app.extensions.json

@@ -1116,8 +1116,30 @@
     "sidebar": {
       "toolbar": [
         {
-          "id": "app.sidebar.expand",
+          "id": "app.sidebar.preview",
           "order": 100,
+          "title": "Preview File",
+          "icon": "visibility",
+          "actions": {
+            "click": "SHOW_INFO_DRAWER_PREVIEW"
+          },
+          "rules": {
+            "visible": "canInfoPreview"
+          }
+        },
+        {
+          "id": "app.sidebar.infoDetails",
+          "order": 150,
+          "title": "Info Details",
+          "icon": "info_outline",
+          "color": "accent",
+          "rules": {
+            "visible": "showInfoSelectionButton"
+          }
+        },
+        {
+          "id": "app.sidebar.expand",
+          "order": 200,
           "title": "APP.INFO_DRAWER.TABS.EXPAND",
           "icon": "chevron_left",
           "actions": {

src/assets/i18n/en.json

@@ -564,7 +564,8 @@
     },
     "ADF_VIEWER": {
         "ACTIONS": {
-            "INFO": "View details"
+            "INFO": "View details",
+            "PREVIEW": "Show preview"
         }
     },
     "FILE_UPLOAD": {