{"version":3,"file":"AlertsDeliverySlackInstructions-b687f309.js","sources":["../../../app/javascript/components/alerts/delivery/AlertsDeliverySlackInstructions.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-1 flex-col gap-2 border-b border-grid px-5 py-2\">\n    <div class=\"flex flex-1 flex-col\">\n      <div class=\"mt-2 text-xs font-semibold text-gray-100\">Instructions</div>\n      <div\n        class=\"mt-3 flex flex-1 flex-col gap-2 pr-2\"\n        v-for=\"(instruction, index) in instructions\"\n        :key=\"instruction\"\n        v-show=\"index + 1 == page\"\n      >\n        <div class=\"text-xs font-medium text-gray-100\">{{ page }}. <span v-html=\"instruction\" /></div>\n        <div class=\"mt-2 flex h-64 w-full items-center justify-center\">\n          <a\n            target=\"_blank\"\n            :href=\"`https://the-tie-sigdev.s3.us-east-2.amazonaws.com/alert_instructions/slack_${page}.png`\"\n          >\n            <img\n              class=\"max-w-3/4 m-auto h-auto max-h-64 w-auto rounded\"\n              :src=\"`https://the-tie-sigdev.s3.us-east-2.amazonaws.com/alert_instructions/slack_${page}.png`\"\n            />\n          </a>\n        </div>\n      </div>\n    </div>\n    <BasePaginate v-model=\"page\" :pages=\"instructions.length\" class=\"mx-auto mb-4 mt-10 w-98\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst page = ref(1);\n\nconst instructions = ref([\n  `Choose the workspace and channel you would like to send alerts in. Right-click this channel and select\n          <span class=\"rounded bg-gray-700 px-1\">Open channel details</span>.`,\n  `Select the <span class=\"rounded bg-gray-700 px-1\">Integrations</span> tab. Select the\n          <span class=\"rounded bg-gray-700 px-1\">Add an App</span> option.`,\n  `Search for <span class=\"rounded bg-gray-700 px-1\">Incoming Webhooks</span>. If you have not used this app\n          before, you will have to install it. Once installed, select the app.`,\n  `Select\n          <span class=\"rounded bg-gray-700 px-1\">Configuration</span>, which will redirect you to a webpage.`,\n  `Select  <span class=\"rounded bg-gray-700 px-1\">Add to Slack</span>.`,\n  `Select the channel that you want to connect the webhook to. Select the\n          <span class=\"rounded bg-gray-700 px-1\">Add Incoming WebHooks integration</span> button.`,\n  `You should see your Webhook URL. Copy this link and paste it into the\n          <span class=\"rounded bg-gray-700 px-1\">Link</span> field below.`\n]);\n</script>\n"],"names":["page","ref","instructions"],"mappings":"sgBA+BA,MAAMA,EAAOC,EAAI,CAAC,EAEZC,EAAeD,EAAI,CACvB;AAAA,+EAEA;AAAA,4EAEA;AAAA,gFAEA;AAAA,8GAEA,sEACA;AAAA,mGAEA;AAAA,0EAEF,CAAC"}