chore: moves several components to our x namespace

Signed-off-by: John Cowen <[email protected]>
kumahq · Oct 22, 2024 · 568e276 · 568e276
1 parent e27e703
commit 568e276
Show file tree

Hide file tree

Showing 65 changed files with 251 additions and 399 deletions.
diff --git a/src/app/application/components/app-view/AppView.vue b/src/app/application/components/app-view/AppView.vue
@@ -51,12 +51,12 @@
       </header>
 
       <aside v-if="$slots.notifications">
-        <KAlert
+        <XAlert
           class="mb-4"
           appearance="warning"
         >
           <slot name="notifications" />
-        </KAlert>
+        </XAlert>
       </aside>
       <div class="stack">
         <slot

diff --git a/src/app/application/components/data-source/DataLoader.vue b/src/app/application/components/data-source/DataLoader.vue
@@ -19,7 +19,7 @@
           :error="allErrors[0]"
           :refresh="props.src !== '' ? refresh : () => {}"
         >
-          <!-- KAlert -->
+          <!-- XAlert -->
         </slot>
       </template>
       <slot

diff --git a/src/app/common/ErrorBlock.vue b/src/app/common/ErrorBlock.vue
@@ -27,30 +27,30 @@
         v-if="(error instanceof ApiError)"
         class="badge-list"
       >
-        <KBadge
+        <XBadge
           :appearance="props.appearance"
           data-testid="error-status"
         >
           {{ error.status }}
-        </KBadge>
+        </XBadge>
 
-        <KBadge
+        <XBadge
           v-if="error.type"
           appearance="neutral"
           data-testid="error-type"
           max-width="auto"
         >
           type: {{ error.type }}
-        </KBadge>
+        </XBadge>
 
-        <KBadge
+        <XBadge
           v-if="error.instance"
           appearance="neutral"
           data-testid="error-trace"
           max-width="auto"
         >
           trace: <TextWithCopyButton :text="error.instance" />
-        </KBadge>
+        </XBadge>
       </div>
 
       <div class="error-block-message mt-4">
@@ -81,7 +81,7 @@
     <template
       v-else
     >
-      <KAlert
+      <XAlert
         appearance="danger"
       >
         <div
@@ -110,7 +110,7 @@
             {{ error.message }}
           </p>
         </div>
-      </KAlert>
+      </XAlert>
     </template>
   </div>
 </template>

diff --git a/src/app/common/StatusBadge.vue b/src/app/common/StatusBadge.vue
@@ -1,13 +1,13 @@
 <template>
   <component :is="props.status === 'not_available' ? KTooltip : AnonymousComponent">
-    <KBadge
+    <XBadge
       class="status-badge"
       :appearance="BADGE_APPEARANCE[props.status]"
       max-width="auto"
       data-testid="status-badge"
     >
       {{ t(`http.api.value.${props.status}`) }}
-    </KBadge>
+    </XBadge>
     <template
       v-if="props.status === 'not_available'"
       #content

diff --git a/src/app/common/TagList.vue b/src/app/common/TagList.vue
@@ -7,10 +7,9 @@
       'tag-list--align-right': props.alignment === 'right',
     }"
   >
-    <KBadge
+    <XBadge
       v-for="(tag, index) in tagList"
       :key="index"
-      max-width="auto"
       class="tag"
       :appearance="tag.isKuma ? 'info' : 'neutral'"
     >
@@ -20,7 +19,7 @@
       >
         {{ tag.label }}:<b>{{ tag.value }}</b>
       </component>
-    </KBadge>
+    </XBadge>
   </component>
 </template>
 

diff --git a/src/app/common/TargetRef.vue b/src/app/common/TargetRef.vue
@@ -4,14 +4,14 @@
       v-if="routeTarget !== null"
       :to="routeTarget"
     >
-      <KBadge>
+      <XBadge>
         <slot />
-      </KBadge>
+      </XBadge>
     </RouterLink>
 
-    <KBadge v-else>
+    <XBadge v-else>
       <slot />
-    </KBadge>
+    </XBadge>
 
     <TagList
       v-if="props.targetRef.kind === 'MeshServiceSubset' && props.targetRef.tags"

diff --git a/src/app/connections/components/connection-traffic/ConnectionCard.vue b/src/app/connections/components/connection-traffic/ConnectionCard.vue
@@ -9,7 +9,7 @@
         :tags="[{label: 'kuma.io/service', value: props.service}]"
       />
       <div class="title">
-        <KBadge
+        <XBadge
           class="protocol"
           :appearance="props.protocol === 'passthrough' ? 'success' : 'info'"
         >
@@ -20,7 +20,7 @@
               defaultMessage: t(`http.api.value.${props.protocol}`),
             },
           ) }}
-        </KBadge>
+        </XBadge>
         <slot name="default" />
       </div>
     </template>

diff --git a/src/app/connections/views/ConnectionInboundSummaryClustersView.vue b/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.startsWith(`${props.data.service}::`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${props.data.service}::`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -55,7 +55,6 @@
 <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/ConnectionInboundSummaryOverviewView.vue b/src/app/connections/views/ConnectionInboundSummaryOverviewView.vue
@@ -32,11 +32,11 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               :appearance="props.data.state === 'Ready' ? 'success' : 'danger'"
             >
               {{ t(`http.api.value.${props.data.state}`) }}
-            </KBadge>
+            </XBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard layout="horizontal">
@@ -45,11 +45,11 @@
           </template>
 
           <template #body>
-            <KBadge
+            <XBadge
               appearance="info"
             >
               {{ t(`http.api.value.${props.data.protocol}`) }}
-            </KBadge>
+            </XBadge>
           </template>
         </DefinitionCard>
         <DefinitionCard layout="horizontal">
@@ -184,7 +184,7 @@
                               </dt>
                               <dd class="mt-2">
                                 <div>
-                                  <CodeBlock
+                                  <XCodeBlock
                                     :code="YAML.stringify(item.raw)"
                                     language="yaml"
                                     :show-copy-button="false"
@@ -211,7 +211,6 @@
 import { YAML } from '@/app/application'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import TagList from '@/app/common/TagList.vue'

diff --git a/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -30,7 +30,7 @@
           ].some(prefix => item.startsWith(prefix)) && (!item.includes('.rds.') || item.includes(`_${props.data.port}`))"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}.`, '').replace(`${props.data.name}.`, '')).join('\n')"
             is-searchable
@@ -51,7 +51,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -61,7 +61,6 @@
 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/'
 
 const props = defineProps<{

diff --git a/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue b/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.startsWith(`${route.params.connection}::`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map(item => item.replace(`${route.params.connection}::`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -55,6 +55,5 @@
 <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/ConnectionOutboundSummaryOverviewView.vue b/src/app/connections/views/ConnectionOutboundSummaryOverviewView.vue
@@ -24,11 +24,11 @@
             </template>
 
             <template #body>
-              <KBadge
+              <XBadge
                 appearance="info"
               >
                 {{ t(`http.api.value.${['grpc', 'http', 'tcp'].find(protocol => typeof props.data[protocol] !== 'undefined')}`) }}
-              </KBadge>
+              </XBadge>
             </template>
           </DefinitionCard>
           <div
@@ -123,7 +123,7 @@
                                       </DataCollection>
                                     </template>
                                   </DefinitionCard>
-                                  <CodeBlock
+                                  <XCodeBlock
                                     class="mt-2"
                                     :code="YAML.stringify(item.raw)"
                                     language="yaml"
@@ -233,7 +233,7 @@
                                         </dt>
                                         <dd class="mt-2">
                                           <div>
-                                            <CodeBlock
+                                            <XCodeBlock
                                               :code="YAML.stringify(item.raw)"
                                               language="yaml"
                                               :show-copy-button="false"
@@ -264,7 +264,6 @@
 import { YAML } from '@/app/application'
 import AccordionItem from '@/app/common/AccordionItem.vue'
 import AccordionList from '@/app/common/AccordionList.vue'
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import PolicyTypeTag from '@/app/common/PolicyTypeTag.vue'
 import type { DataplaneOverview } from '@/app/data-planes/data/'

diff --git a/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -25,7 +25,7 @@
           :predicate="item => item.includes(`.${route.params.connection}.`)"
           v-slot="{ items: lines }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="lines.map((item) => item.replace(`${route.params.connection}.`, '')).join('\n')"
             is-searchable
@@ -46,7 +46,7 @@
                 Refresh
               </KButton>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataCollection>
       </DataLoader>
     </AppView>
@@ -56,7 +56,6 @@
 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/'
 const props = defineProps<{
   dataplaneOverview: DataplaneOverview

diff --git a/src/app/data-planes/components/BuiltinGatewayPolicies.vue b/src/app/data-planes/components/BuiltinGatewayPolicies.vue
@@ -81,12 +81,12 @@
                         v-if="routeEntry.origins.length > 0"
                         class="badge-list"
                       >
-                        <KBadge
+                        <XBadge
                           v-for="(policy, policyIndex) in routeEntry.origins"
                           :key="`${index}-${policyIndex}`"
                         >
                           {{ policy.type }}
-                        </KBadge>
+                        </XBadge>
                       </div>
                     </div>
                   </template>

diff --git a/src/app/data-planes/views/DataPlaneClustersView.vue b/src/app/data-planes/views/DataPlaneClustersView.vue
@@ -20,7 +20,7 @@
           :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
           v-slot="{ data, refresh }"
         >
-          <CodeBlock
+          <XCodeBlock
             language="json"
             :code="data"
             is-searchable
@@ -40,13 +40,9 @@
                 Refresh
               </XAction>
             </template>
-          </CodeBlock>
+          </XCodeBlock>
         </DataLoader>
       </KCard>
     </AppView>
   </RouteView>
 </template>
-
-<script lang="ts" setup>
-import CodeBlock from '@/app/common/code-block/CodeBlock.vue'
-</script>
diff --git a/src/app/data-planes/views/DataPlaneConfigView.vue b/src/app/data-planes/views/DataPlaneConfigView.vue
@@ -58,5 +58,5 @@
 
 <script lang="ts" setup>
 import { sources } from '../sources'
-import ResourceCodeBlock from '@/app/common/code-block/ResourceCodeBlock.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 </script>