Skip to content

Commit

Permalink
feat(block-editor): add copy text generated icon (#28384)
Browse files Browse the repository at this point in the history
* progress

* progress + test

* feat(block-editor): add copy text generated icon

* feat(block-editor): fix tests

* feat(block-editor): fix comment

---------

Co-authored-by: Humberto Morera <[email protected]>
  • Loading branch information
oidacra and hmoreras authored May 7, 2024
1 parent d567cb2 commit 663db78
Show file tree
Hide file tree
Showing 12 changed files with 159 additions and 132 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { DotApiLinkComponent, DotCopyButtonComponent, DotMessagePipe } from '@do
import { DotEditPageInfoComponent } from './dot-edit-page-info.component';

@Component({
template: `<dot-edit-page-info
template: ` <dot-edit-page-info
[title]="title"
[url]="url"
[apiLink]="apiLink"></dot-edit-page-info>`
Expand Down Expand Up @@ -62,12 +62,13 @@ describe('DotEditPageInfoComponent', () => {

it('should have copy button', () => {
const button: DebugElement = de.query(By.css('dot-copy-button '));
expect(button.componentInstance.copy).toBe('http://demo.dotcms.com:9876/an/url/test');
expect(button.componentInstance.tooltipText).toBe('Copy url page');

expect(button).not.toBeNull();
});

it('should have api link', () => {
const apiLink: DebugElement = de.query(By.css('dot-api-link'));

expect(apiLink.componentInstance.href).toBe(
'api/v1/page/render/an/url/test?language_id=1'
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { DotApiLinkComponent, DotCopyButtonComponent, DotMessagePipe } from '@do
import { DotEditPageInfoSeoComponent } from './dot-edit-page-info-seo.component';

@Component({
template: `<dot-edit-page-info-seo
template: ` <dot-edit-page-info-seo
[title]="title"
[url]="url"
[apiLink]="apiLink"></dot-edit-page-info-seo>`
Expand Down Expand Up @@ -66,8 +66,7 @@ describe('DotEditPageInfoSeoComponent', () => {

it('should have copy button', () => {
const button: DebugElement = de.query(By.css('[data-testId="copy-button"]'));
expect(button.componentInstance.copy).toBe('http://demo.dotcms.com:9876/an/url/test');
expect(button.componentInstance.tooltipText).toBe('Copy url page');
expect(button).not.toBeNull();
});

it('should not have preview link', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -279,21 +279,15 @@ describe('ContentTypesLayoutComponent', () => {
});

it('should have api link component', () => {
expect(de.query(By.css('dot-api-link')).componentInstance.href).toBe(
'api/v1/contenttype/id/1234567890'
);
expect(de.query(By.css('dot-api-link'))).toBeDefined();
});

it('should have copy variable link', () => {
expect(
de.query(By.css('[data-testId="copyVariableName"]')).componentInstance.copy
).toBe('helloVariable');
expect(de.query(By.css('[data-testId="copyVariableName"]'))).toBeDefined();
});

it('should have copy identifier link', () => {
expect(de.query(By.css('[data-testId="copyIdentifier"]')).componentInstance.copy).toBe(
'1234567890'
);
expect(de.query(By.css('[data-testId="copyIdentifier"]'))).toBeDefined();
});

it('should have edit button', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,25 @@
[configuration]="emptyConfiguration"
(buttonAction)="store.generateContent(form.value.textPrompt)" />
} @else {
<textarea
class="ai-content__generated-text"
[placeholder]="'block-editor.extension.ai-content.placeholder' | dm"
[readOnly]="true"
formControlName="generatedText"
pInputTextarea>
</textarea>
<div class="ai-content__generated-text-wrapper">
<textarea
class="ai-content__generated-text"
#generatedText
[placeholder]="'block-editor.extension.ai-content.placeholder' | dm"
[readOnly]="true"
formControlName="generatedText"
pInputTextarea>
</textarea>

<dot-copy-button
*ngIf="generatedText.value"
[copy]="generatedText.value"
customClass="p-button-rounded" />
</div>

} @if (vm.status === ComponentStatus.LOADING) {
<p-skeleton class="flex justify-content-center" width="7rem" height="2rem" />
} @else{
} @else {
<div class="ai-content__pagination">
<button
class="p-button-text p-button-sm p-button-rounded"
Expand Down Expand Up @@ -61,40 +70,40 @@
class="ai-content__input-text"
#inputTextarea
[placeholder]="'block-editor.extension.ai-content.ask.placeholder' | dm"
pInputTextarea
formControlName="textPrompt"></textarea>
formControlName="textPrompt"
pInputTextarea></textarea>

<div class="ai-content__buttons">
<button
class="p-button-text"
[label]="'Cancel' | dm"
(click)="closeDialog()"
type="button"
pButton></button>
pButton
type="button"></button>
<button
class="ml-auto"
[label]="'block-editor.extension.ai-image.insert' | dm"
[disabled]="
vm.status === ComponentStatus.LOADING ||
!vm.generatedContent?.length ||
vm.generatedContent[vm.activeIndex]?.error
"
[label]="'block-editor.extension.ai-image.insert' | dm"
(click)="store.setSelectedContent(vm.generatedContent[vm.activeIndex]?.content)"
type="button"
pButton></button>
pButton
type="button"></button>
<button
class="p-button-outlined"
[label]="submitButtonLabel | dm"
[disabled]="form.invalid || vm.status === ComponentStatus.LOADING"
type="submit"
pButton>
[label]="submitButtonLabel | dm"
pButton
type="submit">
<svg
*ngIf="vm.status !== ComponentStatus.LOADING; else loading"
xmlns="http://www.w3.org/2000/svg"
width="18"
fill="none"
height="22"
viewBox="0 0 18 22"
fill="none">
width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.48043 13.2597L5.40457 14.5046C5.29885 14.5368 5.20602 14.6037 5.13999 14.6952C5.07396 14.7868 5.03828 14.8981 5.03828 15.0124C5.03828 15.1268 5.07396 15.238 5.13999 15.3296C5.20602 15.4211 5.29885 15.488 5.40457 15.5203L9.48043 16.7651L10.6799 20.9949C10.711 21.1046 10.7755 21.2009 10.8637 21.2695C10.9519 21.338 11.0591 21.375 11.1693 21.375C11.2795 21.375 11.3867 21.338 11.4749 21.2695C11.5631 21.2009 11.6276 21.1046 11.6586 20.9949L12.8586 16.7651L16.9345 15.5203C17.0402 15.488 17.133 15.4211 17.1991 15.3296C17.2651 15.238 17.3008 15.1268 17.3008 15.0124C17.3008 14.8981 17.2651 14.7868 17.1991 14.6952C17.133 14.6037 17.0402 14.5368 16.9345 14.5046L12.8586 13.2597L11.6586 9.02989C11.6276 8.92018 11.5631 8.82385 11.4749 8.75533C11.3867 8.6868 11.2795 8.64977 11.1693 8.64977C11.0591 8.64977 10.9519 8.6868 10.8637 8.75533C10.7754 8.82385 10.711 8.92018 10.6799 9.02989L9.48043 13.2597Z"
fill="#426BF0" />
Expand All @@ -113,9 +122,9 @@
</form>
<p-confirmDialog
[style]="{ width: '500px' }"
acceptIcon="null"
key="ai-image-prompt"
rejectButtonStyleClass="p-button-outlined"
acceptIcon="null"
rejectIcon="null">
</p-confirmDialog>
</p-dialog>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@ form {
}
}

.ai-content__generated-text-wrapper {
display: flex;
flex-direction: column;
position: relative;

dot-copy-button {
position: absolute;
right: $spacing-3;
bottom: $spacing-0;
}
}

.ai-content__generated-text,
dot-empty-container {
height: 22rem;
Expand All @@ -41,7 +53,7 @@ dot-empty-container {
}

.ai-content__input-text {
height: 4rem;
height: $spacing-8;
}

.ai-content__buttons {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { SkeletonModule } from 'primeng/skeleton';
import { TooltipModule } from 'primeng/tooltip';

import { delay, filter } from 'rxjs/operators';

import { DotMessageService } from '@dotcms/data-access';
import { ComponentStatus } from '@dotcms/dotcms-models';
import {
DotCopyButtonComponent,
DotEmptyContainerComponent,
DotMessagePipe,
DotValidators,
Expand All @@ -40,11 +42,13 @@ interface AIContentForm {
InputTextareaModule,
DotMessagePipe,
ButtonModule,
TooltipModule,
SkeletonModule,
NgIf,
AsyncPipe,
DotEmptyContainerComponent,
ConfirmDialogModule
ConfirmDialogModule,
DotCopyButtonComponent
],
styleUrls: ['./ai-content-prompt.component.scss']
})
Expand All @@ -59,12 +63,11 @@ export class AIContentPromptComponent implements OnInit {
confirmationService = inject(ConfirmationService);
dotMessageService = inject(DotMessageService);
submitButtonLabel: string;
private destroyRef = inject(DestroyRef);
emptyConfiguration: PrincipalConfiguration = {
title: this.dotMessageService.get('block-editor.extension.ai-content.error'),
icon: 'pi-exclamation-triangle'
};

private destroyRef = inject(DestroyRef);
@ViewChild('inputTextarea') private inputTextarea: ElementRef<HTMLTextAreaElement>;

ngOnInit() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<form [formGroup]="form" (ngSubmit)="generate.emit()">
<p-accordion [activeIndex]="0" expandIcon="pi pi-angle-down" collapseIcon="pi pi-angle-up">
<p-accordion [activeIndex]="0" collapseIcon="pi pi-angle-up" expandIcon="pi pi-angle-down">
<p-accordionTab
[disabled]="isLoading"
[header]="'block-editor.extension.ai-image.settings' | dm"
Expand All @@ -9,8 +9,8 @@
<div>
<p-radioButton
formControlName="type"
value="input"
inputId="optionOne"></p-radioButton>
inputId="optionOne"
value="input"></p-radioButton>
<label class="ml-2" for="optionOne">{{
'block-editor.extension.ai-image.custom.prompt' | dm
}}</label>
Expand All @@ -19,8 +19,8 @@
<div>
<p-radioButton
formControlName="type"
value="auto"
inputId="option2"></p-radioButton>
inputId="option2"
value="auto"></p-radioButton>
<label class="ml-2" for="option2">{{
'block-editor.extension.ai-image.existing.content' | dm
}}</label>
Expand Down Expand Up @@ -48,41 +48,40 @@
<div class="field">
<label
*ngIf="requiredPrompt; else labelNotRequired"
dotFieldRequired
data-testid="prompt-label"
dotFieldRequired
for="prompt">
{{ promptLabel | dm }}
</label>
<textarea
class="w-full ai-image-prompt__textarea"
id="prompt"
[placeholder]="promptTextAreaPlaceholder | dm"
rows="11"
cols="30"
formControlName="text"
pInputTextarea
formControlName="text">
rows="11">
</textarea>
</div>
<div class="field" *ngIf="aiProcessedPrompt && !isLoading">
<label class="ai-image-prompt__rewritten-label" for="prompt-rewritten"
>{{ 'block-editor.extension.ai-image.rewritten' | dm }}
<i
class="pi pi-copy"
[pTooltip]="tooltipText"
(click)="copyToClipboard()"
tooltipPosition="bottom"
hideDelay="800"
data-testid="copy-to-clipboard"></i>
</label>
<textarea
class="w-full ai-image-prompt__rewritten-textarea"
id="prompt-rewritten"
[value]="aiProcessedPrompt"
rows="11"
cols="30"
pInputTextarea
readonly>
</textarea>

<div class="ai-image-prompt__text-wrapper">
<textarea
class="w-full ai-image-prompt__rewritten-textarea"
id="prompt-rewritten"
[value]="aiProcessedPrompt"
cols="30"
pInputTextarea
readonly
rows="11">
</textarea>
<dot-copy-button
[copy]="aiProcessedPrompt"
customClass="p-button-rounded" />
</div>
</div>
</div>
</p-accordionTab>
Expand All @@ -95,11 +94,11 @@
type="submit">
<svg
*ngIf="!isLoading; else loading"
xmlns="http://www.w3.org/2000/svg"
width="18"
fill="none"
height="22"
viewBox="0 0 18 22"
fill="none">
width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.48043 13.2597L5.40457 14.5046C5.29885 14.5368 5.20602 14.6037 5.13999 14.6952C5.07396 14.7868 5.03828 14.8981 5.03828 15.0124C5.03828 15.1268 5.07396 15.238 5.13999 15.3296C5.20602 15.4211 5.29885 15.488 5.40457 15.5203L9.48043 16.7651L10.6799 20.9949C10.711 21.1046 10.7755 21.2009 10.8637 21.2695C10.9519 21.338 11.0591 21.375 11.1693 21.375C11.2795 21.375 11.3867 21.338 11.4749 21.2695C11.5631 21.2009 11.6276 21.1046 11.6586 20.9949L12.8586 16.7651L16.9345 15.5203C17.0402 15.488 17.133 15.4211 17.1991 15.3296C17.2651 15.238 17.3008 15.1268 17.3008 15.0124C17.3008 14.8981 17.2651 14.7868 17.1991 14.6952C17.133 14.6037 17.0402 14.5368 16.9345 14.5046L12.8586 13.2597L11.6586 9.02989C11.6276 8.92018 11.5631 8.82385 11.4749 8.75533C11.3867 8.6868 11.2795 8.64977 11.1693 8.64977C11.0591 8.64977 10.9519 8.6868 10.8637 8.75533C10.7754 8.82385 10.711 8.92018 10.6799 9.02989L9.48043 13.2597Z"
fill="#426BF0" />
Expand All @@ -116,7 +115,7 @@
</button>
</form>
<ng-template #labelNotRequired>
<label for="prompt" data-testid="prompt-label">
<label data-testid="prompt-label" for="prompt">
{{ promptLabel | dm }}
</label>
</ng-template>
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,26 @@ form {
}
}

.ai-image-prompt__text-wrapper {
display: flex;
flex-direction: column;
position: relative;

dot-copy-button {
position: absolute;
right: $spacing-1;
bottom: $spacing-0;
}
}

.ai-image-prompt__orientation {
margin-bottom: 9rem;
}

.ai-image-prompt__rewritten-label {
display: flex;
gap: $spacing-1;

i {
color: $color-palette-primary;
cursor: pointer;
}
align-items: center;
}

p-accordion {
Expand Down
Loading

0 comments on commit 663db78

Please sign in to comment.