Skip to content

Commit

Permalink
Merge pull request #1755 from ProcessMaker/bugfix/FOUR-19756
Browse files Browse the repository at this point in the history 
FOUR-19756: Message COPIED doesn't appear when a control is added to Clipboard
  • Loading branch information
@ryancooley
ryancooley authored Oct 29, 2024
2 parents 9e36c54 + 155b125 commit 83aaa2e
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 4 deletions.
26 changes: 26 additions & 0 deletions src/components/editor/loop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || $t("Variable Name") }}
<b-badge
v-if="isInClipboard(items[index])"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
:index="index"
Expand Down Expand Up @@ -91,6 +100,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || $t("Variable Name") }}
<b-badge
v-if="isInClipboard(items[index])"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
:index="index"
Expand Down Expand Up @@ -334,4 +352,12 @@ export default {
box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
}
}
.custom-badge {
background-color: #D1F4D7 !important;
color: #06723A !important;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
}
</style>
26 changes: 26 additions & 0 deletions src/components/editor/multi-column.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || $t("Variable Name") }}
<b-badge
v-if="isInClipboard(element)"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
:index="index"
Expand Down Expand Up @@ -108,6 +117,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || $t("Variable Name") }}
<b-badge
v-if="isInClipboard(element)"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
:index="index"
Expand Down Expand Up @@ -375,4 +393,12 @@ export default {
box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
}
}
.custom-badge {
background-color: #D1F4D7 !important;
color: #06723A !important;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
}
</style>
26 changes: 26 additions & 0 deletions src/components/vue-form-builder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || element.label || $t("Field Name") }}
<b-badge
v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
v-if="!isClipboardPage(tabPage)"
Expand Down Expand Up @@ -267,6 +276,15 @@
class="mr-2 ml-1"
/>
{{ element.config.name || $t("Variable Name") }}
<b-badge
v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])"
data-cy="copied-badge"
class="m-2 custom-badge"
pill
>
<i class="far fa-check-circle"></i>
<span class="pl-2">{{ $t('Copied')}}</span>
</b-badge>
<div class="ml-auto">
<clipboard-button
v-if="!isClipboardPage(tabPage)"
Expand Down Expand Up @@ -1746,6 +1764,14 @@ $side-bar-font-size: 0.875rem;
cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */
pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */
}
.custom-badge {
background-color: #D1F4D7 !important;
color: #06723A !important;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
}
.no-text-transform {
text-transform: none;
}
Expand Down
6 changes: 3 additions & 3 deletions tests/e2e/specs/Clipboard.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe("Clipboard Button Actions", () => {

// Step 4: Verify 'Remove from Clipboard' button is visible after adding to clipboard and then click it
cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
cy.get('[data-cy="removeFromClipboard"]').click();
cy.get('[data-cy="removeFromClipboard"]').click({force: true});
cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
});

Expand Down Expand Up @@ -73,7 +73,7 @@ describe("Clipboard Button Actions", () => {

// Step 5: Remove the form input from the clipboard
cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
cy.get('[data-cy="removeFromClipboard"]').click();
cy.get('[data-cy="removeFromClipboard"]').click({force: true});
cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
});

Expand Down Expand Up @@ -102,7 +102,7 @@ describe("Clipboard Button Actions", () => {

// Step 4: Remove the form input from the clipboard
cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
cy.get('[data-cy="removeFromClipboard"]').click();
cy.get('[data-cy="removeFromClipboard"]').click({force: true});
cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
});

Expand Down
16 changes: 15 additions & 1 deletion tests/e2e/specs/ClipboardTestCases.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,37 @@ describe("Clipboard Button Actions", () => {
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(2) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(3) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(4) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(5) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(6) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get("[data-test=page-dropdown").click();
cy.get("[data-test=clipboard]").should("exist").click({ force: true });
Expand All @@ -111,32 +117,37 @@ describe("Clipboard Button Actions", () => {
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(2) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(3) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(4) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(5) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(6) > [data-cy="screen-element-container"]').click({ force: true });
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");

cy.get('[data-cy="copied-badge"]').should("exist");

cy.get("[data-test=page-dropdown").click();
cy.get("[data-test=clipboard]").should("exist").click({ force: true });
Expand All @@ -158,6 +169,7 @@ describe("Clipboard Button Actions", () => {
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get("[data-test=page-dropdown").click();
cy.get("[data-test=clipboard]").should("exist").click({ force: true });
Expand All @@ -178,11 +190,13 @@ describe("Clipboard Button Actions", () => {
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");

cy.get(':nth-child(2) > [data-cy="screen-element-container"]').click();
cy.get('[data-cy="addToClipboard"]').should("be.visible");
cy.get('[data-cy="addToClipboard"]').click();
cy.get('[data-cy="addToClipboard"]').should("not.exist");
cy.get('[data-cy="copied-badge"]').should("exist");


cy.get("[data-test=page-dropdown").click();
Expand Down

0 comments on commit 83aaa2e

Please sign in to comment.