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

## What does this PR do?

Addresses several UI inconsistencies across recently migrated portlets.

## Changes

- **Search boxes (categories, tags, locales, plugins):** Enforced
consistent `w-80` (320px) width on all search inputs; simplified
placeholder text to `Search` across all four portlets
- **Tags import dialog:** Removed redundant `", such as...."` text from
the instructions copy, ending the sentence with a period
- **Categories import dialog:** Unified the `p-fileupload` dropzone
template to match the tags/plugins pattern (icon, layout,
`#content`-only approach); added `shrink-0` to the icon container to
prevent oval distortion when dialog space is constrained; put Import
Type radio buttons on the same row (`gap-3`) to reduce vertical overflow
- **Content compare:** Fixed the Previous version `p-select` dropdown
not showing a selected value on first load by binding
`[ngModel]="data.compare"` and adding `dataKey="inode"` for reliable
object matching

## Closes

Closes #35274

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: hmoreras

core-web/libs/portlets/dot-categories/src/lib/dot-categories-import/dot-categories-import.component.html

@@ -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' } },
                 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>
 

core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/dot-plugins-list.component.html

@@ -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" />

core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.html

@@ -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">

core-web/libs/portlets/edit-ema/ui/src/lib/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.spec.ts

@@ -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"]')

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties

@@ -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
@@ -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
@@ -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
@@ -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
@@ -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