From b1abe2c8a601cbf70648d1ca1cb6081724e47d7d Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 10 Sep 2024 10:07:18 -0400 Subject: [PATCH] ACS-8227: remove internal mime type icon pipe (#10142) --- docs/README.md | 1 - docs/core/components/viewer.component.md | 2 -- docs/core/pipes/mime-type-icon.pipe.md | 30 ----------------- docs/core/services/thumbnail.service.md | 13 ++++---- docs/versionIndex.md | 1 - .../components/alfresco-viewer.component.html | 1 - .../alfresco-viewer.component.spec.ts | 6 ++-- .../components/alfresco-viewer.component.ts | 7 ++-- lib/core/src/lib/i18n/en.json | 1 + lib/core/src/lib/pipes/mime-type-icon.pipe.ts | 31 ------------------ lib/core/src/lib/pipes/pipe.module.ts | 2 -- lib/core/src/lib/pipes/public-api.ts | 1 - .../viewer/components/viewer.component.html | 4 +-- .../viewer/components/viewer.component.scss | 2 ++ .../components/viewer.component.spec.ts | 32 ------------------- .../lib/viewer/components/viewer.component.ts | 20 ++++++++---- 16 files changed, 31 insertions(+), 123 deletions(-) delete mode 100644 docs/core/pipes/mime-type-icon.pipe.md delete mode 100644 lib/core/src/lib/pipes/mime-type-icon.pipe.ts diff --git a/docs/README.md b/docs/README.md index f4bbc360dd..f2b95bd079 100644 --- a/docs/README.md +++ b/docs/README.md @@ -181,7 +181,6 @@ A collection of Angular components for generic use. | [Format Space pipe](core/pipes/format-space.pipe.md) | Replaces all the white space in a string with a supplied character. | [Source](../lib/core/src/lib/pipes/format-space.pipe.ts) | | [Full name pipe](core/pipes/full-name.pipe.md) | Joins the first and last name properties from a `UserLike` object into a single string. | [Source](../lib/core/src/lib/pipes/full-name.pipe.ts) | | [Localized Date pipe](core/pipes/localized-date.pipe.md) | Converts a date to a given format and locale. | [Source](../lib/core/src/lib/pipes/localized-date.pipe.ts) | -| [Mime Type Icon pipe](core/pipes/mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/src/lib/pipes/mime-type-icon.pipe.ts) | | [Multi Value Pipe](core/pipes/multi-value.pipe.md) | Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is the comma , however, you can set your own separator in the params of the pipe. | [Source](../lib/core/src/lib/pipes/multi-value.pipe.ts) | | [Node Name Tooltip pipe](core/pipes/node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/content-services/src/lib/pipes/node-name-tooltip.pipe.ts) | | [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) | diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md index 31c4036bcf..47b2504c04 100644 --- a/docs/core/components/viewer.component.md +++ b/docs/core/components/viewer.component.md @@ -74,7 +74,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl | canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. | | fileName | `string` | | Override Content filename. | | mimeType | `string` | | Overload mimeType | -| originalMimeType | `string` | | Overload originalMimeType | | overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. | | readOnly | `boolean` | true | Enable when where is possible the editing functionalities | | allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. | @@ -121,7 +120,6 @@ You can provide custom file parameters, for example a value for the `mimeType` o [fileName]="fileName" [allowGoBack]="false" [mimeType]="mimeType" - [originalMimeType]="originalMimeType" [urlFile]="fileUrl"> ``` diff --git a/docs/core/pipes/mime-type-icon.pipe.md b/docs/core/pipes/mime-type-icon.pipe.md deleted file mode 100644 index 146c2af181..0000000000 --- a/docs/core/pipes/mime-type-icon.pipe.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -Title: Mime Type Icon pipe -Added: v2.0.0 -Status: Active ---- - -# [Mime Type Icon pipe](../../../lib/core/src/lib/pipes/mime-type-icon.pipe.ts "Defined in mime-type-icon.pipe.ts") - -Retrieves an icon to represent a MIME type. - -## Basic Usage - - - -```HTML -
- -
-``` - - - -## Details - -The pipe takes a MIME type as input and returns the URL of an SVG file that -symbolizes that type (see the [Thumbnail service](../services/thumbnail.service.md) for the mapping between types and icons). The pipe will return a "miscellaneous" icon when no specific mapping is defined. - -## See also - -- [Thumbnail service](../services/thumbnail.service.md) diff --git a/docs/core/services/thumbnail.service.md b/docs/core/services/thumbnail.service.md index d10c61a0ba..d7213acfce 100644 --- a/docs/core/services/thumbnail.service.md +++ b/docs/core/services/thumbnail.service.md @@ -49,11 +49,14 @@ and icons is shown in the table below: All the ADF icons for MIME types are now registered into the [`MatIconRegistry`](https://material.angular.io/components/icon/api), so you can use all the icons via the <mat-icon> tag: -```javascript +```typescript import { ThumbnailService } from '@alfresco/adf-core'; -constructor(public thumbnailService: ThumbnailService) { -}‍‍‍‍‍‍‍‍ +class MyComponent { + constructor(public thumbnailService: ThumbnailService) { + + } +} ``` ```html @@ -62,7 +65,3 @@ PDF GIF ..... ``` - -## See also - -- [Mime type icon pipe](../pipes/mime-type-icon.pipe.md) diff --git a/docs/versionIndex.md b/docs/versionIndex.md index eeab83126d..12a3bf2340 100644 --- a/docs/versionIndex.md +++ b/docs/versionIndex.md @@ -576,7 +576,6 @@ backend services have been tested with each released version of ADF. - [Log service](core/services/log.service.md) - [Login component](core/components/login.component.md) - [Logout directive](core/directives/logout.directive.md) -- [Mime type icon pipe](core/pipes/mime-type-icon.pipe.md) - [Node delete directive](content-services/directives/node-delete.directive.md) - [Node favorite directive](content-services/directives/node-favorite.directive.md) - [Node name tooltip pipe](core/pipes/node-name-tooltip.pipe.md) diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html index cbe29f41a5..3dc32a9443 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html @@ -20,7 +20,6 @@ [hideInfoButton]="hideInfoButton" [fileName]="fileName" [mimeType]="mimeType" - [originalMimeType]="originalMimeType" [urlFile]="urlFileContent" [tracks]="tracks" [readOnly]="readOnly" diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts index 1979e3f401..a7c7e2f5da 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts @@ -455,8 +455,8 @@ describe('AlfrescoViewerComponent', () => { // }); - describe('originalMimeType', () => { - it('should set originalMimeType based on nodeData content', async () => { + describe('mimeType', () => { + it('should set mime type based on nodeData content', async () => { const defaultNode: Node = { id: 'mock-id', name: 'Mock Node', @@ -488,7 +488,7 @@ describe('AlfrescoViewerComponent', () => { } as Node); await fixture.whenStable(); - expect(component.originalMimeType).toEqual('application/msWord'); + expect(component.mimeType).toEqual('application/msWord'); }); }); diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts index e7abd42814..c9f09f22b2 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts @@ -211,7 +211,6 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy { urlFileContent: string; fileName: string; mimeType: string; - originalMimeType: string; nodeEntry: NodeEntry; tracks: Track[] = []; readOnly: boolean = true; @@ -344,8 +343,10 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy { } if (nodeRendition) { urlFileContent = nodeRendition.url; - mimeType = nodeRendition.mimeType; - this.originalMimeType = nodeData?.content?.mimeType; + + const nodeMimeType = nodeData?.content?.mimeType; + const renditionMimeType = nodeRendition.mimeType; + mimeType = nodeMimeType || renditionMimeType; } } else if (viewerType === 'media') { this.tracks = await this.renditionService.generateMediaTracksRendition(this.nodeId); diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index 24547c75ea..bce017c0b8 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -436,6 +436,7 @@ "WAIT": "Wait" }, "ARIA": { + "MIME_TYPE_ICON": "File type icon", "PREVIOUS_PAGE": "Previous page", "NEXT_PAGE": "Next page", "ZOOM_IN": "Zoom in", diff --git a/lib/core/src/lib/pipes/mime-type-icon.pipe.ts b/lib/core/src/lib/pipes/mime-type-icon.pipe.ts deleted file mode 100644 index 3ed23a1ed1..0000000000 --- a/lib/core/src/lib/pipes/mime-type-icon.pipe.ts +++ /dev/null @@ -1,31 +0,0 @@ -/*! - * @license - * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Pipe, PipeTransform } from '@angular/core'; -import { ThumbnailService } from '../common/services/thumbnail.service'; - -@Pipe({ - name: 'adfMimeTypeIcon', - standalone: true -}) -export class MimeTypeIconPipe implements PipeTransform { - constructor(private thumbnailService: ThumbnailService) {} - - transform(text: string): string { - return this.thumbnailService.getMimeTypeIcon(text); - } -} diff --git a/lib/core/src/lib/pipes/pipe.module.ts b/lib/core/src/lib/pipes/pipe.module.ts index f7c7d193c4..f75f6891b2 100644 --- a/lib/core/src/lib/pipes/pipe.module.ts +++ b/lib/core/src/lib/pipes/pipe.module.ts @@ -18,7 +18,6 @@ import { NgModule } from '@angular/core'; import { FileSizePipe } from './file-size.pipe'; -import { MimeTypeIconPipe } from './mime-type-icon.pipe'; import { HighlightPipe } from './text-highlight.pipe'; import { TimeAgoPipe } from './time-ago.pipe'; import { InitialUsernamePipe } from './user-initial.pipe'; @@ -38,7 +37,6 @@ export const CORE_PIPES = [ TimeAgoPipe, FileSizePipe, HighlightPipe, - MimeTypeIconPipe, FullNamePipe, FormatSpacePipe, FileTypePipe, diff --git a/lib/core/src/lib/pipes/public-api.ts b/lib/core/src/lib/pipes/public-api.ts index 680a1e952b..0d56cb670a 100644 --- a/lib/core/src/lib/pipes/public-api.ts +++ b/lib/core/src/lib/pipes/public-api.ts @@ -21,7 +21,6 @@ export * from './file-type.pipe'; export * from './format-space.pipe'; export * from './full-name.pipe'; export * from './localized-date.pipe'; -export * from './mime-type-icon.pipe'; export * from './multi-value.pipe'; export * from './text-highlight.pipe'; export * from './time-ago.pipe'; diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html index b97910ec33..73d3887d08 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.html +++ b/lib/core/src/lib/viewer/components/viewer.component.html @@ -43,8 +43,8 @@ navigate_before {{ fileName }} diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss index 05d5362bfc..6b569f034b 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ b/lib/core/src/lib/viewer/components/viewer.component.scss @@ -28,6 +28,8 @@ vertical-align: middle; height: 18px; width: 18px; + margin-left: 4px; + margin-right: 4px; } &-toolbar { diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer.component.spec.ts index 8aecc8bace..4e73576d28 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.spec.ts +++ b/lib/core/src/lib/viewer/components/viewer.component.spec.ts @@ -99,38 +99,6 @@ describe('ViewerComponent', () => { }); }); - describe('originalMimeType', () => { - const getMimeTypeIconElement = () => fixture.nativeElement.querySelector('.adf-viewer__mimeicon'); - - it('should set alt attribute to originalMimeType when originalMimeType is provided', () => { - component.originalMimeType = 'image/png'; - fixture.detectChanges(); - const altAttribute: string = getMimeTypeIconElement().getAttribute('alt'); - expect(altAttribute).toBe('image/png'); - }); - - it('should set src attribute based on originalMimeType when originalMimeType is provided', () => { - component.originalMimeType = 'image'; - fixture.detectChanges(); - const srcAttribute: string = getMimeTypeIconElement().getAttribute('src'); - expect(srcAttribute).toContain('image'); - }); - - it('should set alt attribute to mimeType when originalMimeType is not provided', () => { - component.mimeType = 'application/pdf'; - fixture.detectChanges(); - const altAttribute: string = getMimeTypeIconElement().getAttribute('alt'); - expect(altAttribute).toBe('application/pdf'); - }); - - it('should set src attribute based on mimeType when originalMimeType is not provided', () => { - component.mimeType = 'image'; - fixture.detectChanges(); - const srcAttribute: string = getMimeTypeIconElement().getAttribute('src'); - expect(srcAttribute).toContain('image'); - }); - }); - describe('File Name Test', () => { it('should fileName be set by urlFile input if the fileName is not provided as Input', () => { component.fileName = ''; diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts index 9bbd11d270..41bf90764d 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.ts +++ b/lib/core/src/lib/viewer/components/viewer.component.ts @@ -23,6 +23,7 @@ import { ElementRef, EventEmitter, HostListener, + inject, Input, OnChanges, OnDestroy, @@ -52,7 +53,8 @@ import { ViewerSidebarComponent } from './viewer-sidebar.component'; import { ViewerToolbarComponent } from './viewer-toolbar.component'; import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component'; import { ViewerToolbarCustomActionsComponent } from './viewer-toolbar-custom-actions.component'; -import { MimeTypeIconPipe } from '../../pipes'; +import { IconComponent } from '../../icon'; +import { ThumbnailService } from '../../common'; const DEFAULT_NON_PREVIEW_CONFIG = { enableDownloadPrompt: false, @@ -84,11 +86,13 @@ const DEFAULT_NON_PREVIEW_CONFIG = { ViewerSidebarComponent, ViewerToolbarActionsComponent, ViewerToolbarCustomActionsComponent, - MimeTypeIconPipe + IconComponent ], providers: [ViewUtilService] }) export class ViewerComponent implements OnDestroy, OnInit, OnChanges { + private thumbnailService = inject(ThumbnailService); + @ContentChild(ViewerToolbarComponent) toolbar: ViewerToolbarComponent; @@ -208,10 +212,6 @@ export class ViewerComponent implements OnDestroy, OnInit, OnChanges { @Input() mimeType: string; - /** Overload originalMimeType*/ - @Input() - originalMimeType: string; - /** * Context object available for binding by the local sidebarRightTemplate with let declarations. */ @@ -291,6 +291,7 @@ export class ViewerComponent implements OnDestroy, OnInit, OnChanges { private isDialogVisible: boolean = false; public downloadPromptTimer: number; public downloadPromptReminderTimer: number; + public mimeTypeIconUrl: string; constructor( private el: ElementRef, @@ -300,15 +301,20 @@ export class ViewerComponent implements OnDestroy, OnInit, OnChanges { ) {} ngOnChanges(changes: SimpleChanges) { - const { blobFile, urlFile } = changes; + const { blobFile, urlFile, mimeType } = changes; if (blobFile?.currentValue) { this.mimeType = blobFile.currentValue.type; + this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(blobFile.currentValue.type); } if (urlFile?.currentValue) { this.fileName ||= this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue); } + + if (mimeType?.currentValue) { + this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(mimeType.currentValue); + } } ngOnInit(): void {