replace remaining kbuttons with xactions

Signed-off-by: John Cowen <[email protected]>
kumahq · Oct 10, 2024 · a6073a8 · a6073a8
1 parent a156eaa
commit a6073a8
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 53 deletions.
diff --git a/src/app/connections/views/ConnectionInboundSummaryClustersView.vue b/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
@@ -37,14 +37,13 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KButton
+              <XAction
+                action="refresh"
                 appearance="primary"
                 @click="refresh"
               >
-                <RefreshIcon />
-
                 Refresh
-              </KButton>
+              </XAction>
             </template>
           </CodeBlock>
         </DataCollection>
@@ -53,8 +52,6 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import { RefreshIcon } from '@kong/icons'
-
 import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneInbound } from '@/app/data-planes/data'
 import type { ClustersDataSource } from '@/app/data-planes/sources'

diff --git a/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -42,14 +42,13 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KButton
+              <XAction
+                action="refresh"
                 appearance="primary"
                 @click="refresh"
               >
-                <RefreshIcon />
-
                 Refresh
-              </KButton>
+              </XAction>
             </template>
           </CodeBlock>
         </DataCollection>
@@ -58,8 +57,6 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import { RefreshIcon } from '@kong/icons'
-
 import { StatsSource } from '../sources'
 import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneInbound, DataplaneOverview } from '@/app/data-planes/data/'

diff --git a/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue b/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
@@ -37,14 +37,13 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KButton
+              <XAction
+                action="refresh"
                 appearance="primary"
                 @click="refresh"
               >
-                <RefreshIcon />
-
                 Refresh
-              </KButton>
+              </XAction>
             </template>
           </CodeBlock>
         </DataCollection>
@@ -53,8 +52,6 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import { RefreshIcon } from '@kong/icons'
-
 import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { ClustersDataSource } from '@/app/data-planes/sources'
 </script>
diff --git a/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -37,14 +37,13 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KButton
+              <XAction
+                action="refresh"
                 appearance="primary"
                 @click="refresh"
               >
-                <RefreshIcon />
-
                 Refresh
-              </KButton>
+              </XAction>
             </template>
           </CodeBlock>
         </DataCollection>
@@ -53,8 +52,6 @@
   </RouteView>
 </template>
 <script lang="ts" setup>
-import { RefreshIcon } from '@kong/icons'
-
 import { StatsSource } from '../sources'
 import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { DataplaneOverview } from '@/app/data-planes/data/'

diff --git a/src/app/data-planes/views/DataPlaneDetailView.vue b/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -284,14 +284,13 @@
                     </template>
                   </KInputSwitch>
 
-                  <KButton
+                  <XAction
+                    action="refresh"
                     appearance="primary"
                     @click="refresh"
                   >
-                    <RefreshIcon />
-
                     Refresh
-                  </KButton>
+                  </XAction>
                 </template>
                 <template #title>
                   <GatewayIcon
@@ -516,7 +515,7 @@
 
 <script lang="ts" setup>
 import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import { InfoIcon, ForwardIcon, GatewayIcon, RefreshIcon } from '@kong/icons'
+import { InfoIcon, ForwardIcon, GatewayIcon } from '@kong/icons'
 import { computed } from 'vue'
 
 import type { DataplaneOverview, DataplaneInbound } from '../data'

diff --git a/src/app/data-planes/views/DataPlaneStatsView.vue b/src/app/data-planes/views/DataPlaneStatsView.vue
@@ -32,13 +32,13 @@
             @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
             <template #primary-actions>
-              <KButton
+              <XAction
+                action="refresh"
                 appearance="primary"
                 @click="refresh"
               >
-                <RefreshIcon :size="KUI_ICON_SIZE_30" />
                 Refresh
-              </KButton>
+              </XAction>
             </template>
           </CodeBlock>
         </DataLoader>
@@ -48,9 +48,6 @@
 </template>
 
 <script lang="ts" setup>
-import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import { RefreshIcon } from '@kong/icons'
-
 import type { DataplaneOverview } from '../sources'
 import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import type { StatsSource } from '@/app/connections/sources'

diff --git a/src/app/kuma/components/ApplicationShell.vue b/src/app/kuma/components/ApplicationShell.vue
@@ -41,12 +41,12 @@
                     {{ t('common.product.name') }} update available
                   </p>
 
-                  <KButton
+                  <XAction
                     appearance="primary"
-                    :to="t('common.product.href.install')"
+                    :href="t('common.product.href.install')"
                   >
                     Update
-                  </KButton>
+                  </XAction>
                 </div>
               </KAlert>
             </DataSource>
@@ -63,11 +63,11 @@
             <KPop
               width="280"
             >
-              <KButton
+              <XAction
                 appearance="tertiary"
               >
                 Info
-              </KButton>
+              </XAction>
 
               <template #content>
                 <p>
@@ -117,7 +117,7 @@
               Onboarding
             </XAction>
           </XActionGroup>
-          <KButton
+          <XAction
             :to="{ name: 'diagnostics' }"
             appearance="tertiary"
             icon
@@ -128,7 +128,7 @@
             >
               Diagnostics
             </XIcon>
-          </KButton>
+          </XAction>
         </slot>
       </div>
     </header>

diff --git a/src/app/kuma/views/KumaNotFoundView.vue b/src/app/kuma/views/KumaNotFoundView.vue
@@ -23,12 +23,12 @@
           <p>The page or entity you were looking for does not exist.</p>
 
           <template #action>
-            <KButton
+            <XAction
               appearance="primary"
               :to="{ name: 'home' }"
             >
               Go Home
-            </KButton>
+            </XAction>
           </template>
         </KEmptyState>
       </div>

diff --git a/src/app/onboarding/components/OnboardingAlert.vue b/src/app/onboarding/components/OnboardingAlert.vue
@@ -25,14 +25,14 @@
             v-html="t('main-overview.detail.onboarding.message', { name: t('common.product.name') })"
           />
 
-          <KButton
+          <XAction
             appearance="primary"
             size="small"
             class="action-button"
             :to="{ name: 'onboarding-welcome-view' }"
           >
             {{ t('main-overview.detail.onboarding.get_started_link') }}
-          </KButton>
+          </XAction>
         </div>
       </KAlert>
     </DataSink>

diff --git a/src/app/onboarding/components/OnboardingNavigation.vue b/src/app/onboarding/components/OnboardingNavigation.vue
@@ -1,38 +1,37 @@
 <template>
   <div class="onboarding-actions">
-    <KButton
+    <XAction
       v-if="props.previousStep"
       appearance="secondary"
       :to="{ name: props.previousStep }"
       data-testid="onboarding-previous-button"
     >
       Back
-    </KButton>
+    </XAction>
 
     <div class="button-list">
-      <KButton
+      <XAction
         v-if="props.showSkip"
         appearance="tertiary"
         data-testid="onboarding-skip-button"
         :to="{ name: 'home' }"
       >
         Skip setup
-      </KButton>
+      </XAction>
 
-      <KButton
+      <XAction
         :disabled="!props.shouldAllowNext"
         appearance="primary"
         :to="{ name: props.lastStep ? 'home' : props.nextStep }"
         data-testid="onboarding-next-button"
       >
         {{ props.nextStepTitle }}
-      </KButton>
+      </XAction>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { KButton } from '@kong/kongponents'
 
 const props = defineProps({
   shouldAllowNext: {

diff --git a/src/app/x/components/x-action/XAction.vue b/src/app/x/components/x-action/XAction.vue
@@ -65,7 +65,21 @@
   <template
     v-else-if="props.href.length > 0"
   >
+    <KButton
+      v-if="['primary', 'secondary', 'tertiary', 'danger'].includes(props.appearance)"
+      data-testid="x-action"
+      v-bind="$attrs"
+      :appearance="props.appearance as ButtonAppearance"
+      :size="props.size"
+      :to="props.href"
+      target="_blank"
+    >
+      <slot
+        name="default"
+      />
+    </KButton>
     <a
+      v-else
       data-testid="x-action"
       v-bind="$attrs"
       :href="props.href"