From a26303c449dea9480b8c1955d566031cbfe56d33 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Fri, 10 Nov 2023 18:05:40 +0100
Subject: [PATCH] Transform on delete button component to c-input-confirm

---
 .../src/components/Apigw/CFilterParams.vue    | 12 +++-----
 .../web/admin/src/components/CRolePicker.vue  |  4 ---
 .../components/Role/CRoleEditorMembers.vue    |  4 ---
 .../components/Settings/UI/CUILogoEditor.vue  | 14 +++-------
 .../Settings/UI/CUITopbarSettings.vue         | 26 ++++++-----------
 .../User/CUserEditorExternalAuthProviders.vue | 11 +++-----
 .../components/Chart/Report/GaugeChart.vue    | 11 +++-----
 .../src/components/Chart/ReportItem.vue       | 13 ++++-----
 .../ModuleFields/Configurator/Select.vue      | 15 ++++------
 .../components/Namespaces/Reminders/List.vue  | 15 ++++------
 .../CalendarConfigurator/FeedSource/index.vue | 12 ++++----
 .../GeometryConfigurator/FeedSource/index.vue | 12 ++++----
 .../compose/src/views/Admin/Charts/Edit.vue   |  3 +-
 .../src/components/Configurator/Trigger.vue   | 28 +++++++------------
 .../src/components/ExpressionTable.vue        | 14 +++-------
 15 files changed, 66 insertions(+), 128 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/CFilterParams.vue b/client/web/admin/src/components/Apigw/CFilterParams.vue
index 31f4a3bd3..b58016f95 100644
--- a/client/web/admin/src/components/Apigw/CFilterParams.vue
+++ b/client/web/admin/src/components/Apigw/CFilterParams.vue
@@ -89,14 +89,10 @@
             />
 
             <b-input-group-append>
-              <b-button
-                variant="danger"
-                @click="param.value.splice(hIndex, 1)"
-              >
-                <font-awesome-icon
-                  :icon="['far', 'trash-alt']"
-                />
-              </b-button>
+              <c-input-confirm
+                show-icon
+                @confirmed="param.value.splice(hIndex, 1)"
+              />
             </b-input-group-append>
           </b-input-group>
 
diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index a218206b1..84696212d 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -34,7 +34,6 @@
         <b-col class="text-right">
           <c-input-confirm
             data-test-id="button-remove-role"
-            no-prompt
             show-icon
             @confirmed="removeRole(role)"
           />
@@ -47,8 +46,6 @@
 <script>
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
-import { components } from '@cortezaproject/corteza-vue/'
-const { CInputConfirm } = components
 
 function roleSorter (a, b) {
   return `${a.name} ${a.handle} ${a.roleID}`.localeCompare(`${b.name} ${b.handle} ${b.roleID}`)
@@ -57,7 +54,6 @@ function roleSorter (a, b) {
 export default {
   components: {
     VueSelect,
-    CInputConfirm,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 8c34cdca2..2a1ba26f2 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -41,7 +41,6 @@
                 <c-input-confirm
                   data-test-id="button-remove-member"
                   show-icon
-                  no-prompt
                   @confirmed="removeMember(user.userID)"
                 />
               </td>
@@ -72,8 +71,6 @@
 <script>
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
-import { components } from '@cortezaproject/corteza-vue/'
-const { CInputConfirm } = components
 
 export default {
   i18nOptions: {
@@ -83,7 +80,6 @@ export default {
 
   components: {
     VueSelect,
-    CInputConfirm,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue b/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
index e1fa8dba0..d92947a40 100644
--- a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
@@ -15,12 +15,9 @@
 
           <c-input-confirm
             v-if="uploadedFile('ui.main-logo')"
+            show-icon
             @confirmed="resetAttachment('ui.main-logo')"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-            />
-          </c-input-confirm>
+          />
         </template>
 
         <c-uploader-with-preview
@@ -48,12 +45,9 @@
 
           <c-input-confirm
             v-if="uploadedFile('ui.icon-logo')"
+            show-icon
             @confirmed="resetAttachment('ui.icon-logo')"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-            />
-          </c-input-confirm>
+          />
         </template>
 
         <c-uploader-with-preview
diff --git a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
index 5c6401eb6..6f28caabb 100644
--- a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
+++ b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
@@ -104,15 +104,10 @@
                   />
                 </template>
                 <template #cell(actions)="data">
-                  <b-button
-                    variant="outline-danger"
-                    class="border-0 px-1"
-                    @click="topbarSettings.helpLinks.splice(data.index, 1)"
-                  >
-                    <font-awesome-icon
-                      :icon="['far', 'trash-alt']"
-                    />
-                  </b-button>
+                  <c-input-confirm
+                    show-icon
+                    @confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
+                  />
                 </template>
               </b-table>
             </b-form-group>
@@ -183,15 +178,10 @@
                   />
                 </template>
                 <template #cell(actions)="data">
-                  <b-button
-                    variant="outline-danger"
-                    class="border-0 px-1"
-                    @click="topbarSettings.profileLinks.splice(data.index, 1)"
-                  >
-                    <font-awesome-icon
-                      :icon="['far', 'trash-alt']"
-                    />
-                  </b-button>
+                  <c-input-confirm
+                    show-icon
+                    @confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
+                  />
                 </template>
               </b-table>
             </b-form-group>
diff --git a/client/web/admin/src/components/User/CUserEditorExternalAuthProviders.vue b/client/web/admin/src/components/User/CUserEditorExternalAuthProviders.vue
index 65a579bcd..4bd6e880c 100644
--- a/client/web/admin/src/components/User/CUserEditorExternalAuthProviders.vue
+++ b/client/web/admin/src/components/User/CUserEditorExternalAuthProviders.vue
@@ -10,14 +10,11 @@
       :fields="fields"
     >
       <template #cell(editor)="{ item }">
-        <b-button
+        <c-input-confirm
           data-test-id="button-remove-provider"
-          variant="link"
-          class="pr-0"
-          @click="$emit('delete', item.credentialsID)"
-        >
-          <font-awesome-icon :icon="['far', 'trash-alt']" />
-        </b-button>
+          show-icon
+          @confirmed="$emit('delete', item.credentialsID)"
+        />
       </template>
     </b-table>
     <template #header>
diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
index 4a0439f30..42b79f29b 100644
--- a/client/web/compose/src/components/Chart/Report/GaugeChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
@@ -39,13 +39,10 @@
           />
 
           <b-input-group-append>
-            <b-button
-              variant="link"
-              class="border-0 text-danger"
-              @click.prevent="dimension.meta.steps.splice(i, 1)"
-            >
-              <font-awesome-icon :icon="['far', 'trash-alt']" />
-            </b-button>
+            <c-input-confirm
+              show-icon
+              @confirmed="dimension.meta.steps.splice(i, 1)"
+            />
           </b-input-group-append>
         </b-input-group>
 
diff --git a/client/web/compose/src/components/Chart/ReportItem.vue b/client/web/compose/src/components/Chart/ReportItem.vue
index b3ad8a36e..59b542c9d 100644
--- a/client/web/compose/src/components/Chart/ReportItem.vue
+++ b/client/web/compose/src/components/Chart/ReportItem.vue
@@ -21,13 +21,12 @@
       >
         <font-awesome-icon :icon="['far', 'edit']" />
       </b-btn>
-      <b-btn
-        variant="link"
-        class="float-right text-danger p-0"
-        @click="$emit('remove', report)"
-      >
-        <font-awesome-icon :icon="['far', 'trash-alt']" />
-      </b-btn>
+
+      <c-input-confirm
+        show-icon
+        class="float-right"
+        @confirmed="$emit('remove', report)"
+      />
     </td>
   </tr>
 </template>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
index 065a8b003..ef43736d4 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
@@ -40,7 +40,7 @@
               v-for="(option, index) in f.options.options"
               :key="index"
             >
-              <b-td class="d-flex align-items-center justify-content-center">
+              <b-td class="align-middle">
                 <font-awesome-icon
                   :icon="['fas', 'bars']"
                   class="grab text-light"
@@ -80,14 +80,11 @@
                 </b-input-group>
               </b-td>
 
-              <b-td class="d-flex align-items-center justify-content-center">
-                <b-button
-                  variant="outline-danger"
-                  class="border-0"
-                  @click.prevent="f.options.options.splice(index, 1)"
-                >
-                  <font-awesome-icon :icon="['far', 'trash-alt']" />
-                </b-button>
+              <b-td class="align-middle text-right">
+                <c-input-confirm
+                  show-icon
+                  @confirmed="f.options.options.splice(index, 1)"
+                />
               </b-td>
             </b-tr>
 
diff --git a/client/web/compose/src/components/Namespaces/Reminders/List.vue b/client/web/compose/src/components/Namespaces/Reminders/List.vue
index 26d805ce7..9457827b4 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/List.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/List.vue
@@ -59,17 +59,12 @@
                   <font-awesome-icon :icon="['far', 'edit']" />
                 </b-button>
 
-                <b-button
+                <c-input-confirm
                   data-test-id="button-delete-reminder"
-                  variant="outline-light"
-                  :title="$t('reminder.delete')"
-                  class="d-flex align-items-center py-2 text-danger border-0"
-                  @click.prevent="$emit('delete', r)"
-                >
-                  <font-awesome-icon
-                    :icon="['far', 'trash-alt']"
-                  />
-                </b-button>
+                  show-icon
+                  :tooltip="$t('reminder.delete')"
+                  @confirmed="$emit('delete', r)"
+                />
               </b-button-group>
             </div>
           </div>
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/index.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/index.vue
index 794619a00..8374650e7 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/index.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/index.vue
@@ -31,13 +31,11 @@
             v-if="feed.resource"
             v-slot:append
           >
-            <b-button
-              variant="outline-danger"
-              class="border-0"
-              @click="onRemoveFeed(i)"
-            >
-              <font-awesome-icon :icon="['far', 'trash-alt']" />
-            </b-button>
+            <c-input-confirm
+              show-icon
+              size="md"
+              @confirmed="onRemoveFeed(i)"
+            />
           </template>
         </b-input-group>
       </b-form-group>
diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/index.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/index.vue
index a3aa43681..ee75c8ef6 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/index.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/index.vue
@@ -14,13 +14,11 @@
         <template
           v-if="feed.resource"
         >
-          <b-button
-            variant="outline-danger"
-            class="border-0"
-            @click="onRemoveFeed(i)"
-          >
-            <font-awesome-icon :icon="['far', 'trash-alt']" />
-          </b-button>
+          <c-input-confirm
+            show-icon
+            size="md"
+            @confirmed="onRemoveFeed(i)"
+          />
         </template>
       </div>
 
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index dc32183be..1859f9a5c 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -446,7 +446,7 @@ import { chartConstructor } from 'corteza-webapp-compose/src/lib/charts'
 import VueSelect from 'vue-select'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
-const { CInputConfirm, CInputCheckbox, CInputColorPicker } = components
+const { CInputCheckbox, CInputColorPicker } = components
 const { colorschemes } = shared
 
 const defaultReport = {
@@ -469,7 +469,6 @@ export default {
     VueSelect,
     CInputCheckbox,
     CInputColorPicker,
-    CInputConfirm,
   },
 
   props: {
diff --git a/client/web/workflow/src/components/Configurator/Trigger.vue b/client/web/workflow/src/components/Configurator/Trigger.vue
index 2456e095e..7cc7a91ba 100644
--- a/client/web/workflow/src/components/Configurator/Trigger.vue
+++ b/client/web/workflow/src/components/Configurator/Trigger.vue
@@ -124,16 +124,13 @@
               <samp>{{ c.values.join(' or ') }}</samp>
             </div>
 
-            <b-button
+            <c-input-confirm
               v-if="c._showDetails"
-              variant="outline-danger"
-              class="position-absolute trash border-0"
-              @click="removeConstraint(index)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'trash-alt']"
-              />
-            </b-button>
+              show-icon
+              class="position-absolute trash"
+              size="md"
+              @confirmed="removeConstraint(index)"
+            />
           </template>
 
           <template #row-details="{ item: c }">
@@ -202,15 +199,10 @@
                     @input="$root.$emit('change-detected')"
                   />
 
-                  <b-button
-                    variant="outline-danger"
-                    class="ml-1 border-0"
-                    @click="c.values.splice(index, 1)"
-                  >
-                    <font-awesome-icon
-                      :icon="['far', 'trash-alt']"
-                    />
-                  </b-button>
+                  <c-input-confirm
+                    show-icon
+                    @confirmed="c.values.splice(index, 1)"
+                  />
                 </b-input-group>
               </b-form-group>
             </b-card>
diff --git a/client/web/workflow/src/components/ExpressionTable.vue b/client/web/workflow/src/components/ExpressionTable.vue
index bc2512485..4a3f42702 100644
--- a/client/web/workflow/src/components/ExpressionTable.vue
+++ b/client/web/workflow/src/components/ExpressionTable.vue
@@ -42,17 +42,11 @@
             >
               <samp class="text-truncate">{{ item[field.key] }}</samp>
 
-              <b-button
+              <c-input-confirm
                 v-if="item._showDetails"
-                variant="outline-danger"
-                size="sm"
-                class="border-0"
-                @click="$emit('remove', index)"
-              >
-                <font-awesome-icon
-                  :icon="['far', 'trash-alt']"
-                />
-              </b-button>
+                show-icon
+                @confirmed="$emit('remove', index)"
+              />
             </div>
 
             <var