Merge branch 'master' into fix-merge

src/components/catalog/GuidePageHeader.vue

@@ -22,18 +22,22 @@
       </div>
       <CatalogItemLabel
         class="guide-page-header__label"
-        item-type="catcher"
+        :item-type="badge"
       />
     </div>
     <div class="guide-page-header__description">
       {{ description }}
     </div>
     <div class="guide-page-header__info">
-      <a :href="githubLink">
+      <a
+        v-if="githubLink"
+        :href="githubLink"
+      >
         <Icon symbol="github" />
         {{ $t('components.catalog.viewSource') }}
       </a>
       <a
+        v-if="readmeLink"
         :href="readmeLink"
       >
         {{ $t('components.catalog.viewReadme') }}
@@ -61,17 +65,21 @@ export default {
       type: String,
       required: true,
     },
+    badge: {
+      type: String,
+      default: 'catcher',
+    },
     githubLink: {
       type: String,
-      required: true,
+      default: '',
     },
     description: {
       type: String,
       required: true,
     },
     readmeLink: {
       type: String,
-      required: true,
+      default: '',
     },
   },
   data() {

src/components/catalog/Item.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="catalog-item">
+  <div
+    class="catalog-item"
+    :class="{'catalog-item--wide': isWide}"
+  >
     <div
       class="catalog-item__header"
       :style="{'background-image': `url(${image})`}"
@@ -48,6 +51,10 @@ export default {
       type: String,
       required: true,
     },
+    isWide: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -63,8 +70,13 @@ export default {
   cursor: pointer;
   transition: all 120ms ease;
 
+  &--wide {
+    max-width: 300px;
+  }
+
   &__header {
     height: 100px;
+    flex-shrink: 0;
     background-position: center center;
     background-size: cover;
     border-radius: 4px;
@@ -87,7 +99,7 @@ export default {
   }
 
   &__install-button {
-    margin: 15px auto 15px 15px;
+    margin: 0 auto 15px 15px;
     text-transform: uppercase;
   }
 

src/components/catalog/catchers/AddCatcher.vue

@@ -52,7 +52,26 @@
           :class="{'project-add-catcher__catalog-item--not-implemented': !item.page}"
           @click.native="item.page && $router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: item.page}})"
         />
+
+        <a class="project-add-catcher__catalog-more" href="https://docs.hawk.so/integrations?from=garage" target="_blank">
+          {{ $t('components.catalog.discoverMore') }}
+        </a>
+
+        <h2 class="project-add-catcher__catalog-header">
+          {{ $t('components.catalog.migrationFromSentry') }}
+        </h2>
+        <CatalogItem
+          type="external"
+          class="project-add-catcher__catalog-item"
+          :name="'SENTRY'"
+          :isWide="true"
+          :image="require('../../../assets/catalog/sentry.svg')"
+          :description="$t('components.catalog.migrationFromSentryDescription')"
+          @click.native="$router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: 'sentry'}})"
+        />
+        <div class="project-add-catcher__migration-description"></div>
       </div>
+
     </div>
   </div>
 </template>
@@ -243,6 +262,7 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      margin-bottom: 100px;
     }
 
     &__catalog-header {
@@ -283,5 +303,21 @@ export default {
         max-width: 245px;
       }
     }
+
+    &__catalog-more {
+      background-color: var(--color-bg-main);
+      margin: 7.5px 7.5px 50px;
+      text-align: center;
+      padding: 18px 20px;
+      border-radius: 4px;
+      width: 100%;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        box-shadow: 0 6px 12px -5px rgba(0,0,0,0.15);
+        transform: translateY(-2px);
+      }
+    }
   }
 </style>

src/components/catalog/catchers/dynamicLoadGuidePages.js

@@ -11,6 +11,7 @@ export default {
   async beforeRouteEnter(to, _from, next) {
     const hasSeparatePage = [
       'javascript',
+      'sentry',
     ];
 
     let view = 'common';

src/components/catalog/catchers/guides/sentry.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="guide-page">
+    <GuideHeader
+      class="guide-page__header"
+      :background-image="
+        require('../../../../assets/catalog/sentry.svg')
+      "
+      catcher-name="Sentry"
+      :badge="'external'"
+      :description="$t('components.catalog.migrationFromSentryDescription')"
+    />
+    <div class="guide-page__instructions">
+      <div class="guide-page__instructions-header">
+        {{ $t('components.catalog.installation') }}
+      </div>
+      <GuideStepBlock :step-number="1">
+        <template #header>
+          {{ $t('components.catalog.getDSN') }}
+        </template>
+        <template #content>
+          {{ $t('components.catalog.hereIsDSN') }}
+          <TokenBlock v-if="computedDSN" :token="computedDSN" />
+          <template v-else>
+            <p style="color: var(--color-indicator-critical);">
+              {{ $t('projects.settings.integrations.sentryDSNTextNoToken') }}
+            </p>
+            <UiButton
+              :href="`/project/${project.id}/settings/integrations`"
+              :content="$t('projects.settings.general.title')"
+            />
+          </template>
+        </template>
+      </GuideStepBlock>
+      <GuideStepBlock
+        :step-number="2"
+        last
+      >
+        <template #header>
+          {{ $t('components.catalog.useDSN') }}
+        </template>
+        <template #content>
+          {{ $t('components.catalog.useDSNText') }}
+        </template>
+      </GuideStepBlock>
+    </div>
+  </div>
+</template>
+
+<script>
+import GuideStepBlock from '../../GuideStepBlock';
+import GuideHeader from '../../GuidePageHeader';
+import TokenBlock from '../../../project/TokenBlock';
+import { getSentryDSN } from '../../../../utils';
+import UiButton from '../../../utils/UiButton';
+
+export default {
+  name: 'SetupJavascriptCatcher',
+  components: {
+    GuideStepBlock,
+    GuideHeader,
+    TokenBlock,
+    UiButton,
+  },
+  data() {
+    return {
+      repoUrl: 'https://github.com/codex-team/hawk.javascript',
+      readmeUrl: 'https://github.com/codex-team/hawk.javascript/blob/master/README.md',
+    };
+  },
+  computed: {
+    /**
+     * Current viewed project
+     *
+     * @returns {Project}
+     */
+    project() {
+      const projectId = this.$route.params.projectId;
+
+      return this.$store.getters.getProjectById(projectId);
+    },
+
+    computedDSN() {
+      if (!this.project || !this.project.token) {
+        return '';
+      }
+
+      return getSentryDSN(this.project.token);
+    },
+  },
+};
+</script>
+
+<style src="../../../../styles/guide-page.css"></style>

src/components/event/Overview.vue

@@ -36,6 +36,20 @@
         icon="nuxt"
         title="Nuxt"
       />
+      <DetailsAddons
+        v-if="getIntegrationAddons('flask')"
+        class="event-overview__section"
+        :addons="getIntegrationAddons('flask')"
+        icon="flask"
+        title="Flask"
+      />
+      <DetailsAddons
+        v-if="getIntegrationAddons('fastapi')"
+        class="event-overview__section"
+        :addons="getIntegrationAddons('fastapi')"
+        icon="fastapi"
+        title="FastAPI"
+      />
       <DetailsAddons
         v-if="hasContext"
         class="event-overview__section"
@@ -120,7 +134,7 @@ export default Vue.extend({
         return null;
       }
 
-      const integrationToFilter = [ 'vue', 'nuxt' ];
+      const integrationToFilter = [ 'vue', 'nuxt', 'flask', 'fastapi'];
       const filteredAddons = {};
 
       Object.entries(this.event.payload.addons).forEach(([name, value]) => {