web/satellite: add Uplink to Applications page

Added new Featured apps category to Applications page with a single option of Uplink.

Issue:
#6830

Change-Id: I32ce8525feb6c304919c0c12f83ba8586d9daf34

web/satellite/src/components/ApplicationItem.vue

@@ -5,7 +5,7 @@
     <v-col cols="12" md="6" lg="6" xl="3">
         <v-card class="px-2 py-4 h-100 align-content-space-between">
             <v-card-item class="pb-0">
-                <img :src="app.src" :alt="app.name" width="42" class="rounded">
+                <img :src="app.src" :alt="app.name" width="42" height="42" class="rounded">
             </v-card-item>
 
             <v-card-item>
@@ -41,14 +41,14 @@
         v-model="dialog"
         :access-name="app.name"
         :docs-link="app.docs"
-        :default-access-type="AccessType.S3"
+        :default-access-type="neededAccessType"
         is-app-setup
     />
     <CreateAccessDialog v-else ref="accessDialog" v-model="dialog" :default-name="app.name" />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { VBtn, VCard, VCardItem, VChip, VCol, VIcon } from 'vuetify/components';
 import { mdiArrowRight, mdiOpenInNew } from '@mdi/js';
 
@@ -60,7 +60,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 import CreateAccessDialog from '@/components/dialogs/CreateAccessDialog.vue';
 import AccessSetupDialog from '@/components/dialogs/AccessSetupDialog.vue';
 
-defineProps<{
+const props = defineProps<{
     app: Application
 }>();
 
@@ -71,13 +71,20 @@ const { withTrialCheck } = useTrialCheck();
 const accessDialog = ref<Exposed>();
 const dialog = ref<boolean>(false);
 
+/**
+ * Returns access type needed for current app.
+ */
+const neededAccessType = computed<AccessType>(() => {
+    return props.app.name === 'Uplink' ? AccessType.AccessGrant : AccessType.S3;
+});
+
 /**
  * Holds on setup button click logic.
  * Starts create S3 credentials flow.
  */
 function onSetup(): void {
     withTrialCheck(() => {
-        accessDialog.value?.setTypes([AccessType.S3]);
+        accessDialog.value?.setTypes([neededAccessType.value]);
         dialog.value = true;
     });
 }

web/satellite/src/types/applications.ts

@@ -37,8 +37,10 @@ import UpdraftPlusIcon from '@/assets/apps/updraftplus.png';
 import DuplicatiIcon from '@/assets/apps/duplicati.png';
 import ResticIcon from '@/assets/apps/restic.png';
 import StarfishIcon from '@/assets/apps/starfish.png';
+import UplinkIcon from '@/assets/apps/uplink.svg';
 
 export enum AppCategory {
+    Featured = 'Featured',
     All = 'All',
     FileManagement = 'File Management',
     BackupRecovery = 'Backup & Recovery',
@@ -56,6 +58,13 @@ export type Application = {
 }
 
 export const applications: Application[] = [
+    {
+        name: 'Uplink',
+        description: 'An application that allows you to access Object Storage from the command line.',
+        category: AppCategory.Featured,
+        src: UplinkIcon,
+        docs: 'https://docs.storj.io/dcs/api/uplink-cli/setup-command',
+    },
     {
         name: 'TrueNAS - iX Systems',
         description: 'TrueNAS is a network attached storage (NAS) solution that allows for an off-site backup to your Storj account.',

web/satellite/src/views/Applications.vue

@@ -143,7 +143,7 @@ import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 
 const { isTrialExpirationBanner, isUserProjectOwner, isExpired } = useTrialCheck();
 
-const selectedChips = ref<AppCategory[]>([AppCategory.All]);
+const selectedChips = ref<AppCategory[]>([AppCategory.Featured]);
 const search = ref<string>('');
 const sortKey = ref<string>('name');
 const sortOrder = ref<string>('asc');