Merge branch 'main' into issue-30288-small-fixes

.github/workflows/issue_comp_link-issue-to-pr.yml

@@ -0,0 +1,102 @@
+name: Link Issue to PR
+
+on:
+  workflow_call:
+    inputs:
+      pr_branch:
+        description: 'Pull Request branch'
+        type: string
+        required: true
+  workflow_dispatch:
+    inputs:
+      pr_branch:
+        description: 'Pull Request branch'
+        type: string
+        required: true
+      pr_url:
+        description: 'Pull Request URL'
+        type: string
+        required: true
+
+env:
+  GH_TOKEN: ${{ secrets.CI_MACHINE_TOKEN }}
+
+jobs:
+  add-issue-to-pr:
+    runs-on: ubuntu-latest
+
+    steps:
+      - run: echo 'GitHub context'
+        env:
+          GITHUB_CONTEXT: ${{ toJson(github) }}
+
+      - name: Extract issue number from branch name
+        id: extract_issue_number
+        run: |
+          branch_name="${{ inputs.pr_branch }}"
+          if [[ "$branch_name" =~ ^([0-9]+)- ]]; then
+            issue_number="${BASH_REMATCH[1]}"
+          elif [[ "$branch_name" =~ ^issue-([0-9]+)- ]]; then
+            issue_number="${BASH_REMATCH[1]}"
+          else
+            echo "Branch name doesn't match the expected pattern"
+            exit 1
+          fi
+          
+          echo "issue_number=$issue_number" >> "$GITHUB_OUTPUT"
+
+      - name: Get existing issue comments
+        id: get_comments
+        run: |
+          comments="$(\
+            curl -s \
+              -H "Accept: application/vnd.github+json" \
+              -H "Authorization: Bearer ${{ env.GH_TOKEN }}" \
+              -H "X-GitHub-Api-Version: 2022-11-28" \
+              https://api.github.com/repos/${{ github.repository }}/issues/${{ steps.extract_issue_number.outputs.issue_number }}/comments \
+            | jq -c .
+          )"
+          
+          echo "comments=${comments}" >> "$GITHUB_OUTPUT"
+
+      - name: Check if PR comment exists
+        id: check_comment
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const prUrl = '${{ inputs.pr_url }}';
+            let prList = `PRs:\n- ${prUrl}`;
+            let existingCommentId = '';
+            const comments = JSON.parse('${{ steps.get_comments.outputs.comments }}'.replace('\n', '\\n'));
+            
+            for(comment of comments) {
+              const commentBody = comment.body;
+              if (commentBody.startsWith('PRs:')) {
+                existingCommentId = comment.id;
+                prList = `${commentBody}\n- ${prUrl}`;
+                break;
+              }
+            }
+            
+            core.setOutput('pr_list', prList);
+            core.setOutput('existing_comment_id', existingCommentId);
+
+      - name: Update or create comment
+        if: steps.check_comment.outputs.existing_comment_id == ''
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ steps.extract_issue_number.outputs.issue_number }}
+          body: ${{ steps.check_comment.outputs.pr_list }}
+
+      - name: Update existing comment
+        if: steps.check_comment.outputs.existing_comment_id != ''
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const prs = ${{ toJSON(steps.check_comment.outputs.pr_list) }}.split('\n');
+            await github.rest.issues.updateComment({
+              owner: '${{ github.repository_owner }}',
+              repo: '${{ github.event.repository.name }}',
+              comment_id: ${{ steps.check_comment.outputs.existing_comment_id }},
+              body: prs.join('\n'),
+            });

.github/workflows/issue_comp_link-pr-to-issue.yml

@@ -1,4 +1,3 @@
-# action.yml
 name: 'Link Pull Request to Issue'
 on:
   workflow_call:

.github/workflows/issue_open-pr.yml

@@ -0,0 +1,12 @@
+name: PR opened
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  add-issue-to-pr:
+    name: Add Issue to PR
+    uses: ./.github/workflows/issue_comp-link-issue-to-pr.yml
+    with:
+      pr_branch: ${{ github.head_ref }}

core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts

@@ -87,18 +87,30 @@ export class DotUploadFileService {
     }
 
     /**
-     * Uploads a file to dotCMS and creates a new dotAsset contentlet
-     * @param file the file to be uploaded
-     * @returns an Observable that emits the created contentlet
+     * Uploads a file or a string as a dotAsset contentlet.
+     *
+     * If a File is passed, it will be uploaded and the asset will be created
+     * with the file name as the contentlet name.
+     *
+     * If a string is passed, it will be used as the asset id.
+     *
+     * @param file The file to be uploaded or the asset id.
+     * @returns An observable that resolves to the created contentlet.
      */
-    uploadDotAsset(file: File) {
-        const formData = new FormData();
-        formData.append('file', file);
+    uploadDotAsset(file: File | string): Observable<DotCMSContentlet> {
+        if (file instanceof File) {
+            const formData = new FormData();
+            formData.append('file', file);
 
-        return this.#workflowActionsFireService.newContentlet<DotCMSContentlet>(
-            'dotAsset',
-            { file: file.name },
-            formData
-        );
+            return this.#workflowActionsFireService.newContentlet<DotCMSContentlet>(
+                'dotAsset',
+                { file: file.name },
+                formData
+            );
+        }
+
+        return this.#workflowActionsFireService.newContentlet<DotCMSContentlet>('dotAsset', {
+            asset: file
+        });
     }
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts

@@ -26,7 +26,7 @@ import {
     DotCopyButtonComponent
 } from '@dotcms/ui';
 
-import { DotPreviewResourceLink, PreviewFile } from '../../models';
+import { DotPreviewResourceLink, UploadedFile } from '../../models';
 import { getFileMetadata } from '../../utils';
 
 @Component({
@@ -53,7 +53,7 @@ export class DotFileFieldPreviewComponent implements OnInit {
      *
      * @memberof DotFileFieldPreviewComponent
      */
-    $previewFile = input.required<PreviewFile>({ alias: 'previewFile' });
+    $previewFile = input.required<UploadedFile>({ alias: 'previewFile' });
     /**
      * Remove file
      *

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.html

@@ -0,0 +1,52 @@
+<form (ngSubmit)="onSubmit()" [formGroup]="form" class="url-mode__form" data-testId="form">
+    <div class="url-mode__input-container">
+        <label for="url-input">{{ 'dot.file.field.action.import.from.url' | dm }}</label>
+        <input
+            id="url-input"
+            type="text"
+            autocomplete="off"
+            formControlName="url"
+            pInputText
+            placeholder="https://www.dotcms.com/image.png"
+            aria-label="URL input field"
+            data-testId="url-input" />
+        <div class="error-messsage__container">
+            @let error = store.error();
+            @if (error) {
+                <small class="p-invalid" data-testId="error-msg">
+                    {{ error | dm }}
+                </small>
+            } @else {
+                <dot-field-validation-message
+                    [message]="'dot.file.field.action.import.from.url.error.message' | dm"
+                    [field]="form.get('url')"
+                    data-testId="error-message" />
+            }
+        </div>
+    </div>
+    <div class="url-mode__actions">
+        <p-button
+            (click)="cancelUpload()"
+            [label]="'dot.common.cancel' | dm"
+            styleClass="p-button-outlined"
+            type="button"
+            aria-label="Cancel button"
+            data-testId="cancel-button" />
+        <div>
+            @if (store.isLoading()) {
+                <p-button
+                    [icon]="'pi pi-spin pi-spinner'"
+                    type="button"
+                    aria-label="Loading button"
+                    data-testId="loading-button" />
+            } @else {
+                <p-button
+                    [label]="'dot.common.import' | dm"
+                    [icon]="'pi pi-download'"
+                    type="submit"
+                    aria-label="Import button"
+                    data-testId="import-button" />
+            }
+        </div>
+    </div>
+</form>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.scss

@@ -0,0 +1,37 @@
+@use "variables" as *;
+
+:host ::ng-deep {
+    display: block;
+    width: 32rem;
+
+    .p-button {
+        width: 100%;
+    }
+
+    .error-messsage__container {
+        min-height: $spacing-4;
+    }
+}
+
+.url-mode__form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.url-mode__input-container {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+}
+
+.url-mode__actions {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, effect, inject, OnInit } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { InputTextModule } from 'primeng/inputtext';
+
+import { DotMessagePipe, DotFieldValidationMessageComponent, DotValidators } from '@dotcms/ui';
+
+import { FormImportUrlStore } from './store/form-import-url.store';
+
+import { INPUT_TYPE } from '../../../dot-edit-content-text-field/utils';
+
+@Component({
+    selector: 'dot-form-import-url',
+    standalone: true,
+    imports: [
+        DotMessagePipe,
+        ReactiveFormsModule,
+        DotFieldValidationMessageComponent,
+        ButtonModule,
+        InputTextModule
+    ],
+    templateUrl: './dot-form-import-url.component.html',
+    styleUrls: ['./dot-form-import-url.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [FormImportUrlStore]
+})
+export class DotFormImportUrlComponent implements OnInit {
+    readonly store = inject(FormImportUrlStore);
+    readonly #formBuilder = inject(FormBuilder);
+    readonly #dialogRef = inject(DynamicDialogRef);
+    readonly #dialogConfig = inject(DynamicDialogConfig<{ inputType: INPUT_TYPE }>);
+
+    readonly form = this.#formBuilder.group({
+        url: ['', [Validators.required, DotValidators.url]]
+    });
+
+    /**
+     * Listens to the `file` and `isDone` signals and closes the dialog once both are truthy.
+     * The `file` value is passed as the dialog result.
+     */
+    constructor() {
+        effect(
+            () => {
+                const file = this.store.file();
+                const isDone = this.store.isDone();
+
+                if (file && isDone) {
+                    this.#dialogRef.close(file);
+                }
+            },
+            {
+                allowSignalWrites: true
+            }
+        );
+
+        effect(() => {
+            const isLoading = this.store.isLoading();
+            if (isLoading) {
+                this.form.disable();
+            } else {
+                this.form.enable();
+            }
+        });
+    }
+
+    /**
+     * Initializes the component by setting the upload type based on the input type
+     * of the parent dialog.
+     *
+     * If the input type is 'Binary', the upload type is set to 'temp', otherwise it's set to 'dotasset'.
+     */
+    ngOnInit(): void {
+        const uploadType = this.#dialogConfig?.data?.inputType === 'Binary' ? 'temp' : 'dotasset';
+        this.store.setUploadType(uploadType);
+    }
+
+    /**
+     * Submits the form, if it's valid, by calling the `uploadFileByUrl` method of the store.
+     *
+     * @return {void}
+     */
+    onSubmit(): void {
+        if (this.form.invalid) {
+            return;
+        }
+
+        const { url } = this.form.getRawValue();
+        this.store.uploadFileByUrl(url);
+    }
+
+    /**
+     * Cancels the upload and closes the dialog.
+     *
+     * @return {void}
+     */
+    cancelUpload(): void {
+        this.#dialogRef.close();
+    }
+}