From c866b9d41c3018b047bd09a5ca214197c2fc9c24 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 16 May 2024 14:03:24 -0400
Subject: [PATCH 1/2] fix(*): replace kicon instances [KHCP-11982]

---
 .../app-layout/sandbox/pages/PageHeaderPage.vue   | 15 ++++-----------
 .../fields/advanced/FieldObjectAdvanced.vue       |  9 +++++----
 .../src/components/RouteFormMethodsFields.vue     |  3 ++-
 .../components/RoutingRulesEntitiesControls.vue   | 10 +++-------
 .../sandbox/pages/EntityFormSectionPage.vue       |  3 ++-
 .../entity-base-table/EntityBaseTable.vue         |  9 ++-------
 .../components/UpstreamsFormActiveHealthCheck.vue |  8 +++-----
 .../entities-vaults/src/components/VaultForm.vue  |  6 +++---
 .../OperationsListSectionHeader.vue               |  1 -
 9 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 567f2ade87..a0eddd8e5f 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
@@ -8,12 +8,7 @@
         <KongIcon :color="KUI_COLOR_TEXT_DECORATIVE_AQUA" />
       </template>
       <template #title-before>
-        <KIcon
-          class="title-icon"
-          color="#169fcc"
-          icon="graduationHat"
-          size="20"
-        />
+        <TeamIcon class="title-icon" />
       </template>
       <template #title-after>
         <KBadge appearance="neutral">
@@ -29,10 +24,8 @@
             :label="enabled ? 'Enabled' : 'Disabled'"
             label-before
           />
-          <KButton
-            appearance="primary"
-            icon="plus"
-          >
+          <KButton appearance="primary">
+            <AddIcon />
             Do Things
           </KButton>
         </div>
@@ -111,7 +104,7 @@
 import { computed, ref } from 'vue'
 import type { BadgeMethodAppearance } from '@kong/kongponents'
 import { AppAboutSection, AppPageHeader } from '../../src'
-import { EditIcon, KongIcon } from '@kong/icons'
+import { EditIcon, KongIcon, TeamIcon, AddIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_DECORATIVE_AQUA } from '@kong/design-tokens'
 
 const breadcrumbs = computed(() => {
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
index 0e42eb6348..48698bf7ea 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
@@ -20,10 +20,7 @@
                 type="button"
                 @click="removeElement(index)"
               >
-                <KIcon
-                  icon="trash"
-                  size="18"
-                />
+                <TrashIcon />
               </KButton>
             </div>
           </div>
@@ -87,8 +84,12 @@
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
 import abstractField from '../abstractField'
 export default {
+  components: {
+    TrashIcon,
+  },
   mixins: [abstractField],
   emits: ['model-updated'],
   data() {
diff --git a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
index e653f6b743..a8c2f695b8 100644
--- a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
@@ -29,7 +29,7 @@
         @click="$emit('remove')"
       >
         <template #icon>
-          <KIcon icon="trash" />
+          <TrashIcon />
         </template>
       </KButton>
     </div>
@@ -74,6 +74,7 @@ import composables from '../composables'
 import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
 import { BadgeMethodAppearances } from '@kong/kongponents'
 import type { BadgeMethodAppearance } from '@kong/kongponents'
+import { TrashIcon } from '@kong/icons'
 
 /** Local types, not exported
  * Same pattern used other fields components
diff --git a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
index ed27ce2a5f..b0e72eb4ef 100644
--- a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
+++ b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
@@ -6,7 +6,7 @@
       :data-testid="`remove-${routingRulesEntity}`"
       @click="$emit('remove')"
     >
-      <KIcon icon="trash" />
+      <TrashIcon />
     </KButton>
     <KButton
       appearance="tertiary"
@@ -14,17 +14,13 @@
       :disabled="isAddDisabled"
       @click="$emit('add')"
     >
-      <KIcon
-        :color="KUI_COLOR_TEXT_PRIMARY_STRONG"
-        icon="plus"
-        size="22"
-      />
+      <AddIcon />
     </KButton>
   </div>
 </template>
 
 <script setup lang="ts">
-import { KUI_COLOR_TEXT_PRIMARY_STRONG } from '@kong/design-tokens'
+import { TrashIcon, AddIcon } from '@kong/icons'
 
 defineProps({
   routingRulesEntity: {
diff --git a/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue b/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue
index 6d68f7ff36..6a7a34de58 100644
--- a/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue
+++ b/packages/entities/entities-shared/sandbox/pages/EntityFormSectionPage.vue
@@ -21,7 +21,7 @@
       <template #footer>
         <div class="footer">
           <span class="footer-title">Footer slot</span>
-          <KIcon icon="kong" />
+          <KongIcon />
         </div>
       </template>
     </EntityFormSection>
@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
 import { EntityFormSection } from '../../src'
+import { KongIcon } from '@kong/icons'
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
index 527bc83719..4434f677d4 100644
--- a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
+++ b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
@@ -86,11 +86,7 @@
               size="small"
             >
               <template #icon>
-                <KIcon
-                  :color="KUI_COLOR_TEXT_NEUTRAL_STRONGER"
-                  icon="more"
-                  size="16"
-                />
+                <MoreIcon />
               </template>
             </KButton>
             <template #items>
@@ -120,7 +116,6 @@ import { computed, ref } from 'vue'
 import composables from '../../composables'
 import { useTablePreferences } from '@kong-ui-public/core'
 import type { SwrvStateData, HeaderTag, TablePreferences } from '@kong/kongponents'
-import { KUI_COLOR_TEXT_NEUTRAL_STRONGER } from '@kong/design-tokens'
 import EntityBaseTableCell from './EntityBaseTableCell.vue'
 
 import type {
@@ -132,7 +127,7 @@ import type {
   TableSortParams,
   TableErrorMessage,
 } from '../../types'
-import { AddIcon } from '@kong/icons'
+import { AddIcon, MoreIcon } from '@kong/icons'
 
 const props = defineProps({
   // table header configuration
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
index 29852c85e1..63f00ec61c 100644
--- a/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
@@ -119,9 +119,8 @@
             @click="removeHeader(i)"
           >
             <template #icon>
-              <KIcon
+              <TrashIcon
                 class="delete-item"
-                icon="trash"
               />
             </template>
           </KButton>
@@ -133,10 +132,8 @@
             @click="addHeader"
           >
             <template #icon>
-              <KIcon
+              <AddIcon
                 color="$kui-color-text-primary-strong"
-                icon="plus"
-                size="22"
               />
             </template>
           </KButton>
@@ -306,6 +303,7 @@ import {
 import type { MultiselectItem, SelectItem } from '@kong/kongponents'
 import useHelpers from '../composables/useHelpers'
 import links from '../links'
+import { AddIcon, TrashIcon } from '@kong/icons'
 
 const { i18n: { t } } = composables.useI18n()
 const { objectsAreEqual } = useHelpers()
diff --git a/packages/entities/entities-vaults/src/components/VaultForm.vue b/packages/entities/entities-vaults/src/components/VaultForm.vue
index 2ca4e11a09..780fb55f10 100644
--- a/packages/entities/entities-vaults/src/components/VaultForm.vue
+++ b/packages/entities/entities-vaults/src/components/VaultForm.vue
@@ -64,9 +64,8 @@
             :label="t('form.config.kong.label')"
             :selected-value="VaultProviders.KONG"
           >
-            <KIcon
-              icon="kong"
-              size="46"
+            <KongIcon
+              :size="KUI_ICON_SIZE_80"
             />
           </KRadio>
           <KTooltip
@@ -562,6 +561,7 @@ import {
 import { useRouter } from 'vue-router'
 import type { AxiosError, AxiosResponse } from 'axios'
 import endpoints from '../vaults-endpoints'
+import { KUI_ICON_SIZE_80 } from '@kong/design-tokens'
 
 interface ConfigFields {
   [VaultProviders.KONG]: KongVaultConfig
diff --git a/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue b/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue
index 31b19a1670..2d52b3d259 100644
--- a/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue
+++ b/packages/portal/spec-renderer/src/components/operations-list/OperationsListSectionHeader.vue
@@ -20,7 +20,6 @@
       <ChevronDownIcon
         v-else
         :color="`var(--kong-ui-spec-renderer-operations-list-section-icon-color-expanded, ${KUI_COLOR_TEXT_NEUTRAL_STRONGER})`"
-        icon="chevronDown"
         :size="KUI_ICON_SIZE_40"
       />
     </div>

From 1d26001962b369923e40eb4a94ca5c42b250d1c4 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 16 May 2024 14:33:45 -0400
Subject: [PATCH 2/2] fix(*): misc fixes [KHCP-11982]

---
 .../fields/advanced/FieldObjectAdvanced.vue   |  4 ++-
 .../src/components/RouteFormMethodsFields.vue |  3 +-
 .../RoutingRulesEntitiesControls.vue          | 32 +++++--------------
 .../entity-base-table/EntityBaseTable.vue     |  8 +----
 .../UpstreamsFormActiveHealthCheck.vue        |  7 ++--
 .../src/components/VaultForm.vue              |  1 +
 6 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
index 48698bf7ea..6c2a61ec1c 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
@@ -20,7 +20,9 @@
                 type="button"
                 @click="removeElement(index)"
               >
-                <TrashIcon />
+                <template #icon>
+                  <TrashIcon />
+                </template>
               </KButton>
             </div>
           </div>
diff --git a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
index a8c2f695b8..654f9bc382 100644
--- a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
@@ -29,7 +29,7 @@
         @click="$emit('remove')"
       >
         <template #icon>
-          <TrashIcon />
+          <TrashIcon :color="KUI_COLOR_TEXT_DANGER" />
         </template>
       </KButton>
     </div>
@@ -75,6 +75,7 @@ import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
 import { BadgeMethodAppearances } from '@kong/kongponents'
 import type { BadgeMethodAppearance } from '@kong/kongponents'
 import { TrashIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 
 /** Local types, not exported
  * Same pattern used other fields components
diff --git a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
index b0e72eb4ef..90433ee865 100644
--- a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
+++ b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
@@ -6,7 +6,9 @@
       :data-testid="`remove-${routingRulesEntity}`"
       @click="$emit('remove')"
     >
-      <TrashIcon />
+      <template #icon>
+        <TrashIcon :color="KUI_COLOR_TEXT_DANGER" />
+      </template>
     </KButton>
     <KButton
       appearance="tertiary"
@@ -14,12 +16,15 @@
       :disabled="isAddDisabled"
       @click="$emit('add')"
     >
-      <AddIcon />
+      <template #icon>
+        <AddIcon />
+      </template>
     </KButton>
   </div>
 </template>
 
 <script setup lang="ts">
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 import { TrashIcon, AddIcon } from '@kong/icons'
 
 defineProps({
@@ -39,27 +44,6 @@ defineEmits(['remove', 'add'])
 <style lang="scss" scoped>
 .routing-rules-entities-controls-container {
   display: flex;
-
-  :deep(.k-button) {
-    &.remove-button {
-      svg path {
-        fill: $kui_color_border_neutral_weak !important;
-      }
-
-      &:hover {
-        svg path {
-          fill: $kui_color_border_danger_weak !important;
-        }
-      }
-    }
-
-    &[disabled] {
-      pointer-events: none !important;
-
-      .kong-icon {
-        opacity: 0 !important;
-      }
-    }
-  }
+  gap: $kui-space-20;
 }
 </style>
diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
index 4434f677d4..c049d1aaab 100644
--- a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
+++ b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
@@ -81,6 +81,7 @@
             :width="dropdownMenuWidth"
           >
             <KButton
+              appearance="tertiary"
               class="actions-trigger"
               data-testid="overflow-actions-button"
               size="small"
@@ -400,13 +401,6 @@ const handleUpdateTablePreferences = (newTablePreferences: TablePreferences): vo
       margin-top: 0;
     }
   }
-
-  .actions-trigger {
-    background-color: $kui-color-background-transparent!important;
-    border: none!important;
-    cursor: pointer!important;
-    font-weight: $kui-font-weight-regular!important;
-  }
 }
 </style>
 
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
index 63f00ec61c..f75fdad61d 100644
--- a/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/UpstreamsFormActiveHealthCheck.vue
@@ -116,11 +116,13 @@
             appearance="tertiary"
             class="btn-remove"
             data-testid="btn-remove-header"
+            :disabled="localHeaders.length === 1"
             @click="removeHeader(i)"
           >
             <template #icon>
               <TrashIcon
                 class="delete-item"
+                :color="localHeaders.length > 1 ? KUI_COLOR_TEXT_DANGER : undefined"
               />
             </template>
           </KButton>
@@ -132,9 +134,7 @@
             @click="addHeader"
           >
             <template #icon>
-              <AddIcon
-                color="$kui-color-text-primary-strong"
-              />
+              <AddIcon />
             </template>
           </KButton>
         </div>
@@ -304,6 +304,7 @@ import type { MultiselectItem, SelectItem } from '@kong/kongponents'
 import useHelpers from '../composables/useHelpers'
 import links from '../links'
 import { AddIcon, TrashIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 
 const { i18n: { t } } = composables.useI18n()
 const { objectsAreEqual } = useHelpers()
diff --git a/packages/entities/entities-vaults/src/components/VaultForm.vue b/packages/entities/entities-vaults/src/components/VaultForm.vue
index 780fb55f10..9545d2826c 100644
--- a/packages/entities/entities-vaults/src/components/VaultForm.vue
+++ b/packages/entities/entities-vaults/src/components/VaultForm.vue
@@ -561,6 +561,7 @@ import {
 import { useRouter } from 'vue-router'
 import type { AxiosError, AxiosResponse } from 'axios'
 import endpoints from '../vaults-endpoints'
+import { KongIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_80 } from '@kong/design-tokens'
 
 interface ConfigFields {