Merge pull request #4554 from systeminit/victor/bug-528-encrypted-sec…

…rets-should-only-be-used-by-the-workspace-id

fix: Only allow keypair access from the original workspaceId

app/web/src/components/AttributesPanel/AttributesPanelItem.vue

@@ -133,9 +133,9 @@
                 :key="source"
               >
                 <DropdownMenuItem
-                  checkable
                   :checked="propSource === source"
                   :label="source"
+                  checkable
                   @click="setSource(source)"
                 />
               </template>
@@ -166,8 +166,8 @@
         <div v-if="numberOfHiddenChildren > 0" class="attributes-panel-item">
           <!-- TODO(wendy) - If we want to add the option to show the hidden props, add the click handler here! -->
           <div
-            class="text-center pt-2xs italic text-2xs text-neutral-400"
             :style="{ paddingLeft: indentPxPlusOne }"
+            class="text-center pt-2xs italic text-2xs text-neutral-400"
           >
             +{{ numberOfHiddenChildren }} hidden empty prop{{
               numberOfHiddenChildren > 1 ? "s" : ""
@@ -329,9 +329,9 @@
         <template v-if="propKind === 'integer'">
           <input
             v-model="newValueNumber"
+            :disabled="!propIsEditable"
             spellcheck="false"
             type="number"
-            :disabled="!propIsEditable"
             @blur="onBlur"
             @focus="onFocus"
             @keyup.enter="updateValue"
@@ -341,9 +341,9 @@
           <input
             v-model="newValueString"
             :class="`${propLabelParts[0]}${propLabelParts[1]}`"
+            :disabled="!propIsEditable"
             spellcheck="false"
             type="text"
-            :disabled="!propIsEditable"
             @blur="onBlur"
             @focus="onFocus"
             @keyup.enter="updateValue"
@@ -353,8 +353,8 @@
           <!-- todo add show/hide controls -->
           <input
             v-model="newValueString"
-            type="password"
             :disabled="!propIsEditable"
+            type="password"
             @blur="onBlur"
             @focus="onFocus"
             @keyup.enter="updateValue"
@@ -366,8 +366,8 @@
           <textarea
             v-model="newValueString"
             :class="`$propLabelParts`"
-            spellcheck="false"
             :disabled="!propIsEditable"
+            spellcheck="false"
             @blur="onBlur"
             @focus="onFocus"
             @keydown.enter="(e) => e.metaKey && updateValue()"
@@ -396,8 +396,8 @@
           <input
             :checked="newValueBoolean"
             :class="`attributes-panel-item__hidden-input ${propLabelParts[0]}${propLabelParts[1]}`"
-            type="checkbox"
             :disabled="!propIsEditable"
+            type="checkbox"
             @blur="onBlur"
             @change="updateValue"
             @focus="onFocus"
@@ -442,7 +442,15 @@
             class="attributes-panel-item__secret-value-wrap"
             @click="secretModalRef?.open()"
           >
-            <div v-if="secret" class="attributes-panel-item__secret-value">
+            <div
+              v-if="secret"
+              :class="
+                clsx(
+                  'attributes-panel-item__secret-value',
+                  secret.isUsable ? 'bg-action-700' : 'bg-destructive-600',
+                )
+              "
+            >
               <Icon name="key" size="xs" />
               {{ secret.definition }} / {{ secret.name }}
             </div>
@@ -479,14 +487,14 @@
     <!-- VALIDATION DETAILS -->
     <div
       v-if="showValidationDetails && validation"
-      :style="{ marginLeft: indentPx }"
       :class="
         clsx(
           'attributes-panel-item__validation-details flex flex-col p-2xs border mx-xs text-xs translate-y-[-5px]',
           'text-destructive-500 border-destructive-500',
           themeClasses('bg-destructive-100', 'bg-neutral-900'),
         )
       "
+      :style="{ marginLeft: indentPx }"
     >
       {{ validation.message }}
 
@@ -994,7 +1002,17 @@ function removeChildHandler() {
   });
 }
 
-const validation = computed(() => props.attributeDef?.validation);
+const validation = computed(() => {
+  if (widgetKind.value === "secret" && secret.value?.isUsable === false) {
+    return {
+      status: "Failure",
+      message:
+        "Unusable Secret: Created in another workspace. Edit it to be able to use it.",
+    };
+  }
+
+  return props.attributeDef?.validation;
+});
 
 function getKey() {
   if (isChildOfMap.value) return props.attributeDef?.mapKey;
@@ -1646,7 +1664,6 @@ const sourceSelectMenuRef = ref<InstanceType<typeof DropdownMenu>>();
   padding: 4px;
 }
 .attributes-panel-item__secret-value {
-  background: @colors-action-700;
   display: inline-block;
   padding: 2px 10px;
   border-radius: 4px;

app/web/src/components/SecretCard.vue

@@ -5,7 +5,10 @@
         'flex flex-row flex-none items-center overflow-hidden text-shade-100 dark:text-shade-0',
         detailedListItem
           ? 'border-b border-neutral-200 dark:border-neutral-500'
-          : 'border rounded h-[90px] cursor-pointer border-neutral-500 dark:hover:bg-action-700 hover:bg-action-100 dark:hover:outline-action-300 hover:outline-action-500 hover:outline -outline-offset-1',
+          : 'border rounded h-[90px]',
+        !detailedListItem && secret.isUsable
+          ? 'cursor-pointer border-neutral-500 dark:hover:bg-action-700 hover:bg-action-100 dark:hover:outline-action-300 hover:outline-action-500 hover:outline -outline-offset-1'
+          : 'cursor-default border-destructive-600',
       )
     "
   >
@@ -15,6 +18,9 @@
           clsx(
             'text-md font-bold leading-tight',
             detailedListItem ? 'break-words' : 'truncate',
+            secret.isUsable
+              ? 'text-neutral-500 dark:text-neutral-300'
+              : 'text-destructive-500 font-bold',
           )
         "
       >
@@ -42,19 +48,27 @@
         v-if="!secret.updatedInfo || detailedListItem"
         :class="
           clsx(
-            'text-xs text-neutral-500 dark:text-neutral-300',
+            'text-xs',
             !detailedListItem && 'truncate',
+            secret.isUsable
+              ? 'text-neutral-500 dark:text-neutral-300'
+              : 'text-destructive-500 font-bold',
           )
         "
       >
-        Created:
-        <Timestamp
-          :date="new Date(secret.createdInfo.timestamp)"
-          :relative="!detailedListItem"
-          :size="detailedListItem ? 'extended' : 'normal'"
-        />
-        by
-        {{ secret.createdInfo.actor.label }}
+        <template v-if="secret.isUsable">
+          Created:
+          <Timestamp
+            :date="new Date(secret.createdInfo.timestamp)"
+            :relative="!detailedListItem"
+            :size="detailedListItem ? 'extended' : 'normal'"
+          />
+          by
+          {{ secret.createdInfo.actor.label }}
+        </template>
+        <template v-else>
+          Created in another workspace. Edit secret to be able to use it.
+        </template>
       </div>
       <div class="grow flex flex-row items-center">
         <div
@@ -101,28 +115,28 @@
     <div v-if="detailedListItem" class="pr-sm flex flex-col gap-xs">
       <IconButton
         icon="edit"
-        tooltip="Edit"
-        iconTone="action"
         iconIdleTone="neutral"
+        iconTone="action"
+        tooltip="Edit"
         @click="emit('edit')"
       />
       <IconButton
-        icon="trash"
-        tooltip="Delete"
-        iconTone="destructive"
         :disabled="secret.connectedComponents.length > 0"
+        icon="trash"
         iconIdleTone="neutral"
+        iconTone="destructive"
+        tooltip="Delete"
         @click="deleteSecret"
       />
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { Timestamp } from "@si/vue-lib/design-system";
 import { PropType } from "vue";
 import clsx from "clsx";
-import { Secret, useSecretsStore } from "../store/secrets.store";
+import { Secret, useSecretsStore } from "@/store/secrets.store";
 import IconButton from "./IconButton.vue";
 
 const props = defineProps({

app/web/src/components/SecretsModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Modal
     ref="modalRef"
+    :noExit="addingSecret"
     class="bg-neutral-100 dark:bg-neutral-700 text-shade-100 dark:text-shade-0"
-    titleClasses="bg-shade-0 dark:bg-shade-100 text-shade-100 dark:text-shade-0"
     noInnerPadding
-    :noExit="addingSecret"
+    titleClasses="bg-shade-0 dark:bg-shade-100 text-shade-100 dark:text-shade-0"
   >
     <template #title>
       <div class="flex flex-col overflow-hidden">
@@ -40,8 +40,8 @@
       <AddSecretForm
         v-if="addingSecret"
         :definitionId="definitionId"
-        @save="selectSecret"
         @cancel="cancelAddSecretForm"
+        @save="selectSecret"
       />
       <ScrollArea v-else class="m-sm">
         <RequestStatusMessage
@@ -54,7 +54,7 @@
             v-for="secret in secrets"
             :key="secret.id"
             :secret="secret"
-            @click="emit('select', secret)"
+            @click="secretCardClick(secret)"
           />
         </div>
         <div v-else class="flex flex-row items-center h-full">
@@ -74,17 +74,17 @@
           <div class="flex flex-row gap-sm pt-sm">
             <VButton
               icon="x"
+              label="Close"
               tone="shade"
               variant="ghost"
-              label="Close"
               @click="close"
             />
             <VButton
               v-if="!addingSecret"
-              label="Add Secret"
+              class="flex-grow"
               icon="plus"
+              label="Add Secret"
               tone="action"
-              class="flex-grow"
               @click="showAddSecretForm"
             />
           </div>
@@ -94,7 +94,7 @@
   </Modal>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import {
   VButton,
   RequestStatusMessage,
@@ -137,6 +137,12 @@ const cancelAddSecretForm = () => {
   addingSecret.value = false;
 };
 
+const secretCardClick = (secret: Secret) => {
+  if (secret.isUsable) {
+    emit("select", secret);
+  }
+};
+
 const selectSecret = (secret: Secret) => {
   emit("select", secret);
 };