From edc2d1de86a1bfa0b5c0e903597dc2feb182d284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 12 Nov 2024 10:02:33 +0100
Subject: [PATCH] Cleanup

---
 .../components/integration-connect.vue        |  57 -----
 .../components/integration-list-item.vue      | 216 ------------------
 .../components/integration-list.vue           | 162 -------------
 3 files changed, 435 deletions(-)
 delete mode 100644 frontend/src/modules/integration/components/integration-connect.vue
 delete mode 100644 frontend/src/modules/integration/components/integration-list-item.vue
 delete mode 100644 frontend/src/modules/integration/components/integration-list.vue

diff --git a/frontend/src/modules/integration/components/integration-connect.vue b/frontend/src/modules/integration/components/integration-connect.vue
deleted file mode 100644
index ef9344e6bc..0000000000
--- a/frontend/src/modules/integration/components/integration-connect.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <component
-    :is="props.integration.connectComponent"
-    v-if="
-      props.integration.enabled
-        && props.integration.connectComponent
-    "
-    :integration="props.integration"
-  >
-    <template
-      #default="{
-        connect,
-        settings,
-        settingsComponent,
-        hasSettings,
-        hasIntegration,
-      }"
-    >
-      <slot
-        :connect="connect"
-        :settings="settings"
-        :settings-component="settingsComponent"
-        :has-settings="hasSettings"
-        :has-integration="hasIntegration"
-        :connected="isConnected"
-        :done="isDone"
-      />
-    </template>
-  </component>
-  <component
-    :is="props.integration.connectComponent"
-    v-else-if="props.integration.connectComponent"
-    :integration="props.integration"
-  />
-</template>
-
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  integration: {
-    type: Object,
-    required: true,
-    default: () => ({}),
-  },
-});
-
-const isConnected = computed(() => props.integration.status !== undefined);
-
-const isDone = computed(() => props.integration.status === 'done');
-</script>
-
-<script>
-export default {
-  name: 'AppIntegrationConnect',
-};
-</script>
diff --git a/frontend/src/modules/integration/components/integration-list-item.vue b/frontend/src/modules/integration/components/integration-list-item.vue
deleted file mode 100644
index ff962cd815..0000000000
--- a/frontend/src/modules/integration/components/integration-list-item.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <div
-    class="border border-gray-200 rounded-lg flex flex-col overflow-hidden"
-    :class="computedClass"
-  >
-    <div class="pt-5 px-5 pb-8">
-      <div class="flex justify-between">
-        <div>
-          <img
-            :alt="integration.name"
-            :src="integration.image"
-            class="w-6 mb-3"
-          />
-        </div>
-        <div />
-      </div>
-      <h6 class="text-base font-semibold text-black pb-2">
-        {{ integration.name }}
-      </h6>
-      <p class="text-xs leading-5 text-gray-500">
-        {{ integration.description }}
-      </p>
-    </div>
-    <div class="flex-grow" />
-
-    <app-integration-connect :integration="integration">
-      <template
-        #default="{
-          connect,
-          connected,
-          settings,
-          hasSettings,
-          settingsComponent,
-        }"
-      >
-        <!-- Connect -->
-        <div v-if="!connected" class="px-5 pb-5">
-          <lf-button type="secondary" class="w-full" @click="connect">
-            <i class="ri-link" /> Connect
-          </lf-button>
-        </div>
-        <div
-          v-else-if="isInProgress && !progressError"
-          class="bg-gray-50 py-3 px-5 min-h-14"
-        >
-          <app-integration-progress-bar :progress="selectedProgress" />
-        </div>
-        <div
-          v-else
-          class="bg-gray-50 py-3 px-5 min-h-14 flex items-center justify-between"
-        >
-          <div>
-            <component
-              :is="settingsComponent"
-              v-if="connected && settingsComponent"
-              :integration="integration"
-            />
-            <el-tooltip
-              v-if="isDone"
-              :content="lastSynced.absolute"
-              placement="top"
-            >
-              <p class="text-3xs text-gray-500">
-                {{ lastSynced.relative }}
-              </p>
-            </el-tooltip>
-            <p v-if="progressError" class="text-3xs text-gray-500 mt-1">
-              <i class="ri-alert-line text-yellow-600" /> Error loading progress
-            </p>
-          </div>
-          <div>
-            <el-dropdown placement="bottom-end">
-              <lf-button size="small" type="secondary-ghost" :icon-only="true">
-                <i class="ri-more-fill" />
-              </lf-button>
-              <template #dropdown>
-                <el-dropdown-item
-                  v-if="hasSettings"
-                  class="cursor-pointer"
-                  @click="settings"
-                >
-                  <i class="ri-settings-3-line" />Integration settings
-                </el-dropdown-item>
-                <el-dropdown-item
-                  class="cursor-pointer"
-                  @click="handleDisconnect"
-                >
-                  <i class="ri-link-unlink !text-red-500" /><span
-                    class="text-red-500"
-                  >Disconnect</span>
-                </el-dropdown-item>
-              </template>
-            </el-dropdown>
-          </div>
-        </div>
-      </template>
-    </app-integration-connect>
-  </div>
-</template>
-
-<script setup>
-import { useStore } from 'vuex';
-import { computed, onMounted, ref } from 'vue';
-import AppIntegrationConnect from '@/modules/integration/components/integration-connect.vue';
-import { isCurrentDateAfterGivenWorkingDays, formatDateToTimeAgoForIntegrations } from '@/utils/date';
-import { ERROR_BANNER_WORKING_DAYS_DISPLAY } from '@/modules/integration/integration-store';
-import moment from 'moment';
-import LfButton from '@/ui-kit/button/Button.vue';
-import AppIntegrationProgressBar from '@/modules/integration/components/integration-progress-bar.vue';
-import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
-import {
-  EventType,
-  FeatureEventKey,
-} from '@/shared/modules/monitoring/types/event';
-
-const store = useStore();
-const props = defineProps({
-  integration: {
-    type: Object,
-    default: () => {},
-  },
-  progress: {
-    type: Object,
-    default: () => {},
-  },
-  progressError: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { trackEvent } = useProductTracking();
-
-onMounted(() => {
-  moment.updateLocale('en', {
-    relativeTime: {
-      s: '1s',
-      ss: '%ds',
-      m: '1min',
-      mm: '%dmin',
-      h: '1h',
-      hh: '%dh',
-      d: '1d',
-      dd: '%dd',
-    },
-  });
-});
-
-const computedClass = computed(() => ({
-  'integration-custom': props.integration.platform === 'custom',
-}));
-
-const selectedProgress = computed(() => (props.progress || []).find((p) => p.platform === props.integration.platform));
-
-const isDone = computed(
-  () => props.integration.status === 'done'
-    || (props.integration.status === 'error'
-      && !isCurrentDateAfterGivenWorkingDays(
-        props.integration.updatedAt,
-        ERROR_BANNER_WORKING_DAYS_DISPLAY,
-      )),
-);
-
-const isInProgress = computed(() => props.integration.status === 'in-progress');
-
-const lastSynced = computed(() => {
-  if (props.integration.platform === 'git') {
-    return {
-      absolute: moment().subtract(1, 'hours').format('MMM DD, YYYY HH:mm'),
-      relative: 'Last data check completed 1 hour ago',
-    };
-  }
-
-  return {
-    absolute: moment(props.integration.lastProcessedAt).format(
-      'MMM DD, YYYY HH:mm',
-    ),
-    relative: `Last data check completed ${formatDateToTimeAgoForIntegrations(
-      props.integration.lastProcessedAt,
-    )}`,
-  };
-});
-
-const loadingDisconnect = ref(false);
-
-const handleDisconnect = async () => {
-  trackEvent({
-    key: FeatureEventKey.DISCONNECT_INTEGRATION,
-    type: EventType.FEATURE,
-    properties: {
-      platform: props.integration.platform,
-    },
-  });
-
-  loadingDisconnect.value = true;
-  await store.dispatch('integration/doDestroy', props.integration.id);
-  loadingDisconnect.value = false;
-};
-</script>
-
-<script>
-export default {
-  name: 'AppIntegrationListItem',
-};
-</script>
-
-<style lang="scss">
-.integration-custom {
-  background: linear-gradient(
-      117.72deg,
-      #dbebfe 0%,
-      rgba(253, 237, 234, 0) 100%
-    ),
-    #ffffff;
-}
-</style>
diff --git a/frontend/src/modules/integration/components/integration-list.vue b/frontend/src/modules/integration/components/integration-list.vue
deleted file mode 100644
index dc4e510e10..0000000000
--- a/frontend/src/modules/integration/components/integration-list.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div class="relative">
-    <div v-if="loading" class="flex items-center justify-center">
-      <div v-loading="loading" class="app-page-spinner w-20" />
-    </div>
-    <app-integration-progress-wrapper v-else :segments="[props.segment]">
-      <template #default="{ progress, progressError }">
-        <div class="flex flex-wrap -mx-2.5">
-          <article
-            v-for="integration in integrationsArray"
-            :key="integration.platform"
-            class="px-2.5 w-full sm:1/2 lg:w-1/3 pb-5"
-          >
-            <app-integration-list-item
-              class="h-full"
-              :integration="integration"
-              :progress="progress"
-              :progress-error="progressError"
-            />
-          </article>
-        </div>
-      </template>
-    </app-integration-progress-wrapper>
-
-    <app-dialog
-      v-model="showGithubDialog"
-      size="small"
-      title="Finishing the setup"
-      :show-loading-icon="true"
-    >
-      <template #content>
-        <div class="px-6 pb-6">
-          We're finishing the last steps of the
-          <span class="font-semibold">GitHub</span> <br />
-          integration setup, please don't reload the page.
-        </div>
-      </template>
-    </app-dialog>
-    <app-dialog
-      v-model="showGitlabDialog"
-      size="small"
-      title="Finishing the setup"
-      :show-loading-icon="true"
-    >
-      <template #content>
-        <div class="px-6 pb-6">
-          We're finishing the last steps of the
-          <span class="font-semibold">GitLab</span> <br />
-          integration setup, please don't reload the page.
-        </div>
-      </template>
-    </app-dialog>
-  </div>
-</template>
-
-<script setup>
-import { useStore } from 'vuex';
-import { computed, onMounted, ref } from 'vue';
-
-import { CrowdIntegrations } from '@/integrations/integrations-config';
-import AppIntegrationListItem from '@/modules/integration/components/integration-list-item.vue';
-import { useRoute } from 'vue-router';
-import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
-import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
-import {
-  EventType,
-  FeatureEventKey,
-} from '@/shared/modules/monitoring/types/event';
-import { Platform } from '@/shared/modules/platform/types/Platform';
-
-const { trackEvent } = useProductTracking();
-const route = useRoute();
-const store = useStore();
-const props = defineProps({
-  onboard: {
-    type: Boolean,
-    default: false,
-  },
-  segment: {
-    type: String,
-    required: true,
-  },
-});
-
-const integrationCount = computed(() => store.state.integration.count);
-const isSegmentIdDifferent = computed(
-  () => store.state.segmentId !== route.params.id,
-);
-
-const loading = computed(() => store.getters['integration/loadingFetch']);
-
-const integrationsArray = computed(() => (props.onboard
-  ? CrowdIntegrations.mappedEnabledConfigs(store)
-  : CrowdIntegrations.mappedConfigs(store)));
-
-const showGithubDialog = ref(false);
-const showGitlabDialog = ref(false);
-
-onMounted(async () => {
-  localStorage.setItem('segmentId', route.params.id);
-  localStorage.setItem('segmentGrandparentId', route.params.grandparentId);
-
-  if (integrationCount.value === 0 || isSegmentIdDifferent.value) {
-    await store.dispatch('integration/doFetch');
-  }
-
-  const params = new URLSearchParams(window.location.search);
-  // GitHub redirects back here. This might have to be changed.
-  // It is giving us a code for Oauth and and Install ID in the URL,
-  // we need those things to authenticate the app and to perform the Oauth
-  const code = params.get('code');
-  const installId = params.get('installation_id');
-
-  // If the URL parameters are present (we have been redirected from GitHub):
-  // do the authentication and the Oauth.
-  const setupAction = params.get('setup_action');
-
-  // Get the source. If none we use GitHub.
-  const source = params.get('source');
-
-  if (code) {
-    if (source === 'discord') {
-      await store.dispatch('integration/doDiscordConnect', {
-        guildId: params.get('guild_id'),
-      });
-
-      trackEvent({
-        key: FeatureEventKey.CONNECT_INTEGRATION,
-        type: EventType.FEATURE,
-        properties: { platform: Platform.DISCORD },
-      });
-    } else if (source === 'gitlab') {
-      showGitlabDialog.value = true;
-      await store.dispatch('integration/doGitlabConnect', {
-        code,
-        state: params.get('state'),
-      });
-      showGitlabDialog.value = false;
-    } else {
-      const state = params.get('state');
-
-      if (state === 'noconnect') {
-        return;
-      }
-
-      showGithubDialog.value = true;
-      await store.dispatch('integration/doGithubConnect', {
-        code,
-        installId,
-        setupAction,
-      });
-      showGithubDialog.value = false;
-    }
-  }
-});
-</script>
-
-<script>
-export default {
-  name: 'AppIntegrationsList',
-};
-</script>