dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/components/SortableTable/selection.js

@@ -10,7 +10,7 @@ export const NONE = 'none';
 
 export default {
   mounted() {
-    const table = this.$el.querySelector('TABLE');
+    const table = this.$el && this.$el.querySelector('TABLE');
 
     this._onRowClickBound = this.onRowClick.bind(this);
     this._onRowMousedownBound = this.onRowMousedown.bind(this);
@@ -22,7 +22,7 @@ export default {
   },
 
   beforeUnmount() {
-    const table = this.$el.querySelector('TABLE');
+    const table = this.$el && this.$el.querySelector('TABLE');
 
     table.removeEventListener('click', this._onRowClickBound);
     table.removeEventListener('mousedown', this._onRowMousedownBound);
@@ -340,17 +340,6 @@ 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/StatusBadge.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+
+const STATUS = {
+  success: {
+    color: 'text-success',
+    icon:  'icon-checkmark'
+  },
+  warning: {
+    color: 'text-warning',
+    icon:  'icon-warning'
+  },
+  info: {
+    color: 'text-info',
+    icon:  'icon-info'
+  },
+  error: {
+    color: 'text-error',
+    icon:  'icon-error'
+  }
+};
+
+withDefaults(
+  defineProps<{
+    status?: 'success' | 'warning' | 'info' | 'error',
+    label?: string
+  }>(),
+  {
+    status: 'success',
+    label:  '',
+  }
+);
+
+</script>
+<template>
+  <div
+    class="status-badge"
+  >
+    <i
+      class="status-badge__icon icon"
+      :class="{
+        [STATUS[status].icon]: true,
+        [STATUS[status].color]: true
+      }"
+    />
+    <div
+      v-if="label"
+      class="status-badge__label"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-badge {
+  align-items: center;
+  display: inline-flex;
+  border: 1px solid;
+  border-color: var(--border);
+  margin-top: 20px;
+
+  & + & {
+    margin-left: 20px;
+  }
+
+  &__label {
+    border-left: 1px solid var(--border);
+    padding: 5px 20px;
+    color: var(--body-text);
+  }
+
+  &__icon {
+    text-align: center;
+    padding: 5px 10px;
+  }
+}
+</style>

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

@@ -273,15 +273,15 @@ export default {
         :data-testid="tab.name"
         :class="{tab: true, active: tab.active, disabled: tab.disabled, error: (tab.error)}"
         role="presentation"
+        @click.prevent="select(tab.name, $event)"
+        @keyup.enter.space="select(tab.name, $event)"
       >
         <a
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
-          role="tab"
-          @click.prevent="select(tab.name, $event)"
-          @keyup.enter.space="select(tab.name, $event)"
+          role="tab"  
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -367,15 +367,6 @@ 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;
@@ -391,8 +382,12 @@ export default {
     }
   }
 
-  &:focus .tab.active a span {
-    text-decoration: underline;
+  &:focus {
+    outline: none;
+
+    & .tab.active a span {
+      text-decoration: none;
+    }
   }
 
   .tab {
@@ -409,7 +404,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: underline;
+          text-decoration: none;
         }
       }
     }
@@ -479,45 +474,68 @@ export default {
 
 .side-tabs {
   display: flex;
-  box-shadow: 0 0 20px var(--shadow);
+  flex-direction: column;
+  /* box-shadow: 0 0 20px var(--shadow);
   border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg);
-
+  background-color: var(--tabbed-sidebar-bg); */
+margin: 0px -20px;
   .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;
-    flex: 1 0;
-    flex-direction: column;
+    border-bottom:1px solid #d7d7d7;
+    padding: 0 0 0 20px;
+    /* flex: 1 0; */
+    /* flex-direction: column; */
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
-
     & .tab {
-      width: 100%;
-      border-left: solid 5px transparent;
+      /* width: 100%; */
+      min-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;
 
       &.toggle A {
         color: var(--primary);
+        padding: 0px;
       }
 
       A {
-        color: var(--primary);
+        color: var(--input-label);
+        padding: 0px;
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-left: solid 5px var(--primary);
+        border-top: solid 2px var(--primary);
+        position: relative;
+        &.active::before{
+          position: absolute;
+          right: 0;
+          left: 0;
+          top: 34px;
+          border-bottom: 1px solid #fff;
+          content: '';
 
+        }
         & A {
-          color: var(--input-label);
+          color: var(--primary);
         }
       }
 
@@ -561,7 +579,7 @@ export default {
   &
 
   .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 pt-20"
+          class="controls-row"
         >
           <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: 70px;
+  margin-bottom: calc($footer-height + 10px);
 }
 
   .controls-row {

package/components/YamlEditor.vue

@@ -235,6 +235,7 @@ export default {
         >{{ t('generic.split') }}</button>
       </span>
     </div>
+
     <CodeMirror
       v-if="showCodeEditor"
       ref="cm"
@@ -247,7 +248,6 @@ export default {
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"
-      @validationChanged="$emit('validationChanged', $event)"
     />
     <FileDiff
       v-else

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, disabled and spinning ::: CB true', () => {
+  it('click on async button should emit click with a proper state of waiting, appear 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.isDisabled).toBe(true);
+    expect(wrapper.vm.appearsDisabled).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 > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     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 > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     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 > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerDialogGlassElem.exists()).toBe(true);

package/components/__tests__/ModalManager.spec.ts

@@ -0,0 +1,176 @@
+import { mount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
+import { nextTick } from 'vue';
+
+import ModalManager from '@shell/components/ModalManager.vue';
+
+interface ModalManagerMethods {
+  registerBackgroundClosing(fn: Function): void;
+  close(): void;
+}
+
+const MockComponent = {
+  template: '<div data-testid="modal-manager-component">Mock Content</div>',
+  props:    ['someProp', 'resources', 'registerBackgroundClosing']
+};
+
+describe('modalManager.vue with Teleport', () => {
+  let store: Store<any>;
+  let getters: Record<string, () => any>;
+  let modalsDiv: HTMLDivElement;
+
+  beforeEach(() => {
+    // Create the teleport target container
+    modalsDiv = document.createElement('div');
+    modalsDiv.setAttribute('id', 'modals');
+    document.body.appendChild(modalsDiv);
+
+    getters = {
+      'modal/isOpen':              () => true,
+      'modal/component':           () => MockComponent,
+      'modal/componentProps':      () => ({ someProp: 'testValue' }),
+      'modal/resources':           () => ({ data: 'mockData' }),
+      'modal/closeOnClickOutside': () => true,
+      'modal/modalWidth':          () => '500px'
+    };
+
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+  });
+
+  afterEach(() => {
+    // Clean up the teleport container after each test
+    document.body.removeChild(modalsDiv);
+  });
+
+  const factory = () => {
+    return mount(ModalManager, {
+      attachTo: document.body, // attach so Teleport can work properly
+      global:   {
+        plugins: [store],
+        stubs:   {
+          AppModal: {
+            name:     'AppModal',
+            template: `<div data-testid="app-modal" @close="$emit('close')" :style="{ '--prompt-modal-width': width }"><slot /></div>`,
+            props:    ['clickToClose', 'width']
+          }
+        }
+      }
+    });
+  };
+
+  it('renders the AppModal and dynamic component when modal is open', async() => {
+    factory();
+
+    await nextTick();
+
+    // Because Teleport moves content out of the normal wrapper,
+    // we query the document for the teleported elements.
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+    const dynamicComponent = document.querySelector('[data-testid="modal-manager-component"]');
+
+    expect(appModal).toBeTruthy();
+    expect(dynamicComponent).toBeTruthy();
+    expect(appModal?.getAttribute('style')).toContain('--prompt-modal-width: 500px');
+
+    // We assume the mock component is rendered correctly if its markup is found.
+  });
+
+  it('does not render the AppModal when modal is closed', async() => {
+    getters['modal/isOpen'] = () => false;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+
+    expect(appModal).toBeNull();
+  });
+
+  it('does not render the AppModal when dynamic component is null', async() => {
+    getters['modal/component'] = () => null;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+
+    expect(appModal).toBeNull();
+  });
+
+  it('calls store commit when close is triggered', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
+
+    appModalWrapper.vm.$emit('close');
+    await nextTick();
+
+    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
+  });
+
+  it('calls registered background closing function on close', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const backgroundFn = jest.fn();
+
+    (wrapper.vm as unknown as ModalManagerMethods).registerBackgroundClosing(backgroundFn);
+    await nextTick();
+
+    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
+
+    appModalWrapper.vm.$emit('close');
+    await nextTick();
+
+    expect(backgroundFn).toHaveBeenCalledWith();
+    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
+  });
+
+  it('does nothing if modal is already closed when close is triggered', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => false;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const modalManager = wrapper.vm as unknown as ModalManagerMethods;
+    const spy = jest.spyOn(modalManager, 'close');
+
+    modalManager.close();
+    await nextTick();
+
+    expect(spy).toHaveBeenCalledWith();
+    expect(closeModalMutation).not.toHaveBeenCalled();
+  });
+});