Add copy button for shoot name and seed name (gardener#986)

23technologies · Apr 12, 2021 · d2e256f · d2e256f
1 parent 7ef2e41
commit d2e256f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/frontend/src/components/ShootListRow.vue b/frontend/src/components/ShootListRow.vue
@@ -15,9 +15,12 @@ SPDX-License-Identifier: Apache-2.0
       <template v-if="cell.header.value === 'name'">
         <v-row align="center" class="pa-0 ma-0 fill-height flex-nowrap">
           <v-col class="grow pa-0 ma-0">
-            <router-link :to="{ name: 'ShootItem', params: { name: shootName, namespace: shootNamespace } }">
-              {{ shootName }}
-            </router-link>
+            <div class="d-flex align-center justify-start flex-nowrap fill-height">
+              <router-link :to="{ name: 'ShootItem', params: { name: shootName, namespace: shootNamespace } }">
+                {{ shootName }}
+              </router-link>
+              <copy-btn :clipboard-text="shootName"></copy-btn>
+            </div>
           </v-col>
           <v-col class="shrink" >
             <div class="d-flex flew-row" v-if="!isShootMarkedForDeletion">
@@ -48,7 +51,10 @@ SPDX-License-Identifier: Apache-2.0
         <vendor :cloud-provider-kind="shootCloudProviderKind" :region="shootRegion" :zones="shootZones"></vendor>
       </template>
       <template v-if="cell.header.value === 'seed'">
-        <shoot-seed-name :shoot-item="shootItem" />
+        <div class="d-flex align-center justify-start flex-nowrap fill-height">
+          <shoot-seed-name :shoot-item="shootItem" />
+          <copy-btn :clipboard-text="shootSeedName"></copy-btn>
+        </div>
       </template>
       <template v-if="cell.header.value === 'technicalId'">
         <div class="d-flex align-center justify-start flex-nowrap fill-height">

diff --git a/frontend/src/components/ShootSeedName.vue b/frontend/src/components/ShootSeedName.vue
@@ -5,20 +5,18 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <v-row align="center" class="ma-0">
-    <v-tooltip top :disabled="!isShootLastOperationTypeControlPlaneMigrating">
-      <template v-slot:activator="{ on }">
-        <div v-on="on">
-          <v-progress-circular v-if="isShootLastOperationTypeControlPlaneMigrating" indeterminate size=12 width=2 class="mr-1"></v-progress-circular>
-          <router-link v-if="canLinkToSeed" :to="{ name: 'ShootItem', params: { name: shootSeedName, namespace:'garden' } }">
-            <span>{{shootSeedName}}</span>
-          </router-link>
-          <span v-else>{{shootSeedName}}</span>
-        </div>
-      </template>
-      <span>{{shootLastOperationTypeControlPlaneMigrationMessage}}</span>
-    </v-tooltip>
-  </v-row>
+  <v-tooltip top :disabled="!isShootLastOperationTypeControlPlaneMigrating">
+    <template v-slot:activator="{ on }">
+      <div v-on="on">
+        <v-progress-circular v-if="isShootLastOperationTypeControlPlaneMigrating" indeterminate size=12 width=2 class="mr-1"></v-progress-circular>
+        <router-link v-if="canLinkToSeed" :to="{ name: 'ShootItem', params: { name: shootSeedName, namespace:'garden' } }">
+          <span>{{shootSeedName}}</span>
+        </router-link>
+        <span v-else>{{shootSeedName}}</span>
+      </div>
+    </template>
+    <span>{{shootLastOperationTypeControlPlaneMigrationMessage}}</span>
+  </v-tooltip>
 </template>
 
 <script>