Skip to content

style(ui): portlet search boxes, import dialogs and content compare fixes #35341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hmoreras wants to merge 2 commits into
base: main
Choose a base branch
from
Open

style(ui): portlet search boxes, import dialogs and content compare fixes #35341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad334ed
style(ui): portlet search boxes, import dialogs and content compare f…
hmoreras Apr 15, 2026
3361984
test(content-compare): add test for initial dropdown selection
hmoreras Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 56 additions & 52 deletions ...ortlets/dot-categories/src/lib/dot-categories-import/dot-categories-import.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,81 +14,85 @@
<div class="flex-1 min-h-0">
<p-fileupload
#fileUpload
[customUpload]="true"
accept=".csv"
mode="advanced"
chooseIcon="pi pi-upload"
[showUploadButton]="false"
[showCancelButton]="false"
[multiple]="false"
[auto]="false"
[customUpload]="true"
accept=".csv"
styleClass="w-full h-full"
(onSelect)="onFileSelect($event)"
(onClear)="onFileClear()"
[pt]="{
header: { class: 'hidden' },
header: { style: { padding: '0', border: '0' } },
Comment thread
hmoreras marked this conversation as resolved.
root: { class: 'h-full flex flex-col' },
content: { class: 'flex-1 min-h-0' }
}"
class="h-full"
data-testid="category-import-file">
<ng-template #empty>
<div class="flex flex-col items-center justify-center h-full py-8">
<ng-template #header />
<ng-template #content>
<div
class="group w-full rounded-xl bg-surface-100 border border-surface-200 p-8 flex flex-col items-center justify-center text-center gap-4 h-full cursor-pointer overflow-hidden"
(click)="fileUpload.choose()">
<div
class="rounded-full w-28 h-28 flex items-center justify-center mb-5 bg-primary-50">
<i class="pi pi-download text-primary text-5xl"></i>
class="w-24 h-24 shrink-0 rounded-full bg-primary-100 text-primary flex items-center justify-center transition-colors group-hover:bg-primary-200">
<i class="pi pi-upload !text-4xl" aria-hidden="true"></i>
</div>
<p class="text-xl font-bold mb-2">
{{ 'categories.import.drag-drop' | dm }}
</p>
<p class="text-sm text-color-secondary">
{{ 'categories.import.csv-only' | dm }}

<p class="text-2xl font-semibold text-color">
{{ 'categories.import.dropzone.prefix' | dm }}
<span class="text-primary hover:underline">
{{ 'categories.import.choose-file' | dm }}
</span>
{{ 'categories.import.dropzone.suffix' | dm }}
</p>
<p class="text-sm text-color-secondary flex items-center gap-1">
{{ 'categories.import.flat-only' | dm }}

<div class="flex items-center gap-2 text-base text-color-secondary">
<span>{{ 'categories.import.csv-only' | dm }}</span>
</div>

<div class="flex items-center gap-2 text-base text-color-secondary">
<span>{{ 'categories.import.flat-only' | dm }}</span>
<i
class="pi pi-info-circle cursor-pointer"
class="pi pi-info-circle"
[pTooltip]="'categories.import.flat-only.tooltip' | dm"
tooltipPosition="top"
tooltipPosition="right"
[attr.aria-label]="'categories.import.flat-only.tooltip' | dm"
data-testid="category-import-flat-only-icon"></i>
</p>
</div>
</ng-template>
<ng-template #content let-files>
@if ($selectedFile(); as file) {
<div class="flex items-center gap-2 py-3 px-4">
<i class="pi pi-file text-2xl text-color-secondary"></i>
<span class="flex-1 truncate">{{ file.name }}</span>
<p-button
icon="pi pi-times"
[rounded]="true"
[text]="true"
severity="danger"
(onClick)="onFileClear()"
[attr.aria-label]="'categories.import.remove-file' | dm"
data-testid="category-import-remove-file" />
</div>
}

@if ($selectedFile(); as file) {
<span class="text-sm font-medium text-color">{{ file.name }}</span>
}
</div>
</ng-template>
</p-fileupload>
</div>

<!-- Import Type -->
<div class="flex flex-col gap-3 mt-4">
<div class="flex flex-col gap-2 mt-4">
<span class="font-semibold">{{ 'categories.import.type' | dm }}</span>
<div class="flex items-center gap-2">
<p-radioButton
name="importType"
value="merge"
[(ngModel)]="importType"
inputId="import-type-merge"
data-testid="category-import-type-merge" />
<label for="import-type-merge">{{ 'categories.import.type.merge' | dm }}</label>
</div>
<div class="flex items-center gap-2">
<p-radioButton
name="importType"
value="replace"
[(ngModel)]="importType"
inputId="import-type-replace"
data-testid="category-import-type-replace" />
<label for="import-type-replace">{{ 'categories.import.type.replace' | dm }}</label>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<p-radioButton
name="importType"
value="merge"
[(ngModel)]="importType"
inputId="import-type-merge"
data-testid="category-import-type-merge" />
<label for="import-type-merge">{{ 'categories.import.type.merge' | dm }}</label>
</div>
<div class="flex items-center gap-2">
<p-radioButton
name="importType"
value="replace"
[(ngModel)]="importType"
inputId="import-type-replace"
data-testid="category-import-type-replace" />
<label for="import-type-replace">{{ 'categories.import.type.replace' | dm }}</label>
</div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/dot-plugins-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
}
<p-toolbar class="gap-1 px-3 justify-start border-x-0! border-t-0! flex-shrink-0">
<div class="flex w-full items-center gap-4 py-3">
<p-iconfield iconPosition="left" class="flex-1 max-w-xs">
<p-iconfield iconPosition="left">
<p-inputicon class="pi pi-search" />
<input
#searchInput
pInputText
type="text"
autocomplete="off"
class="w-full"
class="w-80"
[placeholder]="'plugins.search' | dm"
(input)="filterTable(searchInput.value)"
data-testid="plugins-search-input" />
Expand Down
2 changes: 2 additions & 0 deletions ...ent-compare/components/dot-content-compare-table/dot-content-compare-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@
@if ($showActions()) {
<div class="dot-content-compare-table__controls">
<p-select
[ngModel]="data.compare"
(onChange)="changeVersion.emit($event.value)"
[options]="data.versions"
dataKey="inode"
data-testid="versions-dropdown"
appendTo="body">
<ng-template let-selected pTemplate="selectedItem">
Expand Down
4 changes: 4 additions & 0 deletions ...-compare/components/dot-content-compare-table/dot-content-compare-table.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,10 @@ describe('DotContentCompareTableComponent', () => {
const dropdown: Select = de.query(By.css('p-select')).componentInstance;
expect(dropdown.options).toEqual(dotContentCompareTableDataMock.versions);
});
it('should show data.compare as the initially selected version in the dropdown', () => {
const dropdown: Select = de.query(By.css('p-select')).componentInstance;
expect(dropdown.value).toEqual(dotContentCompareTableDataMock.compare);
});
it('should show selectButton', () => {
const select: SelectButton = de.query(
By.css('[data-testId="show-diff"]')
Expand Down
13 changes: 8 additions & 5 deletions dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5855,7 +5855,7 @@ locales.variables=Variables
locales.edit.locale=Edit Locale
locales.add.locale=Add Locale
locales.menu=Menu
locales.search.placeholder=Search locales...
locales.search.placeholder=Search
locales.edit=Edit Locale
locales.push.publish=Push Publish
locales.delete=Delete
Expand Down Expand Up @@ -6619,7 +6619,7 @@ usage.dashboard.lastUpdated=Last Updated
usage.dashboard.cacheInfo=Data is cached and refreshed every 5 minutes

## Tags Portlet
tags.search.placeholder=Search tags...
tags.search.placeholder=Search
tags.export=Export
tags.export.all=Export All
tags.import=Import
Expand All @@ -6639,7 +6639,7 @@ tags.save=Save
tags.update=Update
tags.done=Done
tags.import.header=Import Tags
tags.import.instructions=Please upload the correspondent file you want to upload, such as....
tags.import.instructions=Please upload the correspondent file you want to upload.
tags.import.column.tag-name=Tag Name
tags.import.column.tag-name.description=The name of the tag (required)
tags.import.column.host-id=Host ID
Expand All @@ -6666,7 +6666,7 @@ plugins.load=Load
plugins.upload=Upload
plugins.refresh=Refresh
plugins.refresh-table=Refresh Table
plugins.search=Search plugins...
plugins.search=Search
plugins.show-undeployed=Show undeployed
plugins.extra-packages=Exported Packages
plugins.table.name=Name
Expand Down Expand Up @@ -6750,14 +6750,17 @@ categories.import.flat-only.tooltip=To import into nested categories, navigate t
categories.import.success={0} categories imported successfully.
categories.import.partial-success={0} categories imported. {1} failed.
categories.import.drag-drop=Drag & drop a CSV file or click to browse
categories.import.dropzone.prefix=Drag & drop files or
categories.import.choose-file=Choose CSV File
categories.import.dropzone.suffix=to upload
categories.import.remove-file=Remove file
categories.import.type=Import Type
categories.import.type.merge=Merge
categories.import.type.replace=Replace
categories.permissions=Permissions
categories.permissions.placeholder=Permissions for this category will be managed here.
categories.save=Save
categories.search.placeholder=Search categories...
categories.search.placeholder=Search
categories.table.header.children=Children
categories.table.header.key=Key
categories.table.header.name=Name
Expand Down
Loading