web/satellite: VInfo, VerticalArrows, VDateRangePicket migrated to use composition api

related tests moved to ignored folder;

Change-Id: Ic76fe5f6da8088484ddcd2956bb6bb6c0d5d6223

web/satellite/src/components/common/VDateRangePicker.vue

@@ -13,24 +13,18 @@
     />
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
 import DatePicker from 'vue2-datepicker';
 
-// @vue/component
-@Component({
-    components: {
-        DatePicker,
-    },
-})
-export default class VDateRangePicker extends Vue {
-    @Prop({ default: false })
-    public readonly isOpen: boolean;
-    @Prop({ default: () => false })
-    public readonly onDatePick: (dateRange: Date[]) => void;
-    @Prop({ default: undefined })
-    public readonly dateRange: Date[];
-}
+const props = withDefaults(defineProps<{
+    isOpen?: boolean;
+    onDatePick?: (dateRange: Date[]) => void;
+    dateRange?: Date[];
+}>(), {
+    isOpen: false,
+    onDatePick: () => () => false,
+    dateRange: () => [],
+});
 </script>
 
 <style lang="scss">

web/satellite/src/components/common/VInfo.vue

@@ -23,41 +23,36 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { ref } from 'vue';
 
 import VButton from '@/components/common/VButton.vue';
 
-// @vue/component
-@Component({
-    components: {
-        VButton,
-    },
-})
-export default class VInfo extends Vue {
-    @Prop({ default: '' })
-    private readonly title: string;
-    @Prop({ default: '' })
-    private readonly buttonLabel: string;
-    @Prop({ default: () => () => false })
-    private readonly onButtonClick: () => unknown;
+const props = withDefaults(defineProps<{
+    title?: string;
+    buttonLabel?: string;
+    onButtonClick?: () => unknown;
+}>(), {
+    title: '',
+    buttonLabel: '',
+    onButtonClick: () => () => false,
+});
 
-    public isVisible = false;
+const isVisible = ref<boolean>(false);
 
-    /**
-     * Holds on button click logic.
-     */
-    public onClick(): void {
-        this.onButtonClick();
-        this.toggleVisibility();
-    }
+/**
+ * Toggles bubble visibility.
+ */
+function toggleVisibility(): void {
+    isVisible.value = !isVisible.value;
+}
 
-    /**
-     * Toggles bubble visibility.
-     */
-    public toggleVisibility(): void {
-        this.isVisible = !this.isVisible;
-    }
+/**
+ * Holds on button click logic.
+ */
+function onClick(): void {
+    props.onButtonClick();
+    toggleVisibility();
 }
 </script>
 

web/satellite/src/components/common/VerticalArrows.vue

@@ -8,35 +8,25 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+
+import { computed } from 'vue';
 
 import { SortingDirectionEnum } from '@/types/sortingArrows';
 
 import BottomArrowIcon from '@/../static/images/common/bottomArrow.svg';
 import TopArrowIcon from '@/../static/images/common/topArrow.svg';
 
-// @vue/component
-@Component({
-    components: {
-        TopArrowIcon,
-        BottomArrowIcon,
-    },
-})
-export default class VerticalArrows extends Vue {
-    @Prop({ default: false })
-    private isActive: boolean;
-    @Prop({ default: SortingDirectionEnum.BOTTOM })
-    private direction: SortingDirectionEnum;
+const props = withDefaults(defineProps<{
+    isActive?: boolean;
+    direction?: SortingDirectionEnum;
+}>(), {
+    isActive: false,
+    direction: SortingDirectionEnum.BOTTOM,
+});
 
-    public get isTop(): boolean {
-        return this.direction === SortingDirectionEnum.TOP;
-    }
-
-    public get isBottom(): boolean {
-        return this.direction === SortingDirectionEnum.BOTTOM;
-    }
-}
+const isTop = computed((): boolean => props.direction === SortingDirectionEnum.TOP);
+const isBottom = computed((): boolean => props.direction === SortingDirectionEnum.BOTTOM);
 </script>
 
 <style scoped lang="scss">

web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>`;
-
-exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `<div class="container"><svg class="active"></svg> <svg class="inactive"></svg></div>`;
-
-exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>`;

web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SortingListHeader.vue should render correctly 1`] = `
-<div class="sort-header-container">
-  <div class="sort-header-container__name-container">
-    <p class="sort-header-container__name-container__title">Name</p>
-    <div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>
-  </div>
-  <div class="sort-header-container__added-container">
-    <p class="sort-header-container__added-container__title">Added</p>
-    <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
-  </div>
-  <div class="sort-header-container__email-container">
-    <p class="sort-header-container__email-container__title">Email</p>
-    <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
-  </div>
-</div>
-`;