chore: Remove/move some unused or little used functions (#2744)

As part of our modularization of the application, we are working towards removing all our 'global' files/folders.

This PR:

- Moves `camelCaseToWords` to the only place we use it (inside `i18n::t`) and make it completely private as we don't want to use it for anything else.
- Converts any references to `import { useI18n, useKumaApi } from @/utilities` to their new modularized equivalents. (`kumaApi` will soon be removed entirely in favour of our auto-generated OpenAPI client)
- Removes `isSet` we only used it in one file, and there are better one liners to use than `isSet`
- Removes `getLabels`. Again, we only use it in one file and its a one liner. Note: We'll probably stop doing this reshaping anyway, just not now.

Signed-off-by: John Cowen <john.cowen@konghq.com>

src/app/application/components/app-collection/AppCollection.vue

@@ -111,8 +111,8 @@ import { KButton, KTable } from '@kong/kongponents'
 import { useSlots, ref, watch, Ref } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 
+import { useI18n } from '@/app/application'
 import EmptyBlock from '@/app/common/EmptyBlock.vue'
-import { useI18n } from '@/utilities'
 import type { TableHeader as KTableHeader, TablePreferences } from '@kong/kongponents'
 
 type CellAttrParams = {

src/app/application/components/route-view/RouteView.vue

@@ -50,7 +50,7 @@ import { computed, provide, inject, ref, watch, onBeforeUnmount, reactive, useAt
 import { useRoute, useRouter } from 'vue-router'
 
 import { ROUTE_VIEW_PARENT, ROUTE_VIEW_ROOT } from '.'
-import { useCan, useI18n, uniqueId } from '../../index'
+import { useCan, useI18n, uniqueId, useEnv } from '../../index'
 import {
   urlParam,
   normalizeUrlParam,
@@ -61,7 +61,6 @@ import {
 } from '../../utilities'
 import { useUri } from '@/app/application/services/data-source'
 import { sources } from '@/app/me/sources'
-import { useEnv } from '@/utilities'
 import { get } from '@/utilities/get'
 import type { RouteRecordRaw } from 'vue-router'
 

src/app/application/services/i18n/I18n.ts

@@ -1,7 +1,6 @@
 import { createI18n } from '@kong-ui-public/i18n'
 
 import type Env from '@/app/application/services/env/Env'
-import { camelCaseToWords } from '@/utilities/camelCaseToWords'
 import { get } from '@/utilities/get'
 
 declare module 'intl-messageformat' {
@@ -19,6 +18,14 @@ class I18nError extends Error {
     return this.message
   }
 }
+const camelCaseToWords = (str: string): string => {
+  const words = str
+    .split(/([A-Z][a-z]+)/)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  return words.charAt(0).toUpperCase() + words.substring(1)
+}
 
 export default <T extends I18nRecord>(strs: T, env: Env['var']) => {
   const i18n = createI18n<typeof strs>('en-us', strs, {

src/app/common/DeleteResourceModal.vue

@@ -42,8 +42,8 @@
 import { KAlert, KPrompt } from '@kong/kongponents'
 import { PropType, ref } from 'vue'
 
+import { useI18n } from '@/app/application'
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 

src/app/common/EmptyBlock.vue

@@ -77,7 +77,7 @@
 <script lang="ts" setup>
 import { KEmptyState } from '@kong/kongponents'
 
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 
 const { t } = useI18n()
 const props = withDefaults(defineProps<{

src/app/common/ErrorBlock.vue

@@ -79,9 +79,9 @@ import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 import { DangerIcon } from '@kong/icons'
 import { computed } from 'vue'
 
+import { useI18n } from '@/app/application'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 

src/app/common/StatusBadge.vue

@@ -20,9 +20,9 @@
 <script lang="ts" setup>
 import { KTooltip } from '@kong/kongponents'
 
+import { useI18n } from '@/app/application'
 import AnonymousComponent from '@/app/application/components/anonymous-component/AnonymousComponent.vue'
 import { StatusKeyword } from '@/types/index.d'
-import { useI18n } from '@/utilities'
 import type { BadgeAppearance } from '@kong/kongponents'
 
 const { t } = useI18n()

src/app/common/TagList.vue

@@ -28,7 +28,6 @@
 import { computed } from 'vue'
 
 import type { LabelValue, Tags } from '@/types/index.d'
-import { getLabels } from '@/utilities/getLabels'
 import type { RouteLocationNamedRaw } from 'vue-router'
 
 interface LabelValueWithRoute extends LabelValue {
@@ -46,7 +45,7 @@ const props = withDefaults(defineProps<{
 })
 
 const tagList = computed<LabelValueWithRoute[]>(() => {
-  const labels = Array.isArray(props.tags) ? props.tags : getLabels(props.tags)
+  const labels = Array.isArray(props.tags) ? props.tags : Object.entries(props.tags ?? {}).map(([label, value]) => ({ label, value }))
 
   return labels.map((tag) => {
     const { label, value } = tag

src/app/common/code-block/ResourceCodeBlock.vue

@@ -51,7 +51,7 @@
 import { computed } from 'vue'
 
 import CodeBlock from './CodeBlock.vue'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 import { toYaml } from '@/utilities/toYaml'
 
 type Resolve = (data: Object) => void

src/app/data-planes/data/index.ts

@@ -20,7 +20,6 @@ import type {
   PolicyTypeEntryConnection,
   SidecarDataplane as PartialSidecarDataplane,
 } from '@/types/index.d'
-import { isSet } from '@/utilities/isSet'
 
 type Connection = {
   name: string
@@ -138,7 +137,7 @@ const DataplaneNetworking = {
             name: `localhost_${port}`,
             listenerAddress: `${address}_${port}`,
             // If a health property is unset the inbound is considered healthy
-            health: { ready: !isSet(item.health) ? true : item.health.ready },
+            health: { ready: typeof item.health?.ready !== 'boolean' ? true : item.health.ready },
             service: item.tags['kuma.io/service'],
             protocol: item.tags['kuma.io/protocol'] ?? 'tcp',
             address,
@@ -308,7 +307,7 @@ function getIsCertExpired({ mTLS }: DataplaneInsight): boolean {
 }
 
 function getWarnings({ version }: DataplaneInsight, tags: LabelValue[], canUseZones: boolean): DataplaneWarning[] {
-  if (!isSet(version)) {
+  if (typeof version === 'undefined') {
     return []
   }
 
@@ -464,7 +463,7 @@ export function getDataplaneStatusCounts({ total = 0, online = 0, partiallyDegra
 }
 
 function getStatus({ gateway, inbounds }: DataplaneNetworking, connectedSubscription: DiscoverySubscription | undefined): 'online' | 'offline' | 'partially_degraded' {
-  const state = isSet(connectedSubscription) ? 'online' : 'offline'
+  const state = typeof connectedSubscription !== 'undefined' ? 'online' : 'offline'
 
   if (gateway) {
     return state

src/app/gateways/components/ListenerRoutes.vue

@@ -252,6 +252,7 @@
 import { computed } from 'vue'
 
 import type { MeshGateway } from '../data'
+import { useI18n } from '@/app/application'
 import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import TagList from '@/app/common/TagList.vue'
 import TargetRef from '@/app/common/TargetRef.vue'
@@ -260,7 +261,6 @@ import RuleMatch from '@/app/rules/components/RuleMatch.vue'
 import RuleMatchers from '@/app/rules/components/RuleMatchers.vue'
 import type { Rule } from '@/app/rules/data'
 import type { PolicyType } from '@/types/index.d'
-import { useI18n } from '@/utilities'
 import { matchesTags } from '@/utilities/matchesTags'
 
 const { t } = useI18n()

src/app/kuma/index.ts

@@ -3,7 +3,7 @@ import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
 import KumaApi from '@/app/kuma/services/kuma-api/KumaApi'
 import { RestClient } from '@/app/kuma/services/kuma-api/RestClient'
 import i18nEnUs from '@/locales/en-us'
-import { token } from '@/services/utils'
+import { token, createInjections } from '@/services/utils'
 import type { ServiceDefinition } from '@/services/utils'
 
 type Token = ReturnType<typeof token>
@@ -71,3 +71,8 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     }],
   ]
 }
+export const [
+  useKumaApi,
+] = createInjections(
+  TOKENS.api,
+)

src/app/meshes/components/MeshStatus.vue

@@ -54,9 +54,9 @@
 
 <script lang="ts" setup>
 import type { Mesh, MeshInsight } from '../data'
+import { useI18n } from '@/app/application'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
 import ResourceStatus from '@/app/common/ResourceStatus.vue'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 

src/app/onboarding/components/OnboardingAlert.vue

@@ -42,7 +42,7 @@
 <script lang="ts" setup>
 import { nextTick } from 'vue'
 
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 </script>
 

src/app/onboarding/components/graphs/KubernetesGraph.vue

@@ -684,7 +684,7 @@
 </template>
 <script lang="ts" setup>
 import { useOnboardingIcon } from '../../'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 const OnboardingIcon = useOnboardingIcon()
 </script>

src/app/onboarding/components/graphs/MemoryGraph.vue

@@ -364,7 +364,7 @@
 </template>
 <script lang="ts" setup>
 import { useOnboardingIcon } from '../../'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 const OnboardingIcon = useOnboardingIcon()
 </script>

src/app/onboarding/components/graphs/MultizoneGraph.vue

@@ -895,7 +895,7 @@
 </template>
 <script lang="ts" setup>
 import { useOnboardingIcon } from '../../'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 const OnboardingIcon = useOnboardingIcon()
 </script>

src/app/onboarding/components/graphs/PostgresGraph.vue

@@ -685,7 +685,7 @@
 </template>
 <script lang="ts" setup>
 import { useOnboardingIcon } from '../../'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 const OnboardingIcon = useOnboardingIcon()
 </script>

src/app/onboarding/components/graphs/StandaloneGraph.vue

@@ -446,7 +446,7 @@
 </template>
 <script lang="ts" setup>
 import { useOnboardingIcon } from '../../'
-import { useI18n } from '@/utilities'
+import { useI18n } from '@/app/application'
 const { t } = useI18n()
 const OnboardingIcon = useOnboardingIcon()
 </script>

src/app/onboarding/views/OnboardingConfigurationTypesView.vue

@@ -69,7 +69,7 @@ import PostgresGraph from '../components/graphs/PostgresGraph.vue'
 import OnboardingHeading from '../components/OnboardingHeading.vue'
 import OnboardingNavigation from '../components/OnboardingNavigation.vue'
 import OnboardingPage from '../components/OnboardingPage.vue'
-import { useEnv } from '@/utilities'
+import { useEnv } from '@/app/application'
 
 const env = useEnv()
 

src/app/policies/components/PolicySummary.vue

@@ -56,8 +56,8 @@
 
 <script lang="ts" setup>
 import type { Policy } from '../data'
+import { useI18n } from '@/app/application'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 

src/app/subscriptions/components/SubscriptionDetails.vue

@@ -53,8 +53,8 @@ import { PortalIcon } from '@kong/icons'
 import { KAlert } from '@kong/kongponents'
 import { PropType, computed } from 'vue'
 
+import { useI18n } from '@/app/application'
 import type { DiscoveryServiceStats, DiscoverySubscription, KDSSubscription } from '@/types/index.d'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 

src/app/zones-crud/views/ZoneCreateView.vue

@@ -379,10 +379,11 @@ import { computed, ref } from 'vue'
 import ZoneCreateKubernetesInstructions from '../components/ZoneCreateKubernetesInstructions.vue'
 import ZoneCreateUniversalInstructions from '../components/ZoneCreateUniversalInstructions.vue'
 import { sources } from '../sources'
+import { useI18n } from '@/app/application'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
 import { sources as cpSources } from '@/app/control-planes/sources'
+import { useKumaApi } from '@/app/kuma'
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
-import { useI18n, useKumaApi } from '@/utilities'
 
 const { t, tm } = useI18n()
 const kumaApi = useKumaApi()

src/app/zones/views/ZoneDetailTabsView.vue

@@ -111,7 +111,7 @@
 import type { ZoneOverviewSource } from '../sources'
 import DeleteResourceModal from '@/app/common/DeleteResourceModal.vue'
 import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
-import { useKumaApi } from '@/utilities'
+import { useKumaApi } from '@/app/kuma'
 
 const kumaApi = useKumaApi()
 async function deleteZone(name: string) {

src/app/zones/views/ZoneListView.vue

@@ -242,9 +242,9 @@ import DeleteResourceModal from '@/app/common/DeleteResourceModal.vue'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
 import StatusBadge from '@/app/common/StatusBadge.vue'
 import SummaryView from '@/app/common/SummaryView.vue'
+import { useKumaApi } from '@/app/kuma'
 import type { ZoneEgressOverview } from '@/app/zone-egresses/data'
 import type { ZoneIngressOverview } from '@/app/zone-ingresses/data'
-import { useKumaApi } from '@/utilities'
 import { get } from '@/utilities/get'
 
 const kumaApi = useKumaApi()