Add animation Download button, fix base-select, fix validation

Author: vittoriaThinkst

frontend_vue/src/components/base/BaseDownloadIconButton.vue

@@ -15,21 +15,94 @@
       :disabled="props.disabled"
       download
       :href="props.url"
+      @click="downloadContent"
     >
       <span class="sr-only">{{ props.alt }} Download</span>
+
       <span
+        v-tooltip="{
+          content: tooltipText,
+          shown: isTriggered,
+          triggers: tooltipTriggers,
+        }"
         :class="{ hidden: props.disabled }"
         class="absolute w-[2rem] rounded-full h-[2rem] bg-green top-[-.5rem] right-[-.5rem] flex items-center justify-center text-white"
-        ><font-awesome-icon icon="arrow-down"></font-awesome-icon
-      ></span>
+      >
+        <Transition
+          name="fade"
+          mode="out-in"
+        >
+          <font-awesome-icon
+            v-if="!isTriggered"
+            icon="arrow-down"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            v-else
+            aria-hidden="true"
+            icon="check"
+          ></font-awesome-icon>
+        </Transition>
+      </span>
     </a>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 const props = defineProps<{
   url?: string;
   alt?: string;
   disabled?: boolean;
 }>();
+
+const tooltipText = ref('Download');
+const isTriggered = ref(false);
+const tooltipTriggers = ref(['hover', 'focus']);
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// 1. prevents UI from jumping when tooltip content changes
+// 2. shows tooltip when content is downloaded
+async function showTooltip() {
+  await delay(150);
+  tooltipTriggers.value = [];
+  isTriggered.value = true;
+  tooltipText.value = 'Download started!';
+  // vTooltip sets a default delay of 1.5s
+  await delay(1500);
+  isTriggered.value = false;
+  tooltipTriggers.value = ['hover', 'focus'];
+  await delay(150);
+  tooltipText.value = 'Download';
+}
+
+function downloadContent() {
+  showTooltip();
+}
 </script>
+
+<style scoped>
+@keyframes bounce {
+  40% {
+    transform: scale(1.2);
+  }
+  80% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  animation: bounce 350ms;
+}
+.fade-enter,
+.fade-leave-to {
+  transform: scale(1);
+}
+</style>

frontend_vue/src/components/base/BaseFormSelect.vue

@@ -1,20 +1,17 @@
 <template>
   <label
     :for="id"
-    class="mt-8 ml-4 mb-8 font-semibold leading-3"
+    class="mt-8 ml-4 font-semibold"
     >{{ label }}</label
   >
-  <p
-    v-if="errorMessage"
-    class="text-xs text-red ml-[4px] leading-[0px]"
-  >
-    {{ errorMessage }}
-  </p>
+
   <v-select
     :id="id"
     class="v-select"
+    :class="{ 'invalid': errorMessage }"
+    :style="`--vs-dropdown-height: ${props.height}`"
     :options="options"
-    :searchable="(searchable == null) ? false : searchable"
+    :searchable="searchable"
     :placeholder="placeholder"
     @input="handleSelectOption"
     @blur="handleBlur"
@@ -43,6 +40,14 @@
       ></slot>
     </template>
   </v-select>
+    <div class="h-8 mt-4 ml-16">
+      <p
+      v-if="errorMessage"
+      class="text-xs text-red leading-[0px]"
+    >
+      {{ errorMessage }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,12 +63,13 @@ const props = defineProps<{
   options: string[] | SelectOption[];
   placeholder?: string;
   searchable?: boolean;
+  height?: string;
 }>();
 
 const id = toRef(props, 'id');
 const emits = defineEmits(['selectOption']);
 
-const { value, errorMessage, handleChange, handleBlur } = useField(id);
+const { errorMessage, handleChange, handleBlur } = useField(id);
 
 onMounted(() => {
   // When selecting the v-select, focus is set on the inner search input
@@ -87,7 +93,8 @@ function handleSelectOption(value: string | SelectOption) {
 }
 </script>
 
-<style>
+<style lang="scss">
+
 .focus-visible {
   outline: 2px solid;
   outline-color: hsl(191, 96%, 36%);
@@ -97,11 +104,12 @@ function handleSelectOption(value: string | SelectOption) {
   @apply text-grey-400;
 }
 .v-select .vs__dropdown-toggle {
-  @apply px-16 py-8 border resize-none shadow-inner-shadow-grey rounded-3xl border-grey-400 bg-white outline-offset-1;
+  @apply px-16 py-[0.4rem] border resize-none shadow-inner-shadow-grey rounded-3xl border-grey-400 bg-white outline-offset-1;
 }
 
 .v-select .vs__dropdown-menu {
-  @apply mt-[8px] bg-white shadow-none border-grey-100 rounded-xl;
+  @apply mt-[8px] bg-white shadow-none border-grey-300 rounded-xl;
+  height: var(--vs-dropdown-height);
 }
 
 .v-select .vs__clear {
@@ -118,4 +126,8 @@ function handleSelectOption(value: string | SelectOption) {
 .v-select .vs__dropdown-option--highlight {
   @apply bg-green-500 text-white;
 }
+
+.v-select.invalid > .vs__dropdown-toggle {
+  @apply border border-red;
+}
 </style>

frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseGenerateTokenSettings setting-type="Canarytoken">
+    <div class="flex flex-col gap-8">
     <div class="flex flex-col gap-8 mb-8">
       <BaseFormSelect
         id="app_type"
@@ -8,6 +9,7 @@
         required
         :options="IDP_OPTIONS"
         :searchable="true"
+        height="220px"
         @select-option="handleSelectedApp"
       >
         <template #option="{ option }">
@@ -40,6 +42,7 @@
       placeholder="https://www.example.com"
       full-width
     />
+    </div>
   </BaseGenerateTokenSettings>
   <GenerateTokenSettingsNotifications
     memo-helper-example="Fake Salesforce app in Okta"

frontend_vue/src/utils/formValidators.ts

@@ -212,6 +212,7 @@ export const formValidators: ValidateSchemaType = {
     schema: Yup.object().shape({
       ...validationNotificationSettings,
       redirect_url: Yup.string(),
+      app_type: Yup.string().required('App type is required'),
     }),
   },
 };

frontend_vue/src/views/ComponentPreview.vue

@@ -239,7 +239,10 @@
     <hr class="my-24" />
     <h1 class="pb-16">Incident details</h1>
     <div class="flex flex-col gap-16 px-16 py-16 mb-32 bg-grey-100">
-      <IncidentDetails :hit-alert="alertSample" :showingMap="true" />
+      <IncidentDetails
+        :hit-alert="alertSample"
+        :showingMap="true"
+      />
     </div>
     <div class="flex flex-col gap-16 mb-32">
       <h1>Upload File</h1>