chore(*): switch to public packages (#75)

* chore(*): switch to public packages

* chore(*): add bundle analyzer

.github/dependabot.yml

@@ -31,12 +31,10 @@ updates:
     target-branch: "main"
     allow:
       - dependency-name: "@kong/kongponents"
-      - dependency-name: "@kong-ui/*"
       - dependency-name: "@kong-ui-public/*"
       - dependency-name: "@playwright/test"
     groups:
       kong-packages:
         patterns:
           - "@kong/kongponents"
-          - "@kong-ui/*"
           - "@kong-ui-public/*"

.github/workflows/.reusable_build.yml

@@ -74,3 +74,10 @@ jobs:
         with:
           name: assets
           path: ./assets.tar.gz
+
+      - name: Upload bundle-analyzer
+        timeout-minutes: 5
+        uses: actions/upload-artifact@v3
+        with:
+          name: bundle-analyzer
+          path: bundle-analyzer/

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+test-results
+bundle-analyzer
 
 # Editor directories and files
 .vscode/*
@@ -25,5 +27,3 @@ dist-ssr
 
 # suppress build warning
 public/kconfig.js
-
-test-results

README.md

@@ -52,8 +52,6 @@ In addition, the plugin configuration UI provides instructions for each configur
 
 ## Contributing
 
-> Note: Kong Manager OSS can only be run locally by Kong employees. We are migrating private dependencies to public packages. Once completed, dependencies will be available to the community to build, develop, and contribute to this repository.
-
 Kong Manager OSS is written in JavaScript. It uses Vue for it's UI components, and `yarn` for managing dependencies. To build Kong Manager OSS locally please ensure that you have `node.js 18+` and `yarn` installed.
 
 You'll also need a running Kong Gateway instance. See [local testing](#local-testing) for a one-line solution. Alternatively, you can [build Kong Gateway from source](https://github.com/Kong/kong/tree/master/build).

package.json

@@ -19,21 +19,21 @@
   "dependencies": {
     "@kong-ui-public/app-layout": "^0.22.4",
     "@kong-ui-public/copy-uuid": "^1.1.5",
+    "@kong-ui-public/entities-certificates": "^1.1.2",
+    "@kong-ui-public/entities-consumer-credentials": "^1.1.4",
+    "@kong-ui-public/entities-consumers": "^1.1.4",
+    "@kong-ui-public/entities-gateway-services": "^1.1.5",
+    "@kong-ui-public/entities-key-sets": "^1.1.4",
+    "@kong-ui-public/entities-keys": "^1.1.5",
+    "@kong-ui-public/entities-plugins": "^1.1.2",
+    "@kong-ui-public/entities-routes": "^1.1.2",
+    "@kong-ui-public/entities-shared": "^1.2.4",
+    "@kong-ui-public/entities-snis": "^1.1.0",
+    "@kong-ui-public/entities-upstreams-targets": "^1.1.4",
+    "@kong-ui-public/entities-vaults": "^1.1.7",
+    "@kong-ui-public/forms": "^1.1.5",
     "@kong-ui-public/i18n": "^0.8.0",
     "@kong-ui-public/misc-widgets": "^0.5.19",
-    "@kong-ui/entities-certificates": "^0.19.22",
-    "@kong-ui/entities-consumer-credentials": "^0.9.21",
-    "@kong-ui/entities-consumers": "^0.18.24",
-    "@kong-ui/entities-gateway-services": "^0.15.25",
-    "@kong-ui/entities-key-sets": "^0.12.24",
-    "@kong-ui/entities-keys": "^0.15.24",
-    "@kong-ui/entities-plugins": "^0.13.2",
-    "@kong-ui/entities-routes": "^0.19.15",
-    "@kong-ui/entities-shared": "^0.46.2",
-    "@kong-ui/entities-snis": "^0.14.24",
-    "@kong-ui/entities-upstreams-targets": "^0.16.25",
-    "@kong-ui/entities-vaults": "^0.21.6",
-    "@kong-ui/forms": "^0.22.3",
     "@kong/kongponents": "^8.122.2",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.4.0",
@@ -60,9 +60,10 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "lodash-es": "^4.17.21",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.63.4",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-html": "^3.2.0"
   }
-}
+}

src/components/EntityForm/EntityForm.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script>
-import { customFields, getSharedFormName, sharedForms } from '@kong-ui/forms'
+import { customFields, getSharedFormName, sharedForms } from '@kong-ui-public/forms'
 import ConfirmModalDialog from './ConfirmModalDialog.vue'
 import EntityMixin from './mixins/EntityMixin'
 import RedirectMixin from './mixins/RedirectMixin'

src/components/EntityForm/NativeEntityForm.vue

@@ -92,7 +92,7 @@ import {
   redirectOnResponseStatus,
   getMessageFromError,
 } from './helpers'
-import { customFields } from '@kong-ui/forms'
+import { customFields } from '@kong-ui-public/forms'
 
 const { axiosInstance } = useAxios()
 const adminApiUrl = useAdminApiUrl()

src/components/EntityForm/mixins/EntityMixin.js

@@ -1,4 +1,4 @@
-import { customFields } from '@kong-ui/forms'
+import { customFields } from '@kong-ui-public/forms'
 import { capitalize, generateFieldLabel } from '../helpers'
 import { ArrayStringFieldSchema } from '../fields'
 

src/composables/useDetailGeneralConfig.ts

@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 import { config } from 'config'
-import type { KongManagerBaseEntityConfig } from '@kong-ui/entities-shared'
+import type { KongManagerBaseEntityConfig } from '@kong-ui-public/entities-shared'
 import { useAdminApiUrl } from './useAdminApiUrl'
 
 export const useDetailGeneralConfig = () => {

src/composables/useFormGeneralConfig.ts

@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 import { config } from 'config'
-import type { KongManagerBaseFormConfig } from '@kong-ui/entities-shared'
+import type { KongManagerBaseFormConfig } from '@kong-ui-public/entities-shared'
 import { useAdminApiUrl } from './useAdminApiUrl'
 
 export const useFormGeneralConfig = () => {

src/composables/useListGeneralConfig.ts

@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 import { config } from 'config'
-import type { KongManagerBaseTableConfig } from '@kong-ui/entities-shared'
+import type { KongManagerBaseTableConfig } from '@kong-ui-public/entities-shared'
 import { useAdminApiUrl } from './useAdminApiUrl'
 
 export const useListGeneralConfig = () => {

src/pages/ca-certificates/Detail.vue

@@ -17,7 +17,7 @@
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useI18n } from '@/composables/useI18n'
-import { CACertificateConfigCard } from '@kong-ui/entities-certificates'
+import { CACertificateConfigCard } from '@kong-ui-public/entities-certificates'
 import { computed, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 

src/pages/ca-certificates/Form.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { CACertificateForm } from '@kong-ui/entities-certificates'
+import { CACertificateForm } from '@kong-ui-public/entities-certificates'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/ca-certificates/List.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { CACertificateList, type EntityRow } from '@kong-ui/entities-certificates'
+import { CACertificateList, type EntityRow } from '@kong-ui-public/entities-certificates'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'

src/pages/certificates/Detail.vue

@@ -17,7 +17,7 @@
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useI18n } from '@/composables/useI18n'
-import { CertificateConfigCard } from '@kong-ui/entities-certificates'
+import { CertificateConfigCard } from '@kong-ui-public/entities-certificates'
 import { computed, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 

src/pages/certificates/Form.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { CertificateForm } from '@kong-ui/entities-certificates'
+import { CertificateForm } from '@kong-ui-public/entities-certificates'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/certificates/List.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { CertificateList, type EntityRow } from '@kong-ui/entities-certificates'
+import { CertificateList, type EntityRow } from '@kong-ui-public/entities-certificates'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'

src/pages/consumers/CredentialList.vue

@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-import { ConsumerCredentialList, type CredentialPlugins } from '@kong-ui/entities-consumer-credentials'
+import { ConsumerCredentialList, type CredentialPlugins } from '@kong-ui-public/entities-consumer-credentials'
 import PageHeader from '@/components/PageHeader.vue'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'

src/pages/consumers/Detail.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { ConsumerConfigCard } from '@kong-ui/entities-consumers'
+import { ConsumerConfigCard } from '@kong-ui-public/entities-consumers'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'

src/pages/consumers/Form.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ConsumerForm } from '@kong-ui/entities-consumers'
+import { ConsumerForm } from '@kong-ui-public/entities-consumers'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/consumers/List.vue

@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { ConsumerList, type EntityRow } from '@kong-ui/entities-consumers'
-import type { FilterSchema } from '@kong-ui/entities-shared'
+import { ConsumerList, type EntityRow } from '@kong-ui-public/entities-consumers'
+import type { FilterSchema } from '@kong-ui-public/entities-shared'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'

src/pages/key-sets/Detail.vue

@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { KeySetConfigCard } from '@kong-ui/entities-key-sets'
+import { KeySetConfigCard } from '@kong-ui-public/entities-key-sets'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'

src/pages/key-sets/Form.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { KeySetForm } from '@kong-ui/entities-key-sets'
+import { KeySetForm } from '@kong-ui-public/entities-key-sets'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/key-sets/List.vue

@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { KeySetList, type EntityRow } from '@kong-ui/entities-key-sets'
-import type { FilterSchema } from '@kong-ui/entities-shared'
+import { KeySetList, type EntityRow } from '@kong-ui-public/entities-key-sets'
+import type { FilterSchema } from '@kong-ui-public/entities-shared'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/keys/Detail.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { KeyConfigCard } from '@kong-ui/entities-keys'
+import { KeyConfigCard } from '@kong-ui-public/entities-keys'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'

src/pages/keys/Form.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { KeyForm } from '@kong-ui/entities-keys'
+import { KeyForm } from '@kong-ui-public/entities-keys'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/keys/List.vue

@@ -28,8 +28,8 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-import { KeyList, type EntityRow } from '@kong-ui/entities-keys'
-import type { FilterSchema } from '@kong-ui/entities-shared'
+import { KeyList, type EntityRow } from '@kong-ui-public/entities-keys'
+import type { FilterSchema } from '@kong-ui-public/entities-shared'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/plugins/Detail.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-import { PluginConfigCard, PluginIcon } from '@kong-ui/entities-plugins'
+import { PluginConfigCard, PluginIcon } from '@kong-ui-public/entities-plugins'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'

src/pages/plugins/Form.vue

@@ -74,7 +74,7 @@
 import axios from 'axios'
 import { marked } from 'marked'
 import * as _ from 'lodash-es'
-import { PluginScope } from '@kong-ui/entities-plugins'
+import { PluginScope } from '@kong-ui-public/entities-plugins'
 import EntityForm from '@/components/EntityForm/EntityForm.vue'
 import FormPageMixin from '@/components/EntityForm/mixins/FormPage'
 import { capitalize, uuidRegEx, redirectOnResponseStatus, isObjectEmpty } from '@/components/EntityForm/helpers'

src/pages/plugins/List.vue

@@ -31,8 +31,8 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, type RouteLocationRaw } from 'vue-router'
-import { PluginList, type EntityRow, type ViewRouteType, type EntityType } from '@kong-ui/entities-plugins'
-import type { FilterSchema } from '@kong-ui/entities-shared'
+import { PluginList, type EntityRow, type ViewRouteType, type EntityType } from '@kong-ui-public/entities-plugins'
+import type { FilterSchema } from '@kong-ui-public/entities-shared'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
@@ -142,7 +142,7 @@ const canEdit = async () => true
 
 // konnect has a special tag for this permission
 // set to always true since Kong Manager doesn't have such limitation
-// `@kong-ui/entites-plugins` will check `canEdit` internally so we don't need to check it here
+// `@kong-ui-public/entites-plugins` will check `canEdit` internally so we don't need to check it here
 const canToggle = async () => true
 
 const canRetrieve = async () => true

src/pages/plugins/PluginCard.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { PluginIcon } from '@kong-ui/entities-plugins'
+import { PluginIcon } from '@kong-ui-public/entities-plugins'
 
 export default {
   components: { PluginIcon },

src/pages/plugins/PluginMeta.ts

@@ -1,4 +1,4 @@
-import { usePluginMetaData } from '@kong-ui/entities-plugins'
+import { usePluginMetaData } from '@kong-ui-public/entities-plugins'
 
 const meta = usePluginMetaData()
 

src/pages/plugins/Select.vue

@@ -91,7 +91,7 @@
 
 <script>
 import axios from 'axios'
-import { PluginGroup, PluginScope } from '@kong-ui/entities-plugins'
+import { PluginGroup, PluginScope } from '@kong-ui-public/entities-plugins'
 import { sortAlpha } from '@/components/EntityForm/helpers'
 import { useAdminApiUrl } from '@/composables/useAdminApiUrl'
 import PluginCardSkeleton from './PluginCardSkeleton.vue'

src/pages/routes/Detail.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { RouteConfigCard } from '@kong-ui/entities-routes'
+import { RouteConfigCard } from '@kong-ui-public/entities-routes'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'

src/pages/routes/Form.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { RouteForm } from '@kong-ui/entities-routes'
+import { RouteForm } from '@kong-ui-public/entities-routes'
 import { useFormGeneralConfig } from '@/composables/useFormGeneralConfig'
 import { useFormRedirectOnCancel, useFormRedirectOnUpdate } from '@/composables/useFormRedirect'
 import { useToaster } from '@/composables/useToaster'

src/pages/routes/List.vue

@@ -28,8 +28,8 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-import { RouteList, type EntityRow } from '@kong-ui/entities-routes'
-import type { FilterSchema } from '@kong-ui/entities-shared'
+import { RouteList, type EntityRow } from '@kong-ui-public/entities-routes'
+import type { FilterSchema } from '@kong-ui-public/entities-shared'
 import { useListGeneralConfig } from '@/composables/useListGeneralConfig'
 import { useListRedirect } from '@/composables/useListRedirect'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'

src/pages/services/Detail.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { GatewayServiceConfigCard } from '@kong-ui/entities-gateway-services'
+import { GatewayServiceConfigCard } from '@kong-ui-public/entities-gateway-services'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
 import { useI18n } from '@/composables/useI18n'