Use KModal for summary dialog

Author: MisRob

contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js

@@ -382,12 +382,10 @@ describe('StagingTreePage', () => {
       expect(removeMultipleSpaces(text)).toBe('Total size: 8 MB (+ 8 MB)');
     });
 
-    it('summary details dialog is not visible by default', () => {
-      expect(getSummaryDetailsDialog(wrapper).isVisible()).toBe(false);
-    });
-
     it('opens summary details dialog when view summary button is clicked', () => {
+      expect(getSummaryDetailsDialog(wrapper).exists()).toBe(false);
       getDisplaySummaryDetailsDialogBtn(wrapper).trigger('click');
+
       expect(getSummaryDetailsDialog(wrapper).isVisible()).toBe(true);
     });
 

contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue

@@ -170,38 +170,13 @@
           </VFlex>
 
           <VFlex class="bottom-bar-btns">
-            <VDialog
-              v-model="displaySummaryDetailsDialog"
-              width="500"
+            <VBtn
+              flat
+              data-test="display-summary-details-dialog-btn"
+              @click="displaySummaryDetailsDialog = true"
             >
-              <template v-slot:activator="{ on }">
-                <VBtn
-                  flat
-                  data-test="display-summary-details-dialog-btn"
-                  v-on="on"
-                >
-                  {{ $tr('openSummaryDetailsDialogBtn') }}
-                </VBtn>
-              </template>
-
-              <VCard data-test="summary-details-dialog">
-                <VCardTitle primary-title class="font-weight-bold title">
-                  {{ $tr('summaryDetailsDialogTitle') }}
-                </VCardTitle>
-                <VCardText>
-                  <DiffTable :stagingDiff="stagingDiff" @reload="reloadCurrentChannelStagingDiff" />
-                </VCardText>
-                <VCardActions>
-                  <VSpacer />
-                  <VBtn
-                    color="primary"
-                    @click="displaySummaryDetailsDialog = false"
-                  >
-                    {{ $tr('closeSummaryDetailsDialogBtn') }}
-                  </VBtn>
-                </VCardActions>
-              </VCard>
-            </VDialog>
+              {{ $tr('openSummaryDetailsDialogBtn') }}
+            </VBtn>
 
             <VDialog
               v-model="displayDeployDialog"
@@ -265,6 +240,16 @@
           </VFLex>
         </VLayout>
       </BottomBar>
+
+      <KModal
+        v-if="displaySummaryDetailsDialog"
+        data-test="summary-details-dialog"
+        :title="$tr('summaryDetailsDialogTitle')"
+        :cancelText="$tr('closeSummaryDetailsDialogBtn')"
+        @cancel="displaySummaryDetailsDialog = false"
+      >
+        <DiffTable :stagingDiff="stagingDiff" @reload="reloadCurrentChannelStagingDiff" />
+      </KModal>
     </template>
   </div>