diff --git a/core-web/libs/dotcms-scss/jsp/index.html b/core-web/libs/dotcms-scss/jsp/index.html index f7bc4e6b2372..1ba3793e780e 100644 --- a/core-web/libs/dotcms-scss/jsp/index.html +++ b/core-web/libs/dotcms-scss/jsp/index.html @@ -591,12 +591,19 @@

Tooltips

@@ -621,7 +628,9 @@

Tooltips

data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'ttBelow', position:['below-centered']" style="display: none; width: 100px"> - I'm below! + I'm + below + ! @@ -633,7 +642,11 @@

Tooltips

data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'ttRight', position:['after-centered']" style="display: none"> - I'm on the right!
(or left on RTL systems) + I'm on the + right + ! +
+ (or left on RTL systems) @@ -643,7 +656,11 @@

Tooltips

data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'ttLeft', position:['before-centered','after-centered']" style="display: none"> - I'm on the left!
(or right on RTL systems) + I'm on the + left + ! +
+ (or right on RTL systems) @@ -655,7 +672,9 @@

Tooltips

data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'ttAbove', position:['above-centered']" style="display: none"> - I'm above! + I'm + above + ! @@ -667,14 +686,14 @@

Tooltips

Dialogs

@@ -852,7 +871,8 @@

Buttons

Toggle -

+
+
@@ -1087,12 +1107,12 @@

dijit/form/CurrencyTextBox

dijit/form/NumberSpinner max=100

- + - + dijit/form/Select value="AK" aria-labelledby="l_selectEnabled"> Alabama - Alaska + + A + l + a + s + k + a + Arizona Arkansas - California - New
  Mexico + + C + a + l + i + f + o + r + n + i + a + + + New +
+   Mexico + Disabled: @@ -1143,33 +1169,39 @@

dijit/form/Select

disabled aria-labelledby="l_selectDisabled"> Alabama - Alaska + + A + l + a + s + k + a + Arizona Arkansas - California - New
  Mexico + + C + a + l + i + f + o + r + n + i + a + + + New +
+   Mexico +

dijit/form/FilteringSelect

- + dijit/form/FilteringSelect name:'state2' " /> - + dijit/form/FilteringSelect disabled:true, store:continentStore, name:'state2', searchAttr:'name' " /> - + dijit/form/SimpleTextarea data-dojo-props="height:175, extraPlugins:['|', 'createLink', 'fontName'], styleSheets:'./css/document.css'"> @@ -1295,8 +1328,9 @@

dijit/form/SimpleTextarea

data-dojo-props="height:175, extraPlugins:['|', 'createLink', 'fontName'], styleSheets:'./css/document.css', disabled:true"> @@ -1337,12 +1371,8 @@

Enabled

data-dojo-props="container:'rightDecoration', style:'width:2em;', maximum:100, count:6, numericMargin:1, constraints:{ pattern:'#' }">
- Slider2 Value: + Slider2 Value: +
Enabled
  • highest
    • -
    Value: +
    + Value:
    dijit/InlineEditBox + dijit/form/Textarea

    These links will - disable + + disable + / - enable + + enable + the text area above.

    @@ -1576,9 +1607,9 @@

    dijit/form/FilteringSelect + Inline + remote data store

    editor: "dijit/form/FilteringSelect", editorParams:{ store: continentStore, autoComplete: true, promptMessage: "Please enter a place"}, width:"300px" - ' - >The earth + '> + The earth + (HTML after)
    @@ -1593,9 +1624,18 @@

    Vertical Source

    -
    Item X
    -
    Item Y
    -
    Item Z
    +
    + Item + X +
    +
    + Item + Y +
    +
    + Item + Z +
    @@ -1605,9 +1645,18 @@

    Horizontal

    data-dojo-type="dojo/dnd/Source" data-dojo-props="horizontal: true" style="border: 3px solid #ccc; padding: 1em 3em"> -
    Item 1
    -
    Item 2
    -
    Item 3
    +
    + Item + 1 +
    +
    + Item + 2 +
    +
    + Item + 3 +
    @@ -1661,7 +1710,8 @@

    I am tab 4, inlined.

    I am whole slew of Widgets on a page. Jump to - dijit tests to test individual components. + dijit tests + to test individual components.

    There is a right-click [context] pop-up menu here, as well.

    @@ -1700,7 +1750,7 @@

    I am tab 4, inlined.

    style="display: none"> - + - + - + - + - + - + - + - + - + @@ -1029,7 +1047,10 @@

    Forms

    -
    First Name:
    +
    + + First Name: +
    Example Code

    Split Screen

    Demonstration of how to split a screen for a side navigation, folder - tree, or search interface.
    ALETR: + tree, or search interface. +
    + ALETR: Height of Dojo BorderContainer and internal wrappers must be set with JavaScript based of window size. See file /dotCMS/html/portlet/ext/useradmin/view_user.jsp for a working example. @@ -1531,20 +1552,23 @@

    Dojo Quick Reference

    Below are few example of commen Dojo functions used in the dotCMS. For other Dojo resources and examples checkout these other sites: - Dojo Demos + + Dojo Demos + | Dijit Button Test + rel="noopener"> + Dijit Button Test + | - Dojo Campus + + Dojo Campus +

    @@ -1573,9 +1597,9 @@

    Tool Tip

    - This is a tool tip + + This is a tool tip + 
    
                       <a href="#" id="tip1">Tool Tip</a>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
index 730897a6e2c9..dc95c00a2e24 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -25,17 +25,21 @@
    @if (metadata) { - {{ metadata.title }} + + {{ metadata.title }} + @if (metadata.width && metadata.height) {
    - {{ metadata.width }} x {{ metadata.height }} + + {{ metadata.width }} x {{ metadata.height }} +
    } @if (metadata.fileSize) {
    - {{ metadata.fileSize | dotFileSizeFormat }} + {{ metadata.fileSize | dotFileSizeFormat }}
    } } @@ -71,7 +75,7 @@ @if (downloadLink) { { + let spectator: Spectator; + let dotResourceLinksService: SpyObject; + + const createComponent = createComponentFactory({ + component: DotFileFieldPreviewComponent, + detectChanges: false, + providers: [provideHttpClient()], + componentProviders: [ + mockProvider(DotResourceLinksService, { + getFileResourceLinks: jest.fn().mockReturnValue( + of({ + configuredImageURL: 'testConfiguredImageURL', + idPath: 'testIdPath', + mimeType: 'testMimeType', + text: 'testText', + versionPath: 'testVersionPath' + }) + ) + }) + ] + }); + + describe('temp preview file', () => { + beforeEach(() => { + spectator = createComponent({ + props: { + previewFile: { + source: 'temp', + file: TEMP_FILE_MOCK + } + } as unknown + }); + dotResourceLinksService = spectator.inject(DotResourceLinksService, true); + }); + + it('should be created', () => { + spectator.detectChanges(); + expect(spectator.component).toBeTruthy(); + }); + }); + + describe('contentlet without content preview file', () => { + beforeEach(() => { + spectator = createComponent({ + props: { + previewFile: { + source: 'contentlet', + file: NEW_FILE_MOCK.entity + } + } as unknown + }); + dotResourceLinksService = spectator.inject(DotResourceLinksService, true); + }); + + it('should be created', () => { + spectator.detectChanges(); + expect(spectator.component).toBeTruthy(); + }); + + it('should be have a dot-contentlet-thumbnail', () => { + spectator.detectChanges(); + expect(spectator.query('dot-contentlet-thumbnail')).toBeTruthy(); + }); + + it('should show proper metadata', () => { + spectator.detectChanges(); + + const { title, width, height } = NEW_FILE_MOCK.entity.assetMetaData; + + const metadataTitleElement = spectator.query(byTestId('metadata-title')); + const metadataDimensionsElement = spectator.query(byTestId('metadata-dimensions')); + const metadataFileSizeElement = spectator.query(byTestId('metadata-file-size')); + + expect(metadataTitleElement).toHaveText(title); + expect(metadataDimensionsElement).toHaveText(`${width} x ${height}`); + expect(metadataFileSizeElement).toHaveText('3.70 MB'); + }); + + it('should show a dialog when click on the proper btn', async () => { + spectator.detectChanges(); + + const infoBtnElement = spectator.query(byTestId('info-btn')); + + const dialogComponent = spectator.query(Dialog); + + spectator.click(infoBtnElement); + expect(dialogComponent.visible).toBeTruthy(); + }); + + + it('should show a dialog when click on the proper responsive btn', async () => { + spectator.detectChanges(); + + const infoBtnElement = spectator.query(byTestId('info-btn-responsive')); + + const dialogComponent = spectator.query(Dialog); + + spectator.click(infoBtnElement); + expect(dialogComponent.visible).toBeTruthy(); + }); + + it('should call downloadAsset when click on the proper btn', async () => { + const spyWindowOpen = jest.spyOn(window, 'open'); + spyWindowOpen.mockImplementation(jest.fn()); + + const { inode } = NEW_FILE_MOCK.entity; + + const expectedUrl = `/contentAsset/raw-data/${inode}/asset?byInode=true&force_download=true`; + + spectator.detectChanges(); + + const downloadBtnElement = spectator.query(byTestId('download-btn')); + + spectator.click(downloadBtnElement); + expect(spyWindowOpen).toHaveBeenCalledWith(expectedUrl, '_self'); + }); + + it('should handle a error in fetchResourceLinks', async () => { + dotResourceLinksService.getFileResourceLinks.mockReturnValue(throwError('error')); + spectator.detectChanges(); + }); + + it('should there are the proper resources links', async () => { + spectator.detectChanges(); + + const infoBtnElement = spectator.query(byTestId('info-btn')); + + spectator.click(infoBtnElement); + + const links = spectator.queryAll('.file-info__item'); + const copyBtns = spectator.queryAll(DotCopyButtonComponent); + + expect(links.length).toBe(4); + expect(copyBtns.length).toBe(3); + }); + }); + + describe('contentlet with content preview file', () => { + beforeEach(() => { + spectator = createComponent({ + props: { + previewFile: { + source: 'contentlet', + file: NEW_FILE_EDITABLE_MOCK.entity + } + } as unknown + }); + dotResourceLinksService = spectator.inject(DotResourceLinksService, true); + }); + + it('should be created', () => { + spectator.detectChanges(); + expect(spectator.component).toBeTruthy(); + }); + }); +}); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts index e8728896c9e4..8e9058f27097 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts @@ -136,7 +136,7 @@ export class DotFileFieldPreviewComponent implements OnInit { * @memberof DotFileFieldPreviewComponent */ toggleShowDialog() { - this.$showDialog.set(!this.$showDialog()); + this.$showDialog.update((value) => !value); } /** diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.stories.ts index 035469200a06..30af8811f100 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.stories.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.stories.ts @@ -21,7 +21,12 @@ import { FileFieldStore } from './store/file-field.store'; import { MessageServiceMock } from './utils/mocks'; import { DotEditContentService } from '../../services/dot-edit-content.service'; -import { BINARY_FIELD_MOCK, FILE_FIELD_MOCK, IMAGE_FIELD_MOCK, NEW_FILE_MOCK } from '../../utils/mocks'; +import { + BINARY_FIELD_MOCK, + FILE_FIELD_MOCK, + IMAGE_FIELD_MOCK, + NEW_FILE_MOCK +} from '../../utils/mocks'; type Args = DotEditContentFileFieldComponent & { field: DotCMSContentTypeField; diff --git a/core-web/libs/edit-content/src/lib/utils/mocks.ts b/core-web/libs/edit-content/src/lib/utils/mocks.ts index 713a6e02ba33..1abbb1a9e015 100644 --- a/core-web/libs/edit-content/src/lib/utils/mocks.ts +++ b/core-web/libs/edit-content/src/lib/utils/mocks.ts @@ -12,6 +12,7 @@ import { DotCMSContentType, DotCMSContentTypeField, DotCMSContentTypeLayoutRow, + DotCMSTempFile, FeaturedFlags } from '@dotcms/dotcms-models'; import { MockDotMessageService } from '@dotcms/utils-testing'; @@ -1394,56 +1395,58 @@ export const NEW_FILE_MOCK: { entity: DotCMSContentlet } = { __IS_NEW_CONTENT__: true, __icon__: 'Icon', archived: false, - asset: '/dA/3e90dce2-c86e-4a54-acca-78ac38219387/asset/enterprise-angular.pdf', - assetContentAsset: '3e90dce2-c86e-4a54-acca-78ac38219387/asset', + asset: '/dA/a991ddc5-39dc-4782-bc04-f4c4fa0ccff6/asset/image 2.jpg', + assetContentAsset: 'a991ddc5-39dc-4782-bc04-f4c4fa0ccff6/asset', assetMetaData: { - contentType: 'application/pdf', + contentType: 'image/jpeg', editableAsText: false, - fileSize: 13909932, - isImage: false, - length: 13909932, - modDate: 1727356106050, - name: 'enterprise-angular.pdf', - sha256: '7f8bc1f6485876ca6d49be77917bd35ae3de99f9a56ff94a42df3217419b30cd', - title: 'Enterprise Angular: Micro Frontends and Moduliths with Angular', - version: 20220201 + fileSize: 3878653, + height: 1536, + isImage: true, + length: 3878653, + modDate: 1727377876393, + name: 'image 2.jpg', + sha256: '132597a99d807d12d0b13d9bf3149c6644d9f252e33896d95fc9fd177320da62', + title: 'image 2.jpg', + version: 20220201, + width: 2688 }, - assetVersion: '/dA/1bce4dc1-4bcf-4623-8219-08e994b41aa1/asset/enterprise-angular.pdf', + assetVersion: '/dA/fe160e65-5cf4-4ef6-9b1d-47c5326fec30/asset/image 2.jpg', baseType: 'DOTASSET', contentType: 'dotAsset', - creationDate: 1727356106091, - extension: 'pdf', + creationDate: 1727377876409, + extension: 'jpg', folder: 'SYSTEM_FOLDER', hasLiveVersion: true, hasTitleImage: true, host: 'SYSTEM_HOST', hostName: 'System Host', - identifier: '3e90dce2-c86e-4a54-acca-78ac38219387', - inode: '1bce4dc1-4bcf-4623-8219-08e994b41aa1', + identifier: 'a991ddc5-39dc-4782-bc04-f4c4fa0ccff6', + inode: 'fe160e65-5cf4-4ef6-9b1d-47c5326fec30', isContentlet: true, languageId: 1, live: true, locked: false, - mimeType: 'application/pdf', - modDate: '1727356106088', + mimeType: 'image/jpeg', + modDate: '1727377876407', modUser: 'dotcms.org.1', modUserName: 'Admin User', - name: 'enterprise-angular.pdf', + name: 'image 2.jpg', owner: 'dotcms.org.1', ownerName: 'Admin User', - path: '/content.1bce4dc1-4bcf-4623-8219-08e994b41aa1', - publishDate: 1727356106149, + path: '/content.fe160e65-5cf4-4ef6-9b1d-47c5326fec30', + publishDate: 1727377876428, publishUser: 'dotcms.org.1', publishUserName: 'Admin User', - size: 13909932, + size: 3878653, sortOrder: 0, stInode: 'f2d8a1c7-2b77-2081-bcf1-b5348988c08d', statusIcons: "", - title: 'enterprise-angular.pdf', + title: 'image 2.jpg', titleImage: 'asset', type: 'dotasset', - url: '/content.1bce4dc1-4bcf-4623-8219-08e994b41aa1', + url: '/content.fe160e65-5cf4-4ef6-9b1d-47c5326fec30', working: true } }; @@ -1504,6 +1507,31 @@ export const NEW_FILE_EDITABLE_MOCK: { entity: DotCMSContentlet } = { titleImage: 'TITLE_IMAGE_NOT_FOUND', type: 'dotasset', url: '/content.eccdb89f-5aa1-4f0c-a9ec-aa97304d80d5', - working: true + working: true, + content: 'my content' } }; + +export const TEMP_FILE_MOCK: DotCMSTempFile = { + fileName: 'enterprise-angular.pdf', + folder: '', + id: 'temp_1e8021f973', + image: false, + length: 13909932, + metadata: { + contentType: 'application/pdf', + editableAsText: false, + fileSize: 13909932, + isImage: false, + length: 13909932, + modDate: 1727375044693, + name: 'enterprise-angular.pdf', + sha256: '7f8bc1f6485876ca6d49be77917bd35ae3de99f9a56ff94a42df3217419b30cd', + title: 'enterprise-angular.pdf', + version: 20220201 + }, + mimeType: 'application/pdf', + referenceUrl: '/dA/temp_1e8021f973/tmp/enterprise-angular.pdf', + thumbnailUrl: + '/contentAsset/image/temp_1e8021f973/tmp/filter/Thumbnail/thumbnail_w/250/thumbnail_h/250/enterprise-angular.pdf' +};
    I am tab 4, inlined.
    I am tab 4, inlined.

    dotCMS UI Style Guide

    - Code Style Guide + + + Code Style Guide + + | Dojo Demos + rel="noopener"> + Dojo Demos + | Dijit Button Test + rel="noopener"> + Dijit Button Test + | - Dojo Campus + + Dojo Campus +
    @@ -451,42 +451,60 @@

    Action Icons

    		 Work Flow Task New + Work Flow Task + New + newWorkflowIcon
    Work Flow Task Cancel + Work Flow Task + Cancel + cancelWorkflowIcon
    Work Flow Task Resolve + Work Flow Task + Resolve + resolveWorkflowIcon
    Work Flow Task Assign + Work Flow Task + Assign + assignWorkflowIcon
    Work Flow Task Delete + Work Flow Task + Delete + deleteWorkflowIcon
    Work Flow Task Reopen + Work Flow Task + Reopen + reopenWorkflowIcon