Update space cover image (#210)

* Remove not used const variable

* Optimize new space form page

* Locale for space replace cover image

* Handle cover image upload for space settings page

* Show cover image on space settings

* Update space cover image to server

* Support update space cover image

* Update cover image

* Remove previous image url when remove image

* Create el_upload icon

* Refactor code format

Author: hiveer

app/controllers/internal_api/application_spaces_controller.rb

@@ -52,6 +52,7 @@ def update
     @application_space.nickname = params[:nickname] if params[:nickname].present?
     @application_space.desc = params[:desc] if params[:desc].present?
     @application_space.cloud_resource = params[:cloud_resource] if params[:cloud_resource].present?
+    @application_space.cover_image = params[:cover_image] if params[:cover_image].present?
 
     if @application_space.save
       render json: { message: I18n.t('repo.updateSuccess') }

app/javascript/components/application_spaces/ApplicationSpaceSettings.vue

@@ -196,6 +196,47 @@
 
     <el-divider/>
 
+    <!-- cover image -->
+    <div class="flex xl:flex-col gap-[32px]">
+      <div class="w-[380px] sm:w-full flex flex-col">
+        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+          {{ $t('application_spaces.edit.replaceCoverImage')}}
+        </div>
+      </div>
+      <div class="flex flex-col gap-[6px] w-[400px] sm:w-[98%]">
+        <el-upload
+          :class="`${hideImageUploadElement ? 'hide' : 'h-auto' }`"
+          :limit="1"
+          v-model:file-list="images"
+          list-type="picture-card"
+          :headers="{ 'X-CSRF-TOKEN': csrfToken }"
+          accept="image/png, image/jpeg, image/gif, image/svg+xml"
+          :data="{namespace: 'application_space'}"
+          action="/internal_api/upload"
+          :before-upload="handleBeforeUpload"
+          :on-remove="handleRemoveImage"
+          :on-success="handleUploadSuccess"
+        >
+          <div class="flex flex-col items-center">
+            <SvgIcon name="el_upload" width="20" height="18" />
+            <div class="el-upload__text">
+              <div>
+                {{ $t('application_spaces.new.coverImageDesc1') }}
+              </div>
+              <div class="font-light text-[12px]">
+                {{ $t('application_spaces.new.coverImageDesc2') }}
+              </div>
+            </div>
+          </div>
+        </el-upload>
+        <el-button @click="updateApplicationSpaceCoverImage" class="w-[100px]">
+          {{ $t('all.update')}}
+        </el-button>
+      </div>
+    </div>
+
+    <el-divider/>
+
     <!-- 删除应用空间 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
@@ -247,6 +288,7 @@ import refreshJWT from '../../packs/refreshJWT.js'
 import jwtFetch from '../../packs/jwtFetch'
 import useRepoDetailStore from '../../stores/RepoDetailStore'
 import { mapState, mapWritableState, mapActions } from 'pinia'
+import { useI18n } from 'vue-i18n'
 
 export default {
   props: {
@@ -255,7 +297,8 @@ export default {
     applicationSpaceDesc: String,
     default_branch: String,
     appStatus: String,
-    cloudResource: String
+    cloudResource: String,
+    coverImage: String
   },
 
   components: {},
@@ -274,13 +317,21 @@ export default {
       initialized: ['Building', 'Deploying', 'Startup', 'Running', 'Stopped', 'Sleeping', 'BuildingFailed', 'DeployFailed', 'RuntimeError'].includes(this.appStatus),
       notInitialized: this.appStatus === 'NoAppFile',
       cookies: useCookies().cookies,
-      csghubServer: inject('csghubServer')
+      csghubServer: inject('csghubServer'),
+      images: [{name: 'default', url: (this.coverImage || "/images/default_cover_image.png")}],
+      uploadCoverImageUrl: '/images/default_cover_image.png',
+      imageUploaded: false,
+      csrfToken: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+      t: useI18n()
     };
   },
 
   computed: {
     ...mapState(useRepoDetailStore, ['isPrivate']),
     ...mapWritableState(useRepoDetailStore, ['privateVisibility']),
+    hideImageUploadElement() {
+      return (this.imageUploaded || this.images.length !== 0)
+    },
     visibilityName: {
       get() {
         return !!this.privateVisibility ? 'Private' : 'Public'
@@ -303,6 +354,25 @@ export default {
   methods: {
     ...mapActions(useRepoDetailStore, ['updateVisibility']),
 
+    handleBeforeUpload(file) {
+      if (file.size / 1024 <= 2000) {
+        return true
+      } else {
+        ElMessage({message: this.t('all.fileTooLarge'), type: "warning"})
+        return false
+      }
+    },
+
+    handleRemoveImage() {
+      this.uploadCoverImageUrl = ''
+      this.imageUploaded = false
+    },
+
+    handleUploadSuccess(res) {
+      this.uploadCoverImageUrl = res.url
+      this.imageUploaded = true
+    },
+
     clickDelete() {
       if (this.delDesc === this.applicationSpacePath) {
         this.deleteApplicationSpace().catch((err) => {
@@ -476,6 +546,11 @@ export default {
       this.updateApplicationSpace(payload)
     },
 
+    updateApplicationSpaceCoverImage() {
+      const payload = {cover_image: this.uploadCoverImageUrl}
+      this.updateApplicationSpace(payload)
+    },
+
     async updateApplicationSpace(payload) {
       const applicationSpaceUpdateEndpoint = "/internal_api/spaces/" + this.path
       const options = {
@@ -513,4 +588,10 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+  :deep(.hide .el-upload.el-upload--picture-card){
+    display: none;
+  }
+</style>

app/javascript/components/application_spaces/NewApplicationSpace.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="w-[640px] m-auto flex flex-col items-center md:w-full md:p-5">
     <div>
-      <SvgIcon width="36" height="36" name="spaces"  />
+      <SvgIcon name="spaces" width="36" height="36" />
     </div>
     <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">{{ $t('application_spaces.new.title') }}</h3>
     <p class="text-[#606266] text-base font-medium md:text-center">{{ $t('application_spaces.new.subTitle1') }}</p>
     <p class="text-[#606266] text-base font-medium md:text-center">{{ $t('application_spaces.new.subTitle2') }}</p>
     <div class="mt-9">
+      <!-- name -->
       <div class="w-full flex sm:flex-col gap-2 mb-9 md:gap-9">
         <div>
           <p class="text-[#303133] text-sm mb-2">{{ $t('application_spaces.new.owner') }}</p>
@@ -32,6 +33,7 @@
         </div>
       </div>
 
+      <!-- nickname & license -->
       <div class="w-full flex sm:flex-col gap-2 mb-9 md:gap-9">
         <div class="flex-1">
           <p class="text-[#303133] text-sm mb-2">{{ $t('application_spaces.new.nickname') }}</p>
@@ -49,6 +51,7 @@
         </div>
       </div>
 
+      <!-- desc -->
       <div class="w-full flex sm:flex-col mb-9">
         <div class="flex-1">
           <p class="text-[#303133] text-sm mb-2">{{ $t('application_spaces.new.description') }}</p>
@@ -192,7 +195,6 @@
   const SDK = ref('gradio')
   const images = ref([])
   const coverImage = ref('')
-  const prefixPath = document.location.pathname.split('/')[1]
   const csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
   const hasCreateApplicationSpace = ref(false)
 

app/javascript/components/shared/RepoTabs.vue

@@ -121,6 +121,7 @@
           :default_branch="repoDetail.default_branch"
           :appStatus="appStatus"
           :cloudResource="repoDetail.hardware"
+          :coverImage="repoDetail.cover_image_url"
           @showSpaceLogs="showSpaceLogs" />
         <code-settings
           v-if="repoType === 'code'"

app/models/application_space.rb

@@ -39,7 +39,8 @@ def update_starhub_server_application_space
                                                                    desc,
                                                                    { private: application_space_private?,
                                                                      current_user: creator&.name,
-                                                                     hardware: cloud_resource
+                                                                     hardware: cloud_resource,
+                                                                     cover_image_url: cover_image
                                                                    })
     raise StarhubError, res.body unless res.success?
   end

config/locales/en_js/application_spaces.js

@@ -99,6 +99,7 @@ export const application_spaces = {
     publicInfo: ", visible to anyone on the internet.",
     needName: "Please provide name first",
     needDesc: "Please provide description first",
+    replaceCoverImage: "Replace the cover image"
   },
   download: "Download Space",
   downloadSpace: "Download space data",

config/locales/zh_js/application_spaces.js

@@ -98,6 +98,7 @@ export const application_spaces = {
     publicInfo: "， 任何互联网上的人都可以看到此应用空间。",
     needName: "请先提供应用空间别名",
     needDesc: "请先提供应用空间介绍",
+    replaceCoverImage: "更新封面图片"
   },
   download: "下载应用空间",
   downloadSpace: "下载应用空间数据",