Fixed secret page, had to move code to parent component due to regres…

…sion in Vue 2.6

The new v-slot directive, does not provide access to the slotProps to use in an v-if to overwrite the slot conditionally and have the default (fallback) slot content rendered otherwise.
See also these related issues:
vuejs/vue#10784
vuejs/vue#9725
vuejs/vue#9658

frontend/src/components/Secret.vue

@@ -38,16 +38,28 @@ limitations under the License.
     <!-- List of the added secrets -->
     <v-list two-line v-else>
       <secret-row
-        v-for="row in rows"
-        :key="row.metadata.name"
-        :secret="row"
+        v-for="secret in rows"
+        :key="secret.metadata.name"
+        :secret="secret"
         :secretDescriptorKey="secretDescriptorKey"
         @update="onUpdate"
         @delete="onDelete"
       >
-        <!-- forward slot -->
-        <template v-slot:rowSubTitle>
-          <slot name="rowSubTitle" :secret="row"></slot>
+       <template v-if="infrastructureKey === 'openstack' && isOwnSecretBinding(secret)" v-slot:rowSubTitle>
+          {{secret.data.domainName}} / {{secret.data.tenantName}}
+        </template>
+        <template v-else-if="infrastructureKey === 'vsphere' && isOwnSecretBinding(secret)" v-slot:rowSubTitle>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">{{secret.data.vsphereUsername}}</span>
+            </template>
+            <span>vSphere Username</span>
+          </v-tooltip> / <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">{{secret.data.nsxtUsername}}</span>
+            </template>
+            <span>NSX-T Username</span>
+          </v-tooltip>
         </template>
       </secret-row>
     </v-list>
@@ -59,6 +71,7 @@ limitations under the License.
 import { mapGetters } from 'vuex'
 import SecretRow from '@/components/SecretRow'
 import InfraIcon from '@/components/VendorIcon'
+import { isOwnSecretBinding } from '@/utils'
 
 export default {
   components: {
@@ -128,6 +141,9 @@ export default {
     },
     onDelete (row) {
       this.$emit('delete', row)
+    },
+    isOwnSecretBinding (secret) {
+      return isOwnSecretBinding(secret)
     }
   }
 }

frontend/src/views/Secrets.vue

@@ -73,11 +73,7 @@ limitations under the License.
     @toogleHelp="onToogleHelp"
     @update="onUpdate"
     @delete="onDelete"
-    >
-      <template v-if="isOwnSecretBinding(secret)" v-slot:rowSubTitle="{ secret }">
-        {{secret.data.domainName}} / {{secret.data.tenantName}}
-      </template>
-    </secret>
+    ></secret>
 
     <secret
     v-if="hasCloudProfileForCloudProviderKind('alicloud')"
@@ -122,21 +118,7 @@ limitations under the License.
     @toogleHelp="onToogleHelp"
     @update="onUpdate"
     @delete="onDelete"
-    >
-      <template v-if="isOwnSecretBinding(secret)" v-slot:rowSubTitle="{ secret }">
-        <v-tooltip top>
-          <template v-slot:activator="{ on }">
-            <span v-on="on">{{secret.data.vsphereUsername}}</span>
-          </template>
-          <span>vSphere Username</span>
-        </v-tooltip> / <v-tooltip top>
-          <template v-slot:activator="{ on }">
-            <span v-on="on">{{secret.data.nsxtUsername}}</span>
-          </template>
-          <span>NSX-T Username</span>
-        </v-tooltip>
-      </template>
-    </secret>
+    ></secret>
 
     <template v-if="showDisabledCloudProviders">
 
@@ -206,7 +188,6 @@ limitations under the License.
 <script>
 import { mapGetters } from 'vuex'
 import get from 'lodash/get'
-import { isOwnSecretBinding } from '@/utils'
 import DeleteDialog from '@/components/dialogs/SecretDialogDelete'
 import SecretDialogWrapper from '@/components/dialogs/SecretDialogWrapper'
 import Secret from '@/components/Secret'
@@ -323,9 +304,6 @@ export default {
     },
     hideDialogs () {
       merge(this.dialogState, this.initialDialogState)
-    },
-    isOwnSecretBinding (secret) {
-      return isOwnSecretBinding(secret)
     }
   },
   mounted () {