Merge pull request learningequality#3004 from MisRob/kds-kmodal-channeledit-stagingtreepage

KDS to Studio: KModal on staging tree page

Author: MisRob

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

@@ -166,10 +166,6 @@ const getDeployDialogStagedResources = wrapper => {
   return wrapper.find('[data-test="deploy-dialog-staged-resources"]');
 };
 
-const getDeployBtn = wrapper => {
-  return wrapper.find('[data-test="deploy-btn"]');
-};
-
 describe('StagingTreePage', () => {
   it('renders back to viewing link leading to a root tree page in the toolbar', () => {
     const wrapper = initWrapper();
@@ -382,21 +378,17 @@ 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);
-    });
 
-    it('deploy dialog is not visible by default', () => {
-      expect(getDeployDialog(wrapper).isVisible()).toBe(false);
+      expect(getSummaryDetailsDialog(wrapper).isVisible()).toBe(true);
     });
 
     it('opens deploy dialog when deploy button is clicked', () => {
+      expect(getDeployDialog(wrapper).exists()).toBe(false);
       getDisplayDeployDialogBtn(wrapper).trigger('click');
+
       expect(getDeployDialog(wrapper).isVisible()).toBe(true);
     });
 
@@ -416,12 +408,13 @@ describe('StagingTreePage', () => {
       });
 
       it('dispatches deploy channel action on deploy channel button click', () => {
-        getDeployBtn(wrapper).trigger('click');
+        getDeployDialog(wrapper).vm.$emit('submit');
+
         expect(mockDeployCurrentChannel).toHaveBeenCalledTimes(1);
       });
 
       it('redirects to a root tree page after deploy channel button click', async () => {
-        getDeployBtn(wrapper).trigger('click');
+        getDeployDialog(wrapper).vm.$emit('submit');
         await flushPromises();
 
         expect(wrapper.vm.$router.currentRoute.name).toBe(RouteNames.TREE_VIEW);

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

@@ -170,101 +170,66 @@
           </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"
-              width="500"
+            <VBtn
+              color="primary"
+              data-test="display-deploy-dialog-btn"
+              @click="displayDeployDialog = true"
             >
-              <template v-slot:activator="{ on }">
-                <VBtn
-                  color="primary"
-                  data-test="display-deploy-dialog-btn"
-                  v-on="on"
-                >
-                  {{ $tr('deployChannel') }}
-                </VBtn>
-              </template>
+              {{ $tr('deployChannel') }}
+            </VBtn>
+          </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>
 
-              <VCard data-test="deploy-dialog">
-                <VCardTitle primary-title class="font-weight-bold title">
-                  {{ $tr('deployChannel') }}
-                </VCardTitle>
-                <VCardText>
-                  <p>{{ $tr('deployDialogDescription') }}</p>
+      <KModal
+        v-if="displayDeployDialog"
+        data-test="deploy-dialog"
+        :title="$tr('deployChannel')"
+        :submitText="$tr('confirmDeployBtn')"
+        :cancelText="$tr('cancelDeployBtn')"
+        @submit="onDeployChannelClick"
+        @cancel="displayDeployDialog = false"
+      >
+        <p>{{ $tr('deployDialogDescription') }}</p>
 
-                  <VLayout data-test="deploy-dialog-live-resources">
-                    <VFlex xs4 class="font-weight-bold">
-                      {{ $tr('liveResources') }}:
-                    </VFlex>
-                    <VFlex>
-                      {{ $tr('topicsCount', { count: topicsCountLive }) }},
-                      {{ $tr('resourcesCount', { count: resourcesCountLive }) }}
-                    </VFlex>
-                  </VLayout>
+        <VLayout data-test="deploy-dialog-live-resources">
+          <VFlex xs4 class="font-weight-bold">
+            {{ $tr('liveResources') }}:
+          </VFlex>
+          <VFlex>
+            {{ $tr('topicsCount', { count: topicsCountLive }) }},
+            {{ $tr('resourcesCount', { count: resourcesCountLive }) }}
+          </VFlex>
+        </VLayout>
 
-                  <VLayout data-test="deploy-dialog-staged-resources">
-                    <VFlex xs4 class="font-weight-bold">
-                      {{ $tr('stagedResources') }}:
-                    </VFlex>
-                    <VFlex>
-                      {{ $tr('topicsCount', { count: topicsCountStaged }) }},
-                      {{ $tr('resourcesCount', { count: resourcesCountStaged }) }}
-                    </VFlex>
-                  </VLayout>
-                </VCardText>
-                <VCardActions>
-                  <VSpacer />
-                  <VBtn
-                    flat
-                    @click="displayDeployDialog = false"
-                  >
-                    {{ $tr('cancelDeployBtn') }}
-                  </VBtn>
-                  <VBtn
-                    color="primary"
-                    data-test="deploy-btn"
-                    @click="onDeployChannelClick"
-                  >
-                    {{ $tr('confirmDeployBtn') }}
-                  </VBtn>
-                </VCardActions>
-              </VCard>
-            </VDialog>
-          </VFLex>
+        <VLayout data-test="deploy-dialog-staged-resources">
+          <VFlex xs4 class="font-weight-bold">
+            {{ $tr('stagedResources') }}:
+          </VFlex>
+          <VFlex>
+            {{ $tr('topicsCount', { count: topicsCountStaged }) }},
+            {{ $tr('resourcesCount', { count: resourcesCountStaged }) }}
+          </VFlex>
         </VLayout>
-      </BottomBar>
+      </KModal>
     </template>
   </div>