Adjust b-dropdown so that b-dropdown-item/-button is used in the prop…

…er cases
cortezaproject · Jan 9, 2025 · 3e65091 · 3e65091
1 parent 6c60464
commit 3e65091
Show file tree

Hide file tree

Showing 33 changed files with 246 additions and 359 deletions.
diff --git a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
@@ -5,29 +5,28 @@
     variant="primary"
   >
     <template v-if="filterList.length">
-      <b-dropdown-item
+      <b-dropdown-item-button
         v-for="(filter, index) in filterList"
         :key="index"
         :data-test-id="filterDropdownCypressId(filter.label)"
         :disabled="filter.disabled"
-        href="#"
         @click="onAddFilter(filter)"
       >
         {{ filter.label }}
-      </b-dropdown-item>
+      </b-dropdown-item-button>
     </template>
-    <b-dropdown-item
+
+    <b-dropdown-item-button
       v-else
       disabled
-      href="#"
     >
       <span
         data-test-id="filter-list-empty"
         class="text-danger"
       >
         {{ $t('filters.filterListEmpty') }}
       </span>
-    </b-dropdown-item>
+    </b-dropdown-item-button>
   </b-dropdown>
 </template>
 

diff --git a/client/web/admin/src/components/Apigw/CRouteList.vue b/client/web/admin/src/components/Apigw/CRouteList.vue
@@ -98,21 +98,15 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="r.routeID && canGrant"
-            link-class="p-0"
-          >
+          <b-dropdown-item-button v-if="r.routeID && canGrant">
             <c-permissions-button
               :title="r.endpoint || r.routeID"
               :target="r.endpoint || r.routeID"
               :resource="`corteza::system:apigw-route/${r.routeID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="r.canDeleteApigwRoute"
@@ -122,7 +116,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(r)"

diff --git a/client/web/admin/src/components/Connection/CExternalConnectionList.vue b/client/web/admin/src/components/Connection/CExternalConnectionList.vue
@@ -82,7 +82,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(c)"

diff --git a/client/web/admin/src/views/Automation/Workflow/List.vue b/client/web/admin/src/views/Automation/Workflow/List.vue
@@ -77,21 +77,17 @@
             />
           </template>
 
-          <b-dropdown-item
+          <b-dropdown-item-button
             v-if="w.workflowID && canGrant"
-            link-class="p-0"
-            variant="light"
           >
             <c-permissions-button
               :title="w.meta.name || w.handle || w.workflowID"
               :target="w.meta.name || w.handle || w.workflowID"
               :resource="`corteza::automation:workflow/${w.workflowID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="(w.canDeleteWorkflow && !w.deletedAt) || (w.canUndeleteWorkflow && w.deletedAt)"
@@ -100,7 +96,7 @@
             variant="link"
             size="md"
             text-class="p-1"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             :icon="getActionIcon(w)"

diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -64,22 +64,13 @@
             />
           </template>
 
-          <b-dropdown-item
-            link-class="p-0"
-          >
-            <b-button
-              size="sm"
-              variant="link"
-              class="text-decoration-none"
-              @click="openConfirmPending(n)"
-            >
-              <font-awesome-icon
-                :icon="['fas', 'exclamation-triangle']"
-                class="text-danger"
-              />
-              {{ $t('pair.confirm') }}
-            </b-button>
-          </b-dropdown-item>
+          <b-dropdown-item-button @click="openConfirmPending(n)">
+            <font-awesome-icon
+              :icon="['fas', 'exclamation-triangle']"
+              class="text-danger"
+            />
+            {{ $t('pair.confirm') }}
+          </b-dropdown-item-button>
         </b-dropdown>
       </template>
     </c-resource-list>

diff --git a/client/web/admin/src/views/System/Application/List.vue b/client/web/admin/src/views/System/Application/List.vue
@@ -78,21 +78,15 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="a.applicationID && canGrant"
-            link-class="p-0"
-            variant="light"
-          >
+          <b-dropdown-item-button v-if="a.applicationID && canGrant">
             <c-permissions-button
               :title="a.name || a.applicationID"
               :target="a.name || a.applicationID"
               :resource="`corteza::system:application/${a.applicationID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="a.canDeleteApplication"
@@ -102,7 +96,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(a)"

diff --git a/client/web/admin/src/views/System/AuthClient/List.vue b/client/web/admin/src/views/System/AuthClient/List.vue
@@ -79,39 +79,29 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="a.authClientID && canGrant"
-            link-class="p-0"
-          >
+          <b-dropdown-item-button v-if="a.authClientID && canGrant">
             <c-permissions-button
               :title="a.meta.name || a.handle || a.authClientID"
               :target="a.meta.name || a.handle || a.authClientID"
               :resource="`corteza::system:auth-client/${a.authClientID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-              class="text-dark d-print-none border-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
-
-          <b-dropdown-item
-            v-if="!a.isDefault && a.canDeleteAuthClient"
-            link-class="p-0"
-          >
-            <c-input-confirm
-              :text="getActionText(a)"
-              show-icon
-              :icon="getActionIcon(a)"
-              borderless
-              variant="link"
-              size="md"
-              button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
-              icon-class="text-danger"
-              class="w-100"
-              @confirmed="handleDelete(a)"
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
             />
-          </b-dropdown-item>
+          </b-dropdown-item-button>
+
+          <c-input-confirm
+            v-if="!a.isDefault && a.canDeleteAuthClient"
+            :text="getActionText(a)"
+            show-icon
+            :icon="getActionIcon(a)"
+            borderless
+            variant="link"
+            size="md"
+            button-class="dropdown-item"
+            icon-class="text-danger"
+            class="w-100"
+            @confirmed="handleDelete(a)"
+          />
         </b-dropdown>
       </template>
     </c-resource-list>

diff --git a/client/web/admin/src/views/System/Queue/List.vue b/client/web/admin/src/views/System/Queue/List.vue
@@ -78,7 +78,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(q)"

diff --git a/client/web/admin/src/views/System/Role/List.vue b/client/web/admin/src/views/System/Role/List.vue
@@ -99,21 +99,15 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="r.roleID && canGrant"
-            link-class="p-0"
-            variant="light"
-          >
+          <b-dropdown-item-button v-if="r.roleID && canGrant">
             <c-permissions-button
               :title="r.name || r.handle || r.roleID"
               :target="r.name || r.handle || r.roleID"
               :resource="`corteza::system:role/${r.roleID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="r.canDeleteRole"
@@ -123,7 +117,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(r)"

diff --git a/client/web/admin/src/views/System/SensitivityLevel/List.vue b/client/web/admin/src/views/System/SensitivityLevel/List.vue
@@ -76,7 +76,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(s)"

diff --git a/client/web/admin/src/views/System/Template/List.vue b/client/web/admin/src/views/System/Template/List.vue
@@ -87,20 +87,15 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="t.templateID && canGrant"
-            link-class="p-0"
-          >
+          <b-dropdown-item-button v-if="t.templateID && canGrant">
             <c-permissions-button
               :title="t.meta.short || t.handle || t.templateID"
               :target="t.meta.short || t.handle || t.templateID"
               :resource="`corteza::system:template/${t.templateID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="t.canDeleteTemplate"
@@ -110,7 +105,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(t)"

diff --git a/client/web/admin/src/views/System/User/List.vue b/client/web/admin/src/views/System/User/List.vue
@@ -105,21 +105,15 @@
             />
           </template>
 
-          <b-dropdown-item
-            v-if="canGrant"
-            link-class="p-0"
-            variant="light"
-          >
+          <b-dropdown-item-button v-if="canGrant">
             <c-permissions-button
               :title="u.name || u.handle || u.email || u.userID"
               :target="u.name || u.handle || u.email || u.userID"
               :resource="`corteza::system:user/${u.userID}`"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            >
-              <font-awesome-icon :icon="['fas', 'lock']" />
-              {{ $t('permissions') }}
-            </c-permissions-button>
-          </b-dropdown-item>
+              :button-label="$t('permissions')"
+              button-variant="dropdown-item p-0"
+            />
+          </b-dropdown-item-button>
 
           <c-input-confirm
             v-if="u.canDeleteUser"
@@ -129,7 +123,7 @@
             borderless
             variant="link"
             size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+            button-class="dropdown-item"
             icon-class="text-danger"
             class="w-100"
             @confirmed="handleDelete(u)"

diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -102,7 +102,7 @@
     >
       <c-permissions-button
         v-if="canGrant && !isNew"
-        button-variant="outline-light"
+        button-variant="outline-extra-light"
         size="sm"
         :title="value.label || value.name || value.fieldID"
         :target="value.label || value.name || value.fieldID"