From c3c8b19d88d67742e7640835c319fe54c7d93471 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 11 Apr 2024 16:30:57 +0300
Subject: [PATCH] web/satellite: add Uplink to Applications page

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

Issue:
https://github.com/storj/storj/issues/6830

Change-Id: I32ce8525feb6c304919c0c12f83ba8586d9daf34
---
 web/satellite/src/assets/apps/uplink.svg        |  7 +++++++
 .../src/components/ApplicationItem.vue          | 17 ++++++++++++-----
 web/satellite/src/types/applications.ts         |  9 +++++++++
 web/satellite/src/views/Applications.vue        |  2 +-
 4 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 web/satellite/src/assets/apps/uplink.svg

diff --git a/web/satellite/src/assets/apps/uplink.svg b/web/satellite/src/assets/apps/uplink.svg
new file mode 100644
index 000000000000..b18bd1360267
--- /dev/null
+++ b/web/satellite/src/assets/apps/uplink.svg
@@ -0,0 +1,7 @@
+<svg width="46px" height="29px" viewBox="0 0 46 29" xmlns="http://www.w3.org/2000/svg">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="storj-logo-mark-color" fill="#0052FF" fill-rule="nonzero">
+            <path d="M22.752,0 C35.3176,0 45.504,10.1864 45.504,22.752 C45.504,24.8855 45.2103,26.9504 44.6612,28.9086 L40.3217,28.9086 C40.9969,26.9814 41.364,24.9096 41.364,22.752 C41.364,12.4729 33.0311,4.13997 22.752,4.13997 C12.4729,4.13997 4.13997,12.4729 4.13997,22.752 C4.13997,23.4578 4.17926,24.1545 4.25578,24.8399 L9.67237,24.8399 L30.0505,24.8398 C31.7456,24.8398 33.1198,23.4657 33.1198,21.7705 C33.1198,20.0754 31.7456,18.7012 30.0515,18.7012 L30.0097,18.7013 L28.219,18.7021 L27.9605,16.9301 C27.5849,14.3557 25.3645,12.4199 22.7341,12.4199 C20.3731,12.4199 18.3173,13.9833 17.6641,16.2137 L17.2283,17.7019 L15.6776,17.7019 L15.2037,17.7019 C13.6268,17.7019 12.3485,18.9802 12.3485,20.5571 C12.3485,20.6049 12.3497,20.6526 12.3521,20.6999 L8.21,20.6999 C8.20965,20.6824 8.20936,20.6649 8.20914,20.6473 L8.20856,20.5571 C8.20856,17.0415 10.802,14.1316 14.1801,13.6363 L14.2356,13.6286 L14.2683,13.5609 C15.8018,10.426 18.9956,8.32858 22.608,8.28077 L22.7341,8.27994 C26.8641,8.27994 30.4251,10.9525 31.6778,14.7296 L31.6834,14.7471 L31.7829,14.7708 C34.8907,15.5374 37.2047,18.3197 37.2588,21.6513 L37.2597,21.7705 C37.2597,25.407 34.5673,28.4146 31.0672,28.9086 L0.842748,28.9086 C0.293654,26.9504 0,24.8855 0,22.752 C0,10.1864 10.1864,0 22.752,0 Z" id="Path" />
+        </g>
+    </g>
+</svg>
diff --git a/web/satellite/src/components/ApplicationItem.vue b/web/satellite/src/components/ApplicationItem.vue
index d39946b33eae..bb03a5bbc6bb 100644
--- a/web/satellite/src/components/ApplicationItem.vue
+++ b/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;
     });
 }
diff --git a/web/satellite/src/types/applications.ts b/web/satellite/src/types/applications.ts
index 26ffda5337d0..e62b2db67b15 100644
--- a/web/satellite/src/types/applications.ts
+++ b/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.',
diff --git a/web/satellite/src/views/Applications.vue b/web/satellite/src/views/Applications.vue
index 278b6ae6d4c0..de7279debc89 100644
--- a/web/satellite/src/views/Applications.vue
+++ b/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');