refactor: update Kongponents to KModal/KPrompt milestone (#2118)

* chore(deps): update Kongponents Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * chore(KModal): address breaking changes Rename `props.isVisible` to `props.visible`. Rename `canceled` event to `cancel`. Remove `header-content` slot use as it’s not needed anymore. The `props.title` string will be used automatically. Change `body-content` slot to default slot. Change `action-buttons` slot to `footer-actions` slot. Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * chore(KPrompt): address breaking changes Rename `props.isVisible` to `props.visible`. Rename `canceled` event to `cancel`. Change `body-content` slot to default slot. Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * chore(zones): remove divider from single item dropdown item Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> --------- Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>
kumahq · Feb 5, 2024 · f11cf38 · f11cf38
1 parent 0479403
commit f11cf38
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 55 deletions.
diff --git a/features/zones/Delete.feature b/features/zones/Delete.feature
@@ -7,8 +7,8 @@ Feature: zones / delete
       | actions-button | $item:nth-child(1) [data-testid='dropdown-trigger'] button     |
       | delete-button  | $item:nth-child(1) [data-testid='dropdown-delete-item'] button |
       | delete-prompt  | [data-testid="delete-zone-modal"]                              |
-      | confirm-button | $delete-prompt .k-prompt-proceed                               |
-      | confirm-input  | $delete-prompt .k-prompt-confirm-text .k-input                 |
+      | confirm-button | $delete-prompt [data-testid='modal-action-button']             |
+      | confirm-input  | $delete-prompt [data-testid='confirmation-input']              |
 
     And the environment
       """

diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   "dependencies": {
     "@kong-ui-public/i18n": "2.1.0",
     "@kong/icons": "1.8.14",
-    "@kong/kongponents": "9.0.0-alpha.96",
+    "@kong/kongponents": "9.0.0-alpha.101",
     "@vueuse/core": "10.7.2",
     "brandi": "5.0.0",
     "deepmerge": "4.3.1",

diff --git a/src/app/common/DeleteResourceModal.vue b/src/app/common/DeleteResourceModal.vue
@@ -2,44 +2,42 @@
   <KPrompt
     :action-button-text="props.actionButtonText"
     :confirmation-text="props.confirmationText"
-    :is-visible="props.isVisible"
+    :visible="props.isVisible"
     :title="props.title"
     type="danger"
-    @canceled="emit('cancel')"
+    @cancel="emit('cancel')"
     @proceed="deleteResource"
   >
-    <template #body-content>
-      <slot name="body-content" />
+    <slot />
 
-      <KAlert
-        v-if="error !== null"
-        class="mt-4"
-        appearance="danger"
-        is-dismissible
-      >
-        <template #alertMessage>
-          <template v-if="(error instanceof ApiError)">
-            <p>{{ t('common.error_state.api_error', { status: error.status, title: error.detail }) }}</p>
+    <KAlert
+      v-if="error !== null"
+      class="mt-4"
+      appearance="danger"
+      is-dismissible
+    >
+      <template #alertMessage>
+        <template v-if="(error instanceof ApiError)">
+          <p>{{ t('common.error_state.api_error', { status: error.status, title: error.detail }) }}</p>
 
-            <ul
-              v-if="error.invalidParameters.length > 0"
-              :data-testid="`error-${error.status}`"
+          <ul
+            v-if="error.invalidParameters.length > 0"
+            :data-testid="`error-${error.status}`"
+          >
+            <li
+              v-for="(parameter, index) in error.invalidParameters"
+              :key="index"
             >
-              <li
-                v-for="(parameter, index) in error.invalidParameters"
-                :key="index"
-              >
-                <b><code>{{ parameter.field }}</code></b>: {{ parameter.reason }}
-              </li>
-            </ul>
-          </template>
+              <b><code>{{ parameter.field }}</code></b>: {{ parameter.reason }}
+            </li>
+          </ul>
+        </template>
 
-          <template v-else>
-            <p>{{ t('common.error_state.default_error') }}</p>
-          </template>
+        <template v-else>
+          <p>{{ t('common.error_state.default_error') }}</p>
         </template>
-      </KAlert>
-    </template>
+      </template>
+    </KAlert>
   </KPrompt>
 </template>
 

diff --git a/src/app/zones/components/ZoneActionMenu.vue b/src/app/zones/components/ZoneActionMenu.vue
@@ -28,11 +28,9 @@
       @cancel="toggleDeleteModal"
       @delete="navigateToListView"
     >
-      <template #body-content>
-        <p>{{ t('common.delete_modal.text1', { type: 'Zone', name: props.zoneOverview.name }) }}</p>
+      <p>{{ t('common.delete_modal.text1', { type: 'Zone', name: props.zoneOverview.name }) }}</p>
 
-        <p>{{ t('common.delete_modal.text2') }}</p>
-      </template>
+      <p>{{ t('common.delete_modal.text2') }}</p>
     </DeleteResourceModal>
   </div>
 </template>

diff --git a/src/app/zones/views/ZoneCreateView.vue b/src/app/zones/views/ZoneCreateView.vue
@@ -360,21 +360,15 @@
       </div>
 
       <KModal
-        :is-visible="isConfirmModalVisible"
+        :visible="isConfirmModalVisible"
         :title="t('zones.form.confirm_modal.title')"
         data-testid="confirm-exit-modal"
-        @canceled="toggleConfirmModal"
+        @cancel="toggleConfirmModal"
         @proceed="route.replace({ name: 'zone-cp-list-view' })"
       >
-        <template #header-content>
-          {{ t('zones.form.confirm_modal.title') }}
-        </template>
-
-        <template #body-content>
-          {{ t('zones.form.confirm_modal.body') }}
-        </template>
+        {{ t('zones.form.confirm_modal.body') }}
 
-        <template #action-buttons>
+        <template #footer-actions>
           <KButton
             appearance="primary"
             :to="{ name: 'zone-cp-list-view' }"

diff --git a/src/app/zones/views/ZoneListView.vue b/src/app/zones/views/ZoneListView.vue
@@ -214,7 +214,6 @@
 
                   <template #items>
                     <KDropdownItem
-                      has-divider
                       danger
                       data-testid="dropdown-delete-item"
                       @click="setDeleteZoneName(row.name)"
@@ -259,11 +258,9 @@
             @cancel="toggleDeleteModal"
             @delete="() => { toggleDeleteModal(); refresh() }"
           >
-            <template #body-content>
-              <p>{{ t('common.delete_modal.text1', { type: 'Zone', name: deleteZoneName }) }}</p>
+            <p>{{ t('common.delete_modal.text1', { type: 'Zone', name: deleteZoneName }) }}</p>
 
-              <p>{{ t('common.delete_modal.text2') }}</p>
-            </template>
+            <p>{{ t('common.delete_modal.text2') }}</p>
           </DeleteResourceModal>
         </DataSource>
       </AppView>

diff --git a/yarn.lock b/yarn.lock
@@ -1854,10 +1854,10 @@
   resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.8.14.tgz#3219563df669b8bb3e260df12ac211a5072938e6"
   integrity sha512-nJUTtLpqelKCTY8lS8VByWaHYUq1CuB5cBUX/q2FEDu5o6IKH/B7fEDQpb/pB1lLRYTqZXneHR/lGYjxy4u8eQ==
 
-"@kong/kongponents@9.0.0-alpha.96":
-  version "9.0.0-alpha.96"
-  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-alpha.96.tgz#4de56e5235d2cd559e5dd3aaf77ed3a6587a6daa"
-  integrity sha512-HGxjaTri9Fpvhhp2U1fUQWtirZEkBZIpQOWqhFR61Mm607aUf/Gm6lsk40D1rqZasW+8bjb6g28PJKJQpF2uxA==
+"@kong/kongponents@9.0.0-alpha.101":
+  version "9.0.0-alpha.101"
+  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-alpha.101.tgz#f239a3a480e118337475813ce767c2e0900c6580"
+  integrity sha512-ZSOuLVFd8NajbuPjynk7EhvCbv5VtZmwxjOELPZCVnRHuUIkhVnz8znN+jtlHf0MCyX5fMCBuhxf5SA/sAeaSw==
   dependencies:
     "@kong/icons" "^1.8.14"
     "@popperjs/core" "^2.11.8"