fix: globally fix text color of buttons in alerts (#3323)

Fixes text color of all primary buttons within alerts.

See
Kong/kongponents@84a4e9f

I previously "fixed" this in
#3317 just for our upgrade
button, thinking this was the only instance

This PR undoes that ^ PR and fixes it globally instead, which will fix
the issue for all instances whether I remember about them or not.

### Before

<img width="816" alt="Screenshot 2024-12-19 at 11 22 19"
src="https://github.com/user-attachments/assets/a0341a9d-a2bc-47cc-b856-366f27d119ea"
/>

### After

<img width="813" alt="Screenshot 2024-12-19 at 11 08 31"
src="https://github.com/user-attachments/assets/472eff96-54b2-4573-bcd9-1ece0a7eb31e"
/>

---------

Signed-off-by: John Cowen <[email protected]>

packages/kuma-gui/src/app/application/components/app-view/AppView.vue

@@ -53,7 +53,7 @@
       <aside v-if="$slots.notifications">
         <XAlert
           class="mb-4"
-          appearance="warning"
+          variant="warning"
         >
           <slot name="notifications" />
         </XAlert>

packages/kuma-gui/src/app/common/ErrorBlock.vue

@@ -82,7 +82,7 @@
       v-else
     >
       <XAlert
-        appearance="danger"
+        variant="danger"
       >
         <div
           class="error-block-message"

packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue

@@ -508,7 +508,7 @@
             >
               <XAlert
                 class="mt-4"
-                appearance="warning"
+                variant="warning"
               >
                 <div
                   v-html="t('data-planes.routes.item.mtls.disabled')"

packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue

@@ -195,9 +195,6 @@ html.no-navigation {
 </style>
 
 <style lang="scss" scoped>
-.upgrade-alert :deep(.k-button) {
-  color: $kui-color-text-inverse !important;
-}
 .app-content-container {
   padding-top: var(--AppHeaderHeight, initial);
   display: var(--AppDisplay);

packages/kuma-gui/src/app/onboarding/components/OnboardingAlert.vue

@@ -9,8 +9,7 @@
     >
       <XAlert
         v-if="data?.closed !== true"
-        appearance="success"
-        dismissible
+        variant="success"
         data-testid="onboarding-notification"
         @dismiss="async () => {
           submit({

packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue

@@ -91,7 +91,7 @@
       </div>
       <XAlert
         v-if="Object.keys(props.data.status.acknowledgements).length === 0"
-        appearance="info"
+        variant="info"
       >
         <template #icon>
           <PortalIcon />

packages/kuma-gui/src/app/x/components/x-about-card/README.md

@@ -0,0 +1 @@
+# x-about-card

packages/kuma-gui/src/app/x/components/x-alert/README.md

@@ -0,0 +1 @@
+# x-alert

packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue

@@ -0,0 +1,34 @@
+<template>
+  <KAlert
+    :appearance="props.variant"
+    :dismissible="typeof attrs.onDismiss === 'function'"
+  >
+    <template
+      v-for="(_, key) in slots"
+      :key="key"
+      #[`${key}`]
+    >
+      <slot :name="key" />
+    </template>
+  </KAlert>
+</template>
+<script lang="ts" setup>
+import { KAlert } from '@kong/kongponents'
+import { useSlots, useAttrs } from 'vue'
+
+import type { AlertAppearance } from '@kong/kongponents'
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+  variant?: AlertAppearance
+}>(), {
+  variant: 'warning',
+})
+</script>
+<style lang="scss" scoped>
+:deep(.k-button.primary) {
+  color: $kui-color-text-inverse !important;
+}
+</style>

packages/kuma-gui/src/app/x/index.ts

@@ -1,8 +1,9 @@
-import Kongponents, { KTooltip, KCard, KPop, KInputSwitch, KAlert, KCheckbox } from '@kong/kongponents'
+import Kongponents, { KTooltip, KCard, KPop, KInputSwitch, KCheckbox } from '@kong/kongponents'
 
 import XAboutCard from './components/x-about-card/XAboutCard.vue'
 import XAction from './components/x-action/XAction.vue'
 import XActionGroup from './components/x-action-group/XActionGroup.vue'
+import XAlert from './components/x-alert/XAlert.vue'
 import XBadge from './components/x-badge/XBadge.vue'
 import XBreadcrumbs from './components/x-breadcrumbs/XBreadcrumbs.vue'
 import XCodeBlock from './components/x-code-block/XCodeBlock.vue'
@@ -27,13 +28,13 @@ type Token = ReturnType<typeof token>
 
 declare module 'vue' {
   export interface GlobalComponents {
-    XAlert: typeof KAlert
     XCard: typeof KCard
     XPop: typeof KPop
     XInputSwitch: typeof KInputSwitch
     XCheckbox: typeof KCheckbox
     XTooltip: typeof KTooltip
     //
+    XAlert: typeof XAlert
     XIcon: typeof XIcon
     XI18n: typeof XI18n
     XInput: typeof XInput
@@ -75,7 +76,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     [$.xVueComponents, {
       service: () => {
         return [
-          ['XAlert', KAlert],
+          ['XAlert', XAlert],
           ['XCard', KCard],
           ['XPop', KPop],
           ['XInputSwitch', KInputSwitch],

packages/kuma-gui/src/app/zones/views/ZoneConfigView.vue

@@ -57,7 +57,7 @@
             v-else
             class="mt-4"
             data-testid="warning-no-subscriptions"
-            appearance="warning"
+            variant="warning"
           >
             {{ t('zone-cps.detail.no_subscriptions') }}
           </XAlert>