web/satellite: VSearchAlternateStyling, VTableCheckbox migrated to use composition api

tsc warnings fixed for defineProps and hooks

Change-Id: I09cebfc3a6a63e59465bb01f28a7de536254e78a

web/satellite/src/components/browser/BreadCrumbs.vue

@@ -57,7 +57,7 @@ import { useRouter, useStore } from '@/utils/hooks';
 const store = useStore();
 const router = useRouter();
 
-const emit = defineEmits(['onUpdate']);
+const emit = defineEmits(['onUpdate', 'bucketClick']);
 
 /**
  * Retrieves the current bucket name from the store.

web/satellite/src/components/browser/FileBrowser.vue

@@ -269,7 +269,7 @@ const filesUploading = computed((): string => {
 /**
  * Return up to five files currently being uploaded for display purposes.
  */
-const formattedFilesUploading = computed((): BrowserFile[] => {
+const formattedFilesUploading = computed((): string => {
     if (filesUploading.value.length > 5) {
         return filesUploading.value.slice(0, 5);
     }
@@ -280,7 +280,7 @@ const formattedFilesUploading = computed((): BrowserFile[] => {
 /**
  * Return the text of how many files in total are being uploaded to be displayed to give users more context.
  */
-const formattedFilesWaitingToBeUploaded = computed((): BrowserFile[] => {
+const formattedFilesWaitingToBeUploaded = computed((): string => {
     let file = 'file';
 
     if (filesUploading.value.length > 1) {

web/satellite/src/components/browser/FileEntry.vue

@@ -312,10 +312,10 @@ const store = useStore();
 const notify = useNotify();
 const router = useRouter();
 
-const props = defineProps({
+const props = defineProps<{
-    path: { type: String, default: '' },
+    path: string,
-    file: { type: Object as BrowserFile, default: undefined },
+    file: BrowserFile,
-});
+}>();
 
 const emit = defineEmits(['onUpdate']);
 
@@ -324,28 +324,28 @@ const deleteConfirmation = ref(false);
 /**
  * Return the size of the file formatted.
  */
-const size: string = computed((): string => {
+const size = computed((): string => {
     return prettyBytes(props.file.Size);
 });
 
 /**
  * Return the upload date of the file formatted.
  */
-const uploadDate: string = computed((): string => {
+const uploadDate = computed((): string => {
     return props.file.LastModified.toLocaleString().split(',')[0];
 });
 
 /**
  * Check with the store to see if the dropdown is open for the current file/folder.
  */
-const dropdownOpen: string = computed((): string => {
+const dropdownOpen = computed((): boolean => {
     return store.state.files.openedDropdown === props.file.Key;
 });
 
 /**
  * Return a link to the current folder for navigation.
  */
-const link: string = computed((): string => {
+const link = computed((): string => {
     const browserRoot = store.state.files.browserRoot;
     const pathAndKey = store.state.files.path + props.file.Key;
     return pathAndKey.length > 0
@@ -356,7 +356,7 @@ const link: string = computed((): string => {
 /**
  * Return a flag signifying whether the current file/folder is selected.
  */
-const isFileSelected: boolean = computed((): string => {
+const isFileSelected = computed((): boolean => {
     return Boolean(
         store.state.files.selectedAnchorFile === props.file ||
         store.state.files.selectedFiles.find(
@@ -371,14 +371,14 @@ const isFileSelected: boolean = computed((): string => {
 /**
  * Return a boolean signifying whether the current file/folder is a folder.
  */
-const fileTypeIsFolder: boolean = computed((): string => {
+const fileTypeIsFolder = computed((): boolean => {
     return props.file.type === 'folder';
 });
 
 /**
  * Return a boolean signifying whether the current file/folder is a file.
  */
-const fileTypeIsFile: boolean = computed((): string => {
+const fileTypeIsFile = computed((): boolean => {
     return props.file.type === 'file';
 });
 

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

@@ -12,41 +12,28 @@
     >
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { ref } from 'vue';
 
 declare type searchCallback = (search: string) => Promise<void>;
 
-// @vue/component
+const props = defineProps<{
-@Component
+    placeholder: string,
-export default class VSearch extends Vue {
+    search: searchCallback,
-    @Prop({ default: '' })
+}>();
-    private readonly placeholder: string;
-    @Prop({ default: function(): searchCallback {
-        return async function(_: string) {};
-    } })
-    private readonly search: searchCallback;
-    private searchQuery = '';
 
-    public $refs!: {
+const searchQuery = ref<string>('');
-        input: HTMLElement;
-    };
 
-    public get searchString(): string {
+/**
-        return this.searchQuery;
-    }
-
-    /**
  * Clears search query.
  */
-    public clearSearch(): void {
+function clearSearch(): void {
-        this.searchQuery = '';
+    searchQuery.value = '';
-        this.processSearchQuery();
+    processSearchQuery();
-    }
+}
 
-    public async processSearchQuery(): Promise<void> {
+async function processSearchQuery(): Promise<void> {
-        await this.search(this.searchQuery);
+    await props.search(searchQuery.value);
-    }
 }
 </script>
 

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

@@ -31,14 +31,14 @@ import { OnPageClickCallback } from '@/types/pagination';
 
 import TablePagination from '@/components/common/TablePagination.vue';
 
-const props = defineProps({
+const props = defineProps<{
-    selectable: { type: Boolean, default: false },
+    selectable: boolean,
-    totalPageCount: { type: Number, default: 0 },
+    totalPageCount: number,
-    itemsLabel: { type: String, default: 'items' },
+    itemsLabel: string,
-    limit: { type: Number, default: 0 },
+    limit: number,
-    totalItemsCount: { type: Number, default: 0 },
+    totalItemsCount: number,
-    onPageClickCallback: { type: Function as OnPageClickCallback, default: () => () => new Promise(() => false) },
+    onPageClickCallback: OnPageClickCallback,
-});
+}>();
 </script>
 
 <style lang="scss">

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

@@ -12,25 +12,19 @@
     </label>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+const props = defineProps<{
+    value: boolean,
+    disabled: boolean,
+}>();
 
-// Custom checkbox alternative to VCheckbox.vue for use in TableItem.vue
+const emit = defineEmits(['checkChange']);
-// this has no label and allows for external toggles
-// @vue/component
-@Component
-export default class VTableCheckbox extends Vue {
-    @Prop({ default: false })
-    private readonly value: boolean;
-    @Prop({ default: false })
-    private readonly disabled: boolean;
 
-    /**
+/**
  * Emits value to parent component.
  */
-    public onChange(event: { target: {checked: boolean} }): void {
+function onChange(event: { target: { checked: boolean } }): void {
-        this.$emit('checkChange', event.target.checked);
+    emit('checkChange', event.target.checked);
-    }
 }
 </script>
 

web/satellite/src/components/objects/BucketSettingsNav.vue

@@ -42,9 +42,9 @@ const router = useRouter();
 const route = useRoute();
 const store = useStore();
 
-const props = defineProps({
+const props = defineProps<{
-    bucketName: { type: String, default: '' },
+    bucketName: string,
-});
+}>();
 
 const isDropdownOpen = ref(false);
 const isHoveredOver = ref(false);
@@ -52,7 +52,7 @@ const isHoveredOver = ref(false);
 /**
  * Returns files amount from store.
  */
-const filesCount: number = computed((): number => {
+const filesCount = computed((): number => {
     return store.getters['files/sortedFiles'].length;
 });
 
@@ -70,7 +70,7 @@ function onDetailsClick(): void {
         name: RouteConfig.BucketsDetails.name,
         params: {
             bucketName: props.bucketName,
-            backRoute: route.name || '',
+            backRoute: route?.name || '',
         },
     });
 

web/satellite/src/utils/hooks.ts

@@ -2,6 +2,10 @@
 // See LICENSE for copying information.
 
 import { getCurrentInstance } from 'vue';
+import VueRouter from 'vue-router';
+
+import { store } from '@/store';
+import { Notificator } from '@/utils/plugins/notificator';
 
 // TODO: remove after updating router and store deps.
 export function useRoute() {
@@ -9,13 +13,13 @@ export function useRoute() {
 }
 
 export function useRouter() {
-    return getCurrentInstance()?.proxy.$router;
+    return getCurrentInstance()?.proxy.$router || {} as VueRouter;
 }
 
 export function useStore() {
-    return getCurrentInstance()?.proxy.$store;
+    return getCurrentInstance()?.proxy.$store || {} as typeof store;
 }
 
 export function useNotify() {
-    return getCurrentInstance()?.proxy.$notify;
+    return getCurrentInstance()?.proxy.$notify || {} as Notificator;
 }

web/satellite/tests/unit/account/billing/depositAndBillingHistory/PeriodSelection.spec.ts

@@ -4,7 +4,7 @@
 import { VNode } from 'vue';
 import { DirectiveBinding } from 'vue/types/options';
 import Vuex from 'vuex';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 
 import { ProjectsApiMock } from '../../../mock/api/projects';
 import { PaymentsMock } from '../../../mock/api/payments';
@@ -65,7 +65,7 @@ describe('PeriodSelection', (): void => {
     });
 
     it('renders correctly with dropdown', async (): Promise<void> => {
-        const wrapper = mount(PeriodSelection, {
+        const wrapper = shallowMount(PeriodSelection, {
             localVue,
             store,
         });
@@ -80,7 +80,7 @@ describe('PeriodSelection', (): void => {
         const previousClickSpy = jest.fn();
         const historyClickSpy = jest.fn();
 
-        const wrapper = mount<PeriodSelection>(PeriodSelection, {
+        const wrapper = shallowMount<PeriodSelection>(PeriodSelection, {
             localVue,
             store,
         });

web/satellite/tests/unit/account/billing/depositAndBillingHistory/__snapshots__/PeriodSelection.spec.ts.snap

@@ -23,10 +23,15 @@ exports[`PeriodSelection renders correctly 1`] = `
 exports[`PeriodSelection renders correctly with dropdown 1`] = `
 <div class="period-selection">
   <div class="period-selection__current-choice">
-    <div class="period-selection__current-choice__label-area"><svg></svg> <span class="period-selection__current-choice__label-area__label">Current Billing Period</span></div> <svg></svg>
+    <div class="period-selection__current-choice__label-area">
+      <datepickericon-stub></datepickericon-stub> <span class="period-selection__current-choice__label-area__label">Current Billing Period</span>
+    </div>
+    <hideicon-stub></hideicon-stub>
   </div>
   <div class="period-selection__dropdown" style="">
-    <div class="period-selection__dropdown__item"><svg class="selected-image"></svg> <span class="period-selection__dropdown__item__label">Current Billing Period</span></div>
+    <div class="period-selection__dropdown__item">
+      <selectedicon-stub class="selected-image"></selectedicon-stub> <span class="period-selection__dropdown__item__label">Current Billing Period</span>
+    </div>
     <div class="period-selection__dropdown__item">
       <!----> <span class="period-selection__dropdown__item__label">Previous Billing Period</span>
     </div>

web/satellite/tests/unit/projectMembers/ProjectMemberListItem.spec.ts

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import Vuex from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 
 import { ProjectsApiGql } from '@/api/projects';
 import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
@@ -28,7 +28,7 @@ describe('', () => {
     store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, 'testId');
 
     it('should render correctly', function () {
-        const wrapper = mount(ProjectMemberListItem, {
+        const wrapper = shallowMount(ProjectMemberListItem, {
             store,
             localVue,
             propsData: {
@@ -44,7 +44,7 @@ describe('', () => {
     it('should render correctly with item row highlighted', function () {
         member.isSelected = true;
 
-        const wrapper = mount(ProjectMemberListItem, {
+        const wrapper = shallowMount(ProjectMemberListItem, {
             store,
             localVue,
             propsData: {

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

@@ -1,61 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` should render correctly 1`] = `
+exports[` should render correctly 1`] = `<table-item-stub selectdisabled="true" selectable="true" tabletype="none" item="[object Object]" onclick="[Function]" class="owner"></table-item-stub>`;
-<tr class="item-container owner">
-  <th class="icon select"><label class="container"><input id="checkbox" disabled="disabled" type="checkbox" class="checkmark-input"> <span class="checkmark"></span></label></th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="primary">testShortName</p>
-      <!---->
-    </div>
-  </th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="">Jan 1, 1970</p>
-      <!---->
-    </div>
-  </th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="">test@example.com</p>
-      <!---->
-    </div>
-  </th>
-</tr>
-`;
 
-exports[` should render correctly with item row highlighted 1`] = `
+exports[` should render correctly with item row highlighted 1`] = `<table-item-stub selectdisabled="true" selected="true" selectable="true" tabletype="none" item="[object Object]" onclick="[Function]" class="owner"></table-item-stub>`;
-<tr class="item-container selected owner">
-  <th class="icon select"><label class="container"><input id="checkbox" disabled="disabled" type="checkbox" class="checkmark-input"> <span class="checkmark"></span></label></th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="primary">testShortName</p>
-      <!---->
-    </div>
-  </th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="">Jan 1, 1970</p>
-      <!---->
-    </div>
-  </th>
-  <th class="align-left data">
-    <!---->
-    <div class="table-item">
-      <!---->
-      <p class="">test@example.com</p>
-      <!---->
-    </div>
-  </th>
-</tr>
-`;