Merge branch 'main' into r102139999/hardcoded-strings-i18n

Author: marinaaisa

package-lock.json

@@ -27,7 +27,7 @@
     "intersection-observer": "0.12.0",
     "portal-vue": "2.1.7",
     "vue-i18n": "^8.28.2",
-    "vue-virtual-scroller": "^1.0.10",
+    "vue-virtual-scroller": "^1.1.2",
     "webpack-theme-resolver-plugin": "3.0.0"
   },
   "devDependencies": {

package.json

@@ -33,6 +33,7 @@
 <script>
 import Tabnav from 'docc-render/components/Tabnav.vue';
 import TabnavItem from 'docc-render/components/TabnavItem.vue';
+import ImageLoadingStrategy from 'docc-render/constants/ImageLoadingStrategy';
 
 /**
  * Tab navigation component, that renders `ContentNode`,
@@ -46,6 +47,9 @@ export default {
     TabnavItem,
     Tabnav,
   },
+  provide: {
+    imageLoadingStrategy: ImageLoadingStrategy.eager,
+  },
   props: {
     vertical: {
       type: Boolean,

src/components/ContentNode/TabNavigator.vue

@@ -93,6 +93,11 @@ function constructAttributes(sources) {
 export default {
   name: 'ImageAsset',
   mixins: [imageAsset],
+  inject: {
+    imageLoadingStrategy: {
+      default: null,
+    },
+  },
   data: () => ({
     appState: AppStore.state,
     fallbackImageSrcSet: null,
@@ -109,7 +114,10 @@ export default {
     }) => lightVariantAttributes || darkVariantAttributes,
     darkVariantAttributes: ({ darkVariants }) => constructAttributes(darkVariants),
     lightVariantAttributes: ({ lightVariants }) => constructAttributes(lightVariants),
-    loading: ({ appState }) => appState.imageLoadingStrategy,
+    loading: ({ appState, imageLoadingStrategy }) => (
+      // use an image loading strategy, injected by a parent component, or the default app one
+      imageLoadingStrategy || appState.imageLoadingStrategy
+    ),
     preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
     prefersAuto: ({ preferredColorScheme }) => preferredColorScheme === ColorScheme.auto,
     prefersDark: ({ preferredColorScheme }) => preferredColorScheme === ColorScheme.dark,

src/components/ImageAsset.vue

@@ -47,7 +47,10 @@
           @keydown.up.exact.capture.prevent="focusPrev"
           @keydown.down.exact.capture.prevent="focusNext"
         >
-          <DynamicScrollerItem v-bind="{ active, item, dataIndex: index }">
+          <DynamicScrollerItem
+            v-bind="{ active, item, dataIndex: index }"
+            :ref="`dynamicScroller_${item.uid}`"
+          >
             <NavigatorCardItem
               :item="item"
               :isRendered="active"
@@ -484,6 +487,18 @@ export default {
       // if we remove APIChanges, remove all related tags as well
       this.selectedTags = this.selectedTags.filter(t => !this.$t(ChangeNames[t]));
     },
+    async activeUID(newUid, oldUID) {
+      // Update the dynamicScroller item's size, when we change the UID,
+      // to fix cases where applying styling that changes
+      // the size of active items.
+      await this.$nextTick();
+      const item = this.$refs[`dynamicScroller_${oldUID}`];
+      if (item && item.updateSize) {
+        // call the `updateSize` method on the `DynamicScrollerItem`, since it wont get triggered,
+        // on its own from changing the active item.
+        item.updateSize();
+      }
+    },
   },
   methods: {
     toggleAllNodes() {

src/components/Navigator/NavigatorCard.vue

@@ -12,6 +12,7 @@ import TabNavigator from '@/components/ContentNode/TabNavigator.vue';
 import { mount } from '@vue/test-utils';
 import Tabnav from '@/components/Tabnav.vue';
 import TabnavItem from '@/components/TabnavItem.vue';
+import ImageLoadingStrategy from '@/constants/ImageLoadingStrategy';
 import { flushPromises } from '../../../../test-utils';
 
 const titles = ['Long tab title', 'A Longer tab title'];
@@ -45,6 +46,8 @@ describe('TabNavigator.spec', () => {
     });
     expect(wrapper.findAll(TabnavItem)).toHaveLength(2);
     expect(wrapper.find('.tabs-content').text()).toEqual('First');
+    // eslint-disable-next-line no-underscore-dangle
+    expect(wrapper.vm._provided).toHaveProperty('imageLoadingStrategy', ImageLoadingStrategy.eager);
   });
 
   it('sets the TabNavigator in `vertical` mode', async () => {

tests/unit/components/ContentNode/TabNavigator.spec.js

@@ -11,6 +11,7 @@
 import { shallowMount } from '@vue/test-utils';
 import ImageAsset from 'docc-render/components/ImageAsset.vue';
 
+import ImageLoadingStrategy from '@/constants/ImageLoadingStrategy';
 import { flushPromises } from '../../../test-utils';
 
 jest.mock('docc-render/stores/AppStore', () => ({
@@ -431,4 +432,31 @@ describe('ImageAsset', () => {
 
     consoleSpy.mockRestore();
   });
+
+  it('allows setting the loading strategy by a parent component', async () => {
+    const url = 'https://www.example.com/image.png';
+    const wrapper = shallowMount(ImageAsset, {
+      provide: {
+        imageLoadingStrategy: ImageLoadingStrategy.eager,
+      },
+      propsData: {
+        variants: [
+          {
+            traits: [
+              '2x',
+              'light',
+            ],
+            url,
+            size: {
+              width: 1202,
+              height: 630,
+            },
+          },
+        ],
+      },
+    });
+
+    const image = wrapper.find('img');
+    expect(image.attributes('loading')).toBe(ImageLoadingStrategy.eager);
+  });
 });

tests/unit/components/ImageAsset.spec.js

@@ -12,7 +12,7 @@ import NavigatorCard from '@/components/Navigator/NavigatorCard.vue';
 import BaseNavigatorCard from '@/components/Navigator/BaseNavigatorCard.vue';
 import { shallowMount } from '@vue/test-utils';
 import { TopicTypes } from '@/constants/TopicTypes';
-import { DynamicScroller } from 'vue-virtual-scroller';
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import 'intersection-observer';
 import { INDEX_ROOT_KEY, SIDEBAR_ITEM_SIZE } from '@/constants/sidebar';
 import NavigatorCardItem from '@/components/Navigator/NavigatorCardItem.vue';
@@ -43,6 +43,16 @@ const DynamicScrollerStub = {
     scrollToItem: jest.fn(),
   },
 };
+
+const DynamicScrollerItemStub = {
+  name: DynamicScrollerItem.name,
+  props: DynamicScrollerItem.props,
+  template: '<div class="dynamic-scroller-item-stub"><slot/></div>',
+  methods: {
+    updateSize: jest.fn(),
+  },
+};
+
 const root0 = {
   type: TopicTypes.collection,
   path: '/documentation/testkit',
@@ -162,6 +172,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(NavigatorC
   },
   stubs: {
     DynamicScroller: DynamicScrollerStub,
+    DynamicScrollerItem: DynamicScrollerItemStub,
     NavigatorCardItem: {
       props: NavigatorCardItem.props,
       template: '<div><button></button></div>',
@@ -1994,6 +2005,20 @@ describe('NavigatorCard', () => {
       });
     });
 
+    it('updates the size of the DynamicScrollerItem, for the previous UID item', async () => {
+      attachDivWithID(root0Child0.uid);
+      const wrapper = createWrapper();
+      await flushPromises();
+      const allItems = wrapper.findAll(NavigatorCardItem);
+      const allDynamicItems = wrapper.findAll(DynamicScrollerItemStub);
+      allItems.at(2).vm.$emit('navigate', root0Child1.uid);
+      await flushPromises();
+      expect(DynamicScrollerItemStub.methods.updateSize).toHaveBeenCalledTimes(1);
+      expect(DynamicScrollerItemStub.methods.updateSize.mock.instances[0]).toEqual(
+        allDynamicItems.at(1).vm,
+      );
+    });
+
     it('allows going back/forward, relative to last opened item, ignoring foreign trees', async () => {
       const duplicatedTree = {
         type: 'article',