dashboard-shell-shell 1.0.113 → 1.0.115

package/components/SlideInPanelManager.vue

@@ -1,126 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-
-const HEADER_HEIGHT = 55;
-
-const store = useStore();
-const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
-const currentComponent = computed(() => store.getters['slideInPanel/component']);
-const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
-
-const panelTop = computed(() => {
-  const banner = document.getElementById('banner-header');
-  let height = HEADER_HEIGHT;
-
-  if (banner) {
-    height += banner.clientHeight;
-  }
-
-  return `${ height }px`;
-});
-
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
-const panelWidth = computed(() => currentProps?.value?.width || '33%');
-const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
-
-const panelTitle = computed(() => currentProps?.value?.title || 'Details');
-
-function closePanel() {
-  store.commit('slideInPanel/close');
-}
-</script>
-
-<template>
-  <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
-      <div
-        v-show="isOpen"
-        data-testid="slide-in-glass"
-        class="slide-in-glass"
-        :class="{ 'slide-in-glass-open': isOpen }"
-        @click="closePanel"
-      />
-      <div
-        class="slide-in"
-        :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
-      >
-        <div class="header">
-          <div class="title">
-            {{ panelTitle }}
-          </div>
-          <i
-            class="icon icon-close"
-            data-testid="slide-in-close"
-            :trigger-focus-trap="true"
-            tabindex="0"
-            @click="closePanel"
-          />
-        </div>
-        <div class="main-panel">
-          <component
-            :is="currentComponent"
-            v-if="isOpen || currentComponent"
-            v-bind="currentProps"
-            data-testid="slide-in-panel-component"
-            class="dynamic-panel-content"
-          />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style lang="scss" scoped>
-.slide-in-glass {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-}
-.slide-in-glass-open {
-  background-color: var(--body-bg);
-  display: block;
-  opacity: 0.5;
-  z-index: 1000;
-}
-
-.slide-in {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  z-index: 2000;
-  transition: right 0.5s ease;
-  border-left: 1px solid var(--border);
-  background-color: var(--body-bg);
-}
-
-.slide-in-open {
-  right: 0;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border-bottom: 1px solid var(--border);
-
-  .title {
-    flex: 1;
-    font-weight: bold;
-  }
-
-  .icon-close {
-    cursor: pointer;
-  }
-}
-
-.main-panel {
-  padding: 10px;
-  overflow: auto;
-}
-</style>

package/components/StatusBadge.vue

@@ -1,77 +0,0 @@
-<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/__tests__/ModalManager.spec.ts

@@ -1,176 +0,0 @@
-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();
-  });
-});

package/components/__tests__/SlideInPanelManager.spec.ts

@@ -1,166 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore, Store } from 'vuex';
-import { nextTick } from 'vue';
-import SlideInPanelManager from '@shell/components/SlideInPanelManager.vue';
-
-const MockComponent = {
-  template: '<div data-testid="slide-in-panel-component">Mock Panel Content</div>',
-  props:    ['width', 'title', 'extraProp']
-};
-
-describe('slideInPanelManager.vue with Teleport', () => {
-  let store: Store<any>;
-  let getters: Record<string, () => any>;
-  let slidesDiv: HTMLDivElement;
-
-  beforeEach(() => {
-    // Create teleport target container
-    slidesDiv = document.createElement('div');
-    slidesDiv.setAttribute('id', 'slides');
-    document.body.appendChild(slidesDiv);
-
-    getters = {
-      'slideInPanel/isOpen':         () => true,
-      'slideInPanel/component':      () => MockComponent,
-      'slideInPanel/componentProps': () => ({
-        width: '40%', title: 'Test Title', extraProp: 'extra'
-      })
-    };
-
-    store = createStore({
-      getters,
-      mutations: { 'slideInPanel/close': jest.fn() }
-    });
-  });
-
-  afterEach(() => {
-    // Clean up the teleport container
-    document.body.removeChild(slidesDiv);
-  });
-
-  const factory = () => {
-    return mount(SlideInPanelManager, {
-      attachTo: document.body, // attach to document so Teleport renders
-      global:   { plugins: [store] }
-    });
-  };
-
-  it('renders slide in panel with proper style when open', async() => {
-    factory();
-    await nextTick();
-
-    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
-    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
-    const slideComponent = document.querySelector('[data-testid="slide-in-panel-component"]') as HTMLElement;
-    const headerTitle = document.querySelector('#slides .slide-in .header .title') as HTMLElement;
-
-    expect(slidePanel).toBeTruthy();
-    expect(slideGlass).toBeTruthy();
-    expect(slideComponent).toBeTruthy();
-    expect(headerTitle.textContent?.trim()).toBe('Test Title');
-
-    const styleAttr = slidePanel.getAttribute('style') || '';
-
-    expect(styleAttr).toContain('width: 40%');
-    expect(styleAttr).toContain('top: 55px');
-    expect(styleAttr).toContain('height: calc(100vh - 55px)');
-    expect(styleAttr).toContain('right: 0');
-  });
-
-  it('renders default panel title when no title is provided', async() => {
-    // Update getter so that no title is provided
-    getters['slideInPanel/componentProps'] = () => ({ width: '40%' });
-    store = createStore({
-      getters,
-      mutations: { 'slideInPanel/close': jest.fn() }
-    });
-    factory();
-    await nextTick();
-
-    const headerTitle = document.querySelector('#slides #slide-in-panel-manager .header .title') as HTMLElement;
-
-    expect(headerTitle.textContent?.trim()).toBe('Details');
-  });
-
-  it('computes panelTop correctly when a banner exists', async() => {
-    // Create a banner element with a simulated clientHeight.
-    const banner = document.createElement('div');
-
-    banner.setAttribute('id', 'banner-header');
-    document.body.appendChild(banner);
-    // Simulate a banner with a clientHeight of 100.
-    Object.defineProperty(banner, 'clientHeight', { value: 100, configurable: true });
-
-    factory();
-    await nextTick();
-
-    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
-    const styleAttr = slidePanel.getAttribute('style') || '';
-
-    // Expected panelTop = HEADER_HEIGHT (55) + banner.clientHeight (100) = "155px"
-    expect(styleAttr).toContain('top: 155px');
-    expect(styleAttr).toContain('height: calc(100vh - 155px)');
-
-    document.body.removeChild(banner);
-  });
-
-  it('renders slide in glass as hidden and panel with negative right when closed', async() => {
-    // Set isOpen to false.
-    getters['slideInPanel/isOpen'] = () => false;
-    store = createStore({
-      getters,
-      mutations: { 'slideInPanel/close': jest.fn() }
-    });
-    factory();
-    await nextTick();
-
-    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
-
-    expect(slideGlass).toBeTruthy();
-    expect(slideGlass.style.display).toBe('none');
-
-    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
-    const styleAttr = slidePanel.getAttribute('style') || '';
-
-    // With currentProps width "40%", panelRight should be "-40%" when closed.
-    expect(styleAttr).toContain('right: -40%');
-  });
-
-  it('calls store commit when clicking on the slide-in glass overlay', async() => {
-    const closeMutation = jest.fn();
-
-    getters['slideInPanel/isOpen'] = () => true;
-    store = createStore({
-      getters,
-      mutations: { 'slideInPanel/close': closeMutation }
-    });
-    factory();
-    await nextTick();
-
-    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
-
-    slideGlass.click();
-    await nextTick();
-
-    expect(closeMutation).toHaveBeenCalledWith({}, undefined);
-  });
-
-  it('calls store commit when clicking on the slide-in close icon', async() => {
-    const closeMutation = jest.fn();
-
-    getters['slideInPanel/isOpen'] = () => true;
-    store = createStore({
-      getters,
-      mutations: { 'slideInPanel/close': closeMutation }
-    });
-    factory();
-    await nextTick();
-
-    const closeIcon = document.querySelector('[data-testid="slide-in-close"]') as HTMLElement;
-
-    closeIcon.click();
-    await nextTick();
-
-    expect(closeMutation).toHaveBeenCalledWith({}, undefined);
-  });
-});