Merge branch 'ps-add-keep-alive-slots' into 'master'

Add keep_alive_slots component

See merge request gitlab-org/gitlab!61637

app/assets/javascripts/vue_shared/components/keep_alive_slots.vue

+<script>
+export default {
+  props: {
+    slotKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      aliveSlotsLookup: {},
+    };
+  },
+  computed: {
+    aliveSlots() {
+      return Object.keys(this.aliveSlotsLookup);
+    },
+  },
+  watch: {
+    slotKey: {
+      handler(val) {
+        if (!val) {
+          return;
+        }
+
+        this.$set(this.aliveSlotsLookup, val, true);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    isCurrentSlot(key) {
+      return key === this.slotKey;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="slot in aliveSlots"
+      v-show="isCurrentSlot(slot)"
+      :key="slot"
+      class="gl-h-full gl-w-full"
+    >
+      <slot :name="slot"></slot>
+    </div>
+  </div>
+</template>

spec/frontend/vue_shared/components/keep_alive_slots_spec.js

+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
+
+const SLOT_1 = {
+  slotKey: 'slot-1',
+  title: 'Hello 1',
+};
+const SLOT_2 = {
+  slotKey: 'slot-2',
+  title: 'Hello 2',
+};
+
+describe('~/vue_shared/components/keep_alive_slots.vue', () => {
+  let wrapper;
+
+  const createSlotContent = ({ slotKey, title }) => `
+    <div data-testid="slot-child" data-slot-id="${slotKey}">
+      <h1>${title}</h1>
+      <input type="text" />
+    </div>
+  `;
+  const createComponent = (props = {}) => {
+    wrapper = mountExtended(KeepAliveSlots, {
+      propsData: props,
+      slots: {
+        [SLOT_1.slotKey]: createSlotContent(SLOT_1),
+        [SLOT_2.slotKey]: createSlotContent(SLOT_2),
+      },
+    });
+  };
+
+  const findRenderedSlots = () =>
+    wrapper.findAllByTestId('slot-child').wrappers.map((x) => ({
+      title: x.find('h1').text(),
+      inputValue: x.find('input').element.value,
+      isVisible: x.isVisible(),
+    }));
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('doesnt show anything', () => {
+      expect(findRenderedSlots()).toEqual([]);
+    });
+
+    describe('when slotKey is changed', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ slotKey: SLOT_1.slotKey });
+        await nextTick();
+      });
+
+      it('shows slot', () => {
+        expect(findRenderedSlots()).toEqual([
+          {
+            title: SLOT_1.title,
+            isVisible: true,
+            inputValue: '',
+          },
+        ]);
+      });
+
+      it('hides everything when slotKey cannot be found', async () => {
+        wrapper.setProps({ slotKey: '' });
+        await nextTick();
+
+        expect(findRenderedSlots()).toEqual([
+          {
+            title: SLOT_1.title,
+            isVisible: false,
+            inputValue: '',
+          },
+        ]);
+      });
+
+      describe('when user intreracts then slotKey changes again', () => {
+        beforeEach(async () => {
+          wrapper.find('input').setValue('TEST');
+          wrapper.setProps({ slotKey: SLOT_2.slotKey });
+          await nextTick();
+        });
+
+        it('keeps first slot alive but hidden', () => {
+          expect(findRenderedSlots()).toEqual([
+            {
+              title: SLOT_1.title,
+              isVisible: false,
+              inputValue: 'TEST',
+            },
+            {
+              title: SLOT_2.title,
+              isVisible: true,
+              inputValue: '',
+            },
+          ]);
+        });
+      });
+    });
+  });
+
+  describe('initialized with slotKey', () => {
+    beforeEach(() => {
+      createComponent({ slotKey: SLOT_2.slotKey });
+    });
+
+    it('shows slot', () => {
+      expect(findRenderedSlots()).toEqual([
+        {
+          title: SLOT_2.title,
+          isVisible: true,
+          inputValue: '',
+        },
+      ]);
+    });
+  });
+});