extract backup-list-item component

+ use the correct date format string (CR)

- SUITEDEV-27058

src/renderer/components/backup-selector/backup-list-item/backup-list-item.html

@@ -0,0 +1,20 @@
+<div
+  class="e-actionlist__item"
+  :class="{
+    'e-actionlist__item-selected': selected,
+    'e-actionlist__item-active': hovered
+  }"
+  @mouseenter="mouseEnter()"
+  @mouseleave="mouseLeave()"
+  @click="$emit('click')"
+>
+  <e-icon v-if="selected" icon="check" class="e-actionlist__selected_marker">
+  </e-icon>
+  {{ time }}
+  <div
+    @click.stop="$emit('view')"
+    class="e-btn e-btn-small e-btn-onlyicon e-margin-left-m"
+  >
+    <e-icon icon="eye"></e-icon>
+  </div>
+</div>

src/renderer/components/backup-selector/backup-list-item/backup-list-item.js

@@ -0,0 +1,19 @@
+export default {
+  name: 'backup-list-item',
+  template: require('./backup-list-item.html'),
+  props: {
+    selected: Boolean,
+    time: String
+  },
+  data: () => ({
+    hovered: false
+  }),
+  methods: {
+    mouseEnter() {
+      this.hovered = true;
+    },
+    mouseLeave() {
+      this.hovered = false;
+    }
+  }
+};

src/renderer/components/backup-selector/backup-list-item/backup-list-item.spec.js

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import BackupListItem from './backup-list-item';
+
+describe('BackupListItem', () => {
+  const isHovered = wrapper => wrapper.classes('e-actionlist__item-active');
+
+  it('should listen to mouse enter/leave events and update hover state accordingly', async () => {
+    const wrapper = mount(BackupListItem);
+    expect(isHovered(wrapper)).to.be.false;
+
+    wrapper.trigger('mouseenter');
+    await wrapper.vm.$nextTick();
+    expect(isHovered(wrapper)).to.be.true;
+
+    wrapper.trigger('mouseleave');
+    await wrapper.vm.$nextTick();
+    expect(isHovered(wrapper)).to.be.false;
+  });
+});

src/renderer/components/backup-selector/backup-selector.html

@@ -9,27 +9,13 @@
     <div class="e-dropdown__content">
       <div class="e-actionlist__itemscontainer" style="width: 250px; max-height: 300px">
         <div v-if="options.length === 0">No backups found</div>
-        <div
+        <backup-list-item
           v-for="option in options"
-          class="e-actionlist__item"
-          :class="{
-            'e-actionlist__item-selected': option.selected,
-            'e-actionlist__item-active': hoveredOptionId === option.id
-          }"
-          @mouseenter="mouseEnterItem(option.id)"
-          @mouseleave="mouseLeaveItem()"
           @click="selectBackup(option.backup)"
-        >
-          <e-icon v-if="option.selected" icon="check" class="e-actionlist__selected_marker">
-          </e-icon>
-          {{ option.displayedTime }}
-          <div
-            @click.stop="viewBackup(option.backup)"
-            class="e-btn e-btn-small e-btn-onlyicon e-margin-left-m"
-          >
-            <e-icon icon="eye"></e-icon>
-          </div>
-        </div>
+          @view="viewBackup(option.backup)"
+          :selected="option.selected"
+          :time="option.displayedTime"
+        ></backup-list-item>
       </div>
     </div>
   </e-dropdown>

src/renderer/components/backup-selector/backup-selector.js

@@ -1,38 +1,30 @@
 import { format } from 'date-fns';
 import ChangeHistoryDialog from '../change-history-dialog/change-history-dialog';
+import BackupListItem from './backup-list-item/backup-list-item';
 
 export default {
   name: 'backup-selector',
   template: require('./backup-selector.html'),
-  components: { ChangeHistoryDialog },
+  components: {
+    BackupListItem,
+    ChangeHistoryDialog
+  },
   props: {
     backups: Array,
     selectedTime: String,
     disabled: Boolean
   },
-  data: () => ({
-    hoveredOptionId: ''
-  }),
   computed: {
-    availableBackupTimes() {
-      return this.backups.map(backup => backup.backupTime);
-    },
     options() {
       return this.backups.map(backup => ({
         backup,
         id: backup.backupTime,
-        displayedTime: format(new Date(backup.backupTime), 'yyyy-MM-dd HH:mm:SS'),
+        displayedTime: format(new Date(backup.backupTime), 'yyyy-MM-dd HH:mm:ss'),
         selected: backup.backupTime === this.selectedTime
       }));
     }
   },
   methods: {
-    mouseEnterItem(id) {
-      this.hoveredOptionId = id;
-    },
-    mouseLeaveItem() {
-      this.hoveredOptionId = '';
-    },
     selectBackup(backup) {
       this.$emit('input', backup);
     },

src/renderer/components/backup-selector/backup-selector.spec.js

@@ -21,13 +21,13 @@ describe('BackupSelector', () => {
       expect(vm.options).to.eql([
         {
           id: '2020-12-24T18:00:00.000Z',
-          displayedTime: format(new Date('2020-12-24T18:00:00.000Z'), 'yyyy-MM-dd HH:mm:SS'),
+          displayedTime: format(new Date('2020-12-24T18:00:00.000Z'), 'yyyy-MM-dd HH:mm:ss'),
           selected: true,
           backup: backups[0]
         },
         {
           id: '2020-12-24T20:00:00.000Z',
-          displayedTime: format(new Date('2020-12-24T20:00:00.000Z'), 'yyyy-MM-dd HH:mm:SS'),
+          displayedTime: format(new Date('2020-12-24T20:00:00.000Z'), 'yyyy-MM-dd HH:mm:ss'),
           selected: false,
           backup: backups[1]
         }