## Code Context

**Query:** platform app, agent bot, dashboard app, data import, platform banner, installation config, access token, API platform integration

### Entry Points

- **Banner** (component) - app/javascript/dashboard/components-next/banner/Banner.vue:1
- **Banner** (component) - app/javascript/dashboard/components/ui/Banner.vue:1
- **Integration** (component) - app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:1

### Related Symbols

- app/javascript/dashboard/components-next/banner/Banner.vue: props:5, emit:18, bannerClass:20, buttonClass:34, triggerAction:46
- app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue: props:14, store:28, router:29, dialogRef:32, accountId:34

### Code

#### Banner (app/javascript/dashboard/components-next/banner/Banner.vue:1)

```vue
<script setup>
import { computed } from 'vue';

const props = defineProps({
  color: {
    type: String,
    default: 'slate',
    validator: value =>
      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
  },
  actionLabel: {
    type: String,
    default: null,
  },
});

const emit = defineEmits(['action']);

const bannerClass = computed(() => {
  const classMap = {
    slate:
      'bg-n-slate-3 border-n-slate-4 text-n-slate-11 [&_.link]:text-n-slate-11',
    amber:
      'bg-n-amber-3 border-n-amber-4 text-n-amber-11 [&_.link]:text-n-amber-11',
    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11 [&_.link]:text-n-teal-11',
    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11 [&_.link]:text-n-ruby-11',
    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11 [&_.link]:text-n-blue-11',
  };

  return classMap[props.color];
});

const buttonClass = computed(() => {
  const classMap = {
    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
  };

  return classMap[props.color];
});

const triggerAction = () => {
  emit('action');
};
</script>

<template>
  <div
    class="text-sm rounded-xl flex items-center justify-between gap-2 border"
    :class="[
      bannerClass,
      {
        'py-2 px-3': !actionLabel,
        'pl-3 
// ... truncated ...
```

#### Banner (app/javascript/dashboard/components/ui/Banner.vue:1)

```vue
<!-- DEPRECIATED -->
<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
<script>
import NextButton from 'dashboard/components-next/button/Button.vue';

export default {
  components: {
    NextButton,
  },
  props: {
    bannerMessage: {
      type: String,
      default: '',
    },
    hrefLink: {
      type: String,
      default: '',
    },
    hrefLinkText: {
      type: String,
      default: '',
    },
    hasActionButton: {
      type: Boolean,
      default: false,
    },
    actionButtonVariant: {
      type: String,
      default: 'faded',
    },
    actionButtonLabel: {
      type: String,
      default: '',
    },
    actionButtonIcon: {
      type: String,
      default: 'i-lucide-arrow-right',
    },
    colorScheme: {
      type: String,
      default: '',
    },
    hasCloseButton: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['primaryAction', 'close'],
  computed: {
    bannerClasses() {
      const classList = [this.colorScheme];

      if (this.hasActionButton || this.hasCloseButton) {
        classList.push('has-button');
      }
      return classList;
    },
    // TODO - Remove this method when we standardize
    // the button color and variant names
    getButtonColor() {
      const colorMap = {
        primary: 'blue',
        secondary: 'blue',
        alert: 'ruby',
        warning: 'amber',
      };

      return colorMap[this.colorScheme] || 'blue';
    },
// ... truncated ...
```

#### Integration (app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:1)

```vue
<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { frontendURL } from '../../../../helper/URLHelper';
import { useAlert } from 'dashboard/composables';
import { useBranding } from 'shared/composables/useBranding';

import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
import Button from 'dashboard/components-next/button/Button.vue';

const props = defineProps({
  integrationId: {
    type: [String, Number],
    required: true,
  },
  integrationName: { type: String, default: '' },
  integrationDescription: { type: String, default: '' },
  integrationEnabled: { type: Boolean, default: false },
  integrationAction: { type: String, default: '' },
  actionButtonText: { type: String, default: '' },
  deleteConfirmationText: { type: Object, default: () => ({}) },
});

const { t } = useI18n();
const store = useStore();
const router = useRouter();
const { replaceInstallationName } = useBranding();

const dialogRef = ref(null);

const accountId = computed(() => store.getters.getCurrentAccountId);

const openDeletePopup = () => {
  if (dialogRef.value) {
    dialogRef.value.open();
  }
};

const closeDeletePopup = () => {
  if (dialogRef.value) {
    dialogRef.value.close();
  }
};

const deleteIntegration = async () => {
  try {
    await store.dispatch('integrations/deleteIntegration', props.integrationId);
    useAlert(t('INTEGRATION_SETTINGS.DELETE.API.
// ... truncated ...
```

#### triggerAction (app/javascript/dashboard/components-next/banner/Banner.vue:46)

```vue
  emit('action');
};
</script>
```

#### openDeletePopup (app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:36)

```vue
  if (dialogRef.value) {
    dialogRef.value.open();
  }
};

```

#### closeDeletePopup (app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:42)

```vue
  if (dialogRef.value) {
    dialogRef.value.close();
  }
};

```

#### deleteIntegration (app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:48)

```vue
  try {
    await store.dispatch('integrations/deleteIntegration', props.integrationId);
    useAlert(t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
  } catch (error) {
    useAlert(t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE'));
  }
};

```

#### confirmDeletion (app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue:57)

```vue
  closeDeletePopup();
  deleteIntegration();
  router.push({ name: 'settings_applications' });
};
</script>
```