web/satellite: migrate TabWithCopy component to use SFC composition api

Change-Id: I39f6b4af76962fa89f786899b7ad25e9bef26714

web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue

@@ -8,31 +8,28 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { useNotify } from '@/utils/hooks';
 
 import CopyIcon from '@/../static/images/common/copy.svg';
 
-// @vue/component
-@Component({
-    components: {
-        CopyIcon,
-    },
-})
-export default class TabWithCopy extends Vue {
-    @Prop({ default: '' })
-    public readonly value: string;
-    @Prop({ default: '' })
-    public readonly ariaRoleDescription: string;
+const notify = useNotify();
 
-    /**
-     * Holds on copy button click logic.
-     * Copies command to clipboard.
-     */
-    public onCopyClick(): void {
-        this.$copyText(this.value);
-        this.$notify.success('Command was copied successfully');
-    }
+const props = withDefaults(defineProps<{
+    value: string;
+    ariaRoleDescription: string;
+}>(), {
+    value: '',
+    ariaRoleDescription: '',
+});
+
+/**
+ * Holds on copy button click logic.
+ * Copies command to clipboard.
+ */
+function onCopyClick(): void {
+    navigator.clipboard.writeText(props.value);
+    notify.success('Command was copied successfully');
 }
 </script>