dashboard-shell-shell 1.0.113 → 1.0.114

package/components/SortableTable/paging.js

@@ -15,8 +15,7 @@ export default {
     },
 
     indexTo() {
-      // return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
-      return Math.min(this.totalRows, this.indexFrom + Number(this.perPage) - 1);
+      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
     },
 
     totalPages() {
@@ -24,18 +23,17 @@ export default {
     },
 
     showPaging() {
-      // if (!this.paging) {
-      //   return false;
-      // }
+      if (!this.paging) {
+        return false;
+      }
 
-      // const havePages = this.totalPages > 1;
+      const havePages = this.totalPages > 1;
 
-      // if (this.altLoading) {
-      //   return havePages;
-      // }
+      if (this.altLoading) {
+        return havePages;
+      }
 
-      // return !this.loading && havePages;
-      return !this.loading && this.paging && this.totalPages >= 1;
+      return !this.loading && havePages;
     },
 
     pagingDisplay() {
@@ -63,9 +61,9 @@ export default {
   },
 
   data() {
-    // const perPage = this.getPerPage();
+    const perPage = this.getPerPage();
 
-    return { page: 1, perPage:10 };
+    return { page: 1, perPage };
   },
 
   watch: {
@@ -80,37 +78,31 @@ export default {
       }
     },
 
-    // page() {
-    //   this.debouncedPaginationChanged();
-    // },
+    page() {
+      this.debouncedPaginationChanged();
+    },
 
-    // perPage() {
-    //   this.debouncedPaginationChanged();
-    // },
+    perPage() {
+      this.debouncedPaginationChanged();
+    },
 
   },
 
   methods: {
-    // getPerPage() {
-    //   // perPage can not change while the list is displayed
-    //   let out = this.rowsPerPage || 0;
+    getPerPage() {
+      // perPage can not change while the list is displayed
+      let out = this.rowsPerPage || 0;
 
-    //   if ( out <= 0 ) {
-    //     out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
-    //   }
-
-    //   // This should ideally never happen, but the preference value could be invalid, so return something...
-    //   if ( out <= 0 ) {
-    //     out = 10;
-    //   }
-
-    //   return out;
-    // },
+      if ( out <= 0 ) {
+        out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
+      }
 
+      // This should ideally never happen, but the preference value could be invalid, so return something...
+      if ( out <= 0 ) {
+        out = 10;
+      }
 
-    setgetPerPage(num) {
-      this.setPage(1);
-      this.perPage = num;
+      return out;
     },
 
     setPage(num) {

package/components/SortableTable/selection.js

@@ -340,6 +340,17 @@ export default {
       if ( !isSelected ) {
         this.update([node], this.selectedRows.slice());
       }
+
+      let resources = this.selectedRows;
+
+      if ( this.mangleActionResources ) {
+        resources = await this.mangleActionResources(resources);
+      }
+
+      this.$store.commit(`action-menu/show`, {
+        resources,
+        event: e,
+      });
     },
 
     keySelectRow(row, more = false) {

package/components/Tabbed/Tab.vue

@@ -100,14 +100,14 @@ export default {
       v-if="shouldShowHeader"
       class="tab-header"
     >
-      <!-- <h2>
+      <h2>
         {{ labelDisplay }}
         <i
           v-if="tooltip"
           v-clean-tooltip="tooltip"
           class="icon icon-info icon-lg"
         />
-      </h2> -->
+      </h2>
       <slot name="tab-header-right" />
     </div>
     <slot v-bind="{active}" />
@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  /* margin-bottom: 15px; */
+  margin-bottom: 15px;
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -367,6 +367,15 @@ export default {
   margin: 0;
   padding: 0;
 
+  &:focus-visible {
+    outline: none;
+
+    .tab.active {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+  }
+
   &.horizontal {
     border: solid thin var(--border);
     border-bottom: 0;
@@ -382,12 +391,8 @@ export default {
     }
   }
 
-  &:focus {
-    outline: none;
-
-    & .tab.active a span {
-      text-decoration: none;
-    }
+  &:focus .tab.active a span {
+    text-decoration: underline;
   }
 
   .tab {
@@ -404,7 +409,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -474,68 +479,45 @@ export default {
 
 .side-tabs {
   display: flex;
-  flex-direction: column;
-  /* box-shadow: 0 0 20px var(--shadow);
+  box-shadow: 0 0 20px var(--shadow);
   border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg); */
-margin: 0px -20px;
+  background-color: var(--tabbed-sidebar-bg);
+
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    /* width: $sideways-tabs-width; */
-    /* min-width: $sideways-tabs-width; */
+    width: $sideways-tabs-width;
+    min-width: $sideways-tabs-width;
     display: flex;
-    border-bottom:1px solid #d7d7d7;
-    padding: 0 0 0 20px;
-    /* flex: 1 0; */
-    /* flex-direction: column; */
+    flex: 1 0;
+    flex-direction: column;
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
+
     & .tab {
-      /* width: 100%; */
-      width: 120px;
-      height: 36px;
-      /* border-top: solid 5px transparent; */
-      display: flex;
-      justify-content: center;
-      padding: 8px 16px;
-      box-sizing: border-box;
-      border: 1px solid #d7d7d7;
-      border-bottom: 0px;
-      margin-right: 5px;
-      border-radius: 2px;
+      width: 100%;
+      border-left: solid 5px transparent;
 
       &.toggle A {
         color: var(--primary);
-        padding: 0px;
       }
 
       A {
-        color: var(--input-label);
-        padding: 0px;
+        color: var(--primary);
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-top: solid 2px var(--primary);
-        position: relative;
-        &.active::before{
-          position: absolute;
-          right: 0;
-          left: 0;
-          top: 34px;
-          border-bottom: 1px solid #fff;
-          content: '';
+        border-left: solid 5px var(--primary);
 
-        }
         & A {
-          color: var(--primary);
+          color: var(--input-label);
         }
       }
 
@@ -579,7 +561,7 @@ margin: 0px -20px;
   &
 
   .tab-container {
-    /* width: calc(100% - #{$sideways-tabs-width}); */
+    width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/Wizard.vue

@@ -426,7 +426,7 @@ export default {
         </div>
         <div
           id="wizard-footer-controls"
-          class="controls-row"
+          class="controls-row pt-20"
         >
           <slot
             name="cancel"
@@ -674,7 +674,7 @@ $spacer: 10px;
 // We have to account for the absolute position of the .controls-row
 .footer-error {
   margin-top: -40px;
-  margin-bottom: calc($footer-height + 10px);
+  margin-bottom: 70px;
 }
 
   .controls-row {

package/components/__tests__/AsyncButton.test.ts

@@ -42,7 +42,7 @@ describe('component: AsyncButton', () => {
     expect(span.text()).toBe('some-string');
   });
 
-  it('click on async button should emit click with a proper state of waiting, appear disabled and spinning ::: CB true', () => {
+  it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
     const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
@@ -65,7 +65,7 @@ describe('component: AsyncButton', () => {
     expect(wrapper.emitted('click')).toHaveLength(1);
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.WAITING);
     expect(wrapper.vm.isSpinning).toBe(true);
-    expect(wrapper.vm.appearsDisabled).toBe(true);
+    expect(wrapper.vm.isDisabled).toBe(true);
     // testing cb function has been emitted
     expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
 

package/components/__tests__/FixedBanner.test.ts

@@ -40,7 +40,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showHeader).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -60,7 +60,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showFooter).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -84,7 +84,7 @@ describe('component: FixedBanner', () => {
     const bannerDialogElem = wrapper.find('.banner-dialog');
     const bannerDialogFrameElem = wrapper.find('.banner-dialog-frame');
     const buttonDialog = wrapper.find('.banner-dialog button');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerDialogGlassElem.exists()).toBe(true);

package/components/auth/Principal.vue

@@ -90,7 +90,6 @@ export default {
         <img
           :src="principal.avatarSrc"
           :class="{'round': principal.roundAvatar}"
-          :alt="t('principal.alt.avatar')"
         >
       </div>
       <div
@@ -99,9 +98,9 @@ export default {
       >
         <table>
           <tbody>
-            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
+            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
           </tbody>
         </table>
       </div>
@@ -165,12 +164,6 @@ export default {
     grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
-    th {
-      text-align: left;
-      font-weight: normal;
-      padding-right: 10px;
-    }
-
     &.showLabels {
       grid-template-areas:
         "avatar name";

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -51,9 +51,8 @@ describe('component: RoleDetailEdit', () => {
     const wrapper = mount(RoleDetailEdit, {
       props: {
         value: {
-          rules:    [{ verbs }],
-          subtype:  'GLOBAL',
-          metadata: { name: 'global-role-with-inherited' },
+          rules:   [{ verbs }],
+          subtype: 'GLOBAL'
         },
       },