feat: Update dependencies and fix import syntax for Vite migration (#7959)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-09-21 17:55:54 +05:30
parent fabb3c8da4
commit 48bf8d08e5
211 changed files with 744 additions and 710 deletions
@@ -40,14 +40,14 @@
 </template>

 <script>
-import Sidebar from '../../components/layout/Sidebar';
+import Sidebar from '../../components/layout/Sidebar.vue';
 import CommandBar from './commands/commandbar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
-import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
-import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
+import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
+import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
+import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
+import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
+import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import wootConstants from 'dashboard/constants/globals';

@@ -80,9 +80,9 @@
 </template>

 <script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo';
+import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
+import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
+import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
 import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
 import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
 import CustomAttributeSelector from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue';
@@ -37,7 +37,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
 import rtlMixin from 'shared/mixins/rtlMixin';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

 export default {
  components: {
@@ -81,17 +81,17 @@
 <script>
 import { mapGetters } from 'vuex';

-import ContactsHeader from './Header';
-import ContactsTable from './ContactsTable';
-import ContactInfoPanel from './ContactInfoPanel';
-import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
-import TableFooter from 'dashboard/components/widgets/TableFooter';
+import ContactsHeader from './Header.vue';
+import ContactsTable from './ContactsTable.vue';
+import ContactInfoPanel from './ContactInfoPanel.vue';
+import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact.vue';
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
 import ImportContacts from './ImportContacts.vue';
 import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
 import contactFilterItems from '../contactFilterItems';
 import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews';
+import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
+import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import alertMixin from 'shared/mixins/alertMixin';
 import countries from 'shared/constants/countries.js';
@@ -42,7 +42,7 @@
 </template>

 <script>
-import Modal from '../../../../components/Modal';
+import Modal from '../../../../components/Modal.vue';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -56,10 +56,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import ContactInfoPanel from '../components/ContactInfoPanel.vue';
-import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage';
+import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage.vue';
 import SettingsHeader from '../../settings/SettingsHeader.vue';
-import Spinner from 'shared/components/Spinner';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import Spinner from 'shared/components/Spinner.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

 export default {
  components: {
@@ -22,9 +22,9 @@
 </template>

 <script>
-import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard';
+import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';

 export default {
  components: {
@@ -134,18 +134,18 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem';
+import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';

-import ContactInfo from './contact/ContactInfo';
-import ConversationInfo from './ConversationInfo';
+import ContactInfo from './contact/ContactInfo.vue';
+import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import MacrosList from './Macros/List';
+import MacrosList from './Macros/List.vue';

 export default {
  components: {
@@ -79,12 +79,12 @@

 <script>
 import { mixin as clickaway } from 'vue-clickaway';
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
 import agentMixin from 'dashboard/mixins/agentMixin';
-import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems';
+import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';

 export default {
  components: {
@@ -27,9 +27,9 @@

 <script>
 import { mapGetters } from 'vuex';
-import ChatList from '../../../components/ChatList';
-import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
-import PopOverSearch from './search/PopOverSearch';
+import ChatList from '../../../components/ChatList.vue';
+import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
+import PopOverSearch from './search/PopOverSearch.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import wootConstants from 'dashboard/constants/globals';
@@ -34,7 +34,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import MacroItem from './MacroItem';
+import MacroItem from './MacroItem.vue';
 import accountMixin from 'dashboard/mixins/account.js';

 export default {
@@ -36,7 +36,7 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { mixin as clickaway } from 'vue-clickaway';
-import MacroPreview from './MacroPreview';
+import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';

 export default {
@@ -166,13 +166,13 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import timeMixin from 'dashboard/mixins/time';
-import ContactInfoRow from './ContactInfoRow';
+import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import SocialIcons from './SocialIcons';
+import SocialIcons from './SocialIcons.vue';

-import EditContact from './EditContact';
-import NewConversation from './NewConversation';
-import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
+import EditContact from './EditContact.vue';
+import NewConversation from './NewConversation.vue';
+import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import adminMixin from '../../../../mixins/isAdmin';
 import { mapGetters } from 'vuex';
@@ -58,7 +58,7 @@
 </template>
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';

 export default {
@@ -158,11 +158,11 @@

 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
-import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
 import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
-import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem';
+import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
 import WhatsappTemplates from './WhatsappTemplates.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
@@ -393,8 +393,6 @@ export default {
  .mention--box {
    @apply left-0 m-auto right-0 top-auto h-fit;
  }
-
-  /* TODO: Remove when have standardized a component out of multiselect  */
  .multiselect .multiselect__content .multiselect__option span {
    @apply inline-flex w-6 text-slate-600 dark:text-slate-400;
  }
@@ -17,7 +17,7 @@

 <script>
 import { mapGetters } from 'vuex';
-import ContactForm from './ContactForm';
+import ContactForm from './ContactForm.vue';

 export default {
  components: {
@@ -20,7 +20,7 @@

 <script>
 import { mapGetters } from 'vuex';
-import ContactForm from './ContactForm';
+import ContactForm from './ContactForm.vue';

 export default {
  components: {
@@ -16,7 +16,7 @@
 </template>

 <script>
-import ConversationForm from './ConversationForm';
+import ConversationForm from './ConversationForm.vue';

 export default {
  components: {
@@ -44,9 +44,9 @@

 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
-import AddLabel from 'shared/components/ui/dropdown/AddLabel';
+import Spinner from 'shared/components/Spinner.vue';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
@@ -38,7 +38,7 @@
 </template>

 <script>
-import Modal from 'dashboard/components/Modal';
+import Modal from 'dashboard/components/Modal.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import allLocales from 'shared/constants/locales.js';
@@ -24,7 +24,7 @@

 <script>
 import { debounce } from '@chatwoot/utils';
-import ResizableTextArea from 'shared/components/ResizableTextArea';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import WootArticleEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';

@@ -66,7 +66,7 @@

 <script>
 import ArticleItem from './ArticleItem.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter';
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
 import draggable from 'vuedraggable';

 export default {
@@ -103,7 +103,7 @@ import { mixin as clickaway } from 'vue-clickaway';

 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 export default {
  components: {
    FluentIcon,
@@ -59,17 +59,17 @@
 import { mapGetters } from 'vuex';

 import { frontendURL } from '../../../../helper/URLHelper';
-import Sidebar from 'dashboard/components/layout/Sidebar';
+import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PortalPopover from '../components/PortalPopover.vue';
 import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
 import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
-import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
+import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
+import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
+import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
-import AddCategory from '../pages/categories/AddCategory';
+import AddCategory from '../pages/categories/AddCategory.vue';

 export default {
  components: {
@@ -190,8 +190,8 @@
 </template>

 <script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail';
-import LocaleItemTable from './PortalListItemTable';
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import LocaleItemTable from './PortalListItemTable.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import alertMixin from 'shared/mixins/alertMixin';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -87,7 +87,7 @@
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
 import { isDomain } from 'shared/helpers/Validators';
-import thumbnail from 'dashboard/components/widgets/Thumbnail';
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 import wootConstants from 'dashboard/constants/globals';
@@ -73,7 +73,7 @@
 </template>

 <script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail';
+import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import portalMixin from '../mixins/portalMixin';

 export default {
@@ -37,8 +37,8 @@
 </template>

 <script>
-import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem';
-import SidebarHeader from './SidebarHeader';
+import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
+import SidebarHeader from './SidebarHeader.vue';

 export default {
  components: {
@@ -40,7 +40,7 @@
 </template>

 <script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 export default {
  components: {
    Thumbnail,
@@ -119,7 +119,7 @@
 </template>

 <script>
-import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { mapGetters } from 'vuex';
 import { debounce } from '@chatwoot/utils';
 import { isEmptyObject } from 'dashboard/helper/commons.js';
@@ -47,10 +47,10 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import EditArticleHeader from '../../components/Header/EditArticleHeader';
-import ArticleEditor from '../../components/ArticleEditor';
-import ArticleSettings from './ArticleSettings';
-import Spinner from 'shared/components/Spinner';
+import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
+import ArticleEditor from '../../components/ArticleEditor.vue';
+import ArticleSettings from './ArticleSettings.vue';
+import Spinner from 'shared/components/Spinner.vue';
 import portalMixin from '../../mixins/portalMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import wootConstants from 'dashboard/constants/globals';
@@ -34,9 +34,9 @@
 import { mapGetters } from 'vuex';

 import Spinner from 'shared/components/Spinner.vue';
-import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader';
-import EmptyState from 'dashboard/components/widgets/EmptyState';
-import ArticleTable from '../../components/ArticleTable';
+import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import ArticleTable from '../../components/ArticleTable.vue';

 export default {
  components: {
@@ -24,7 +24,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
+import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import portalMixin from '../../mixins/portalMixin';
 import alertMixin from 'shared/mixins/alertMixin.js';
@@ -63,9 +63,9 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import portalMixin from '../../mixins/portalMixin';

-import CategoryListItem from './CategoryListItem';
-import AddCategory from './AddCategory';
-import EditCategory from './EditCategory';
+import CategoryListItem from './CategoryListItem.vue';
+import AddCategory from './AddCategory.vue';
+import EditCategory from './EditCategory.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';

 export default {
@@ -34,8 +34,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner';
+import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';

 export default {
  components: {
@@ -14,7 +14,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';

-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm';
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';

 export default {
  components: {
@@ -12,7 +12,7 @@

 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm';
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';

 import { mapGetters } from 'vuex';

@@ -35,7 +35,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
-import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale';
+import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 export default {
  components: {
@@ -53,10 +53,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import PortalListItem from '../../components/PortalListItem';
+import PortalListItem from '../../components/PortalListItem.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState';
-import AddLocale from '../../components/AddLocale';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import AddLocale from '../../components/AddLocale.vue';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';

 export default {
@@ -25,7 +25,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader';
+import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
 export default {
  components: {
    SettingsHeader,
@@ -12,7 +12,7 @@

 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm';
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';

 import { mapGetters } from 'vuex';

@@ -14,7 +14,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';

-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm';
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';

 export default {
@@ -21,7 +21,7 @@
 </template>

 <script>
-import EmptyState from 'dashboard/components/widgets/EmptyState';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 export default {
  components: {
    EmptyState,
@@ -116,7 +116,7 @@
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import rtlMixin from 'shared/mixins/rtlMixin';
-import NotificationPanelList from './NotificationPanelList';
+import NotificationPanelList from './NotificationPanelList.vue';

 import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';

@@ -19,9 +19,9 @@

 <script>
 import { mapGetters } from 'vuex';
-import TableFooter from 'dashboard/components/widgets/TableFooter';
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';

-import NotificationTable from './NotificationTable';
+import NotificationTable from './NotificationTable.vue';

 import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 export default {
@@ -34,7 +34,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import BackButton from '../../../components/widgets/BackButton';
+import BackButton from '../../../components/widgets/BackButton.vue';
 import adminMixin from '../../../mixins/isAdmin';

 export default {
@@ -21,7 +21,7 @@

 <script>
 /* eslint no-console: 0 */
-import SettingsHeader from './SettingsHeader';
+import SettingsHeader from './SettingsHeader.vue';

 export default {
  components: {
@@ -31,7 +31,7 @@
  </tr>
 </template>
 <script>
-import ShowMore from 'dashboard/components/widgets/ShowMore';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import AgentBotType from './AgentBotType.vue';

 export default {
@@ -13,7 +13,7 @@
  </div>
 </template>
 <script>
-import LoadingState from 'dashboard/components/widgets/LoadingState';
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';

 export default {
@@ -9,7 +9,7 @@
  </div>
 </template>
 <script>
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
 import CsmlBotEditor from '../components/CSMLBotEditor.vue';
 import alertMixin from 'shared/mixins/alertMixin';

@@ -79,8 +79,8 @@
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
-import Modal from '../../../../components/Modal';
+import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import Modal from '../../../../components/Modal.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';

@@ -128,9 +128,9 @@
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import Thumbnail from '../../../../components/widgets/Thumbnail';
-import AddAgent from './AddAgent';
-import EditAgent from './EditAgent';
+import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
+import AddAgent from './AddAgent.vue';
+import EditAgent from './EditAgent.vue';

 export default {
  components: {
@@ -109,7 +109,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import EditAttribute from './EditAttribute';
+import EditAttribute from './EditAttribute.vue';

 export default {
  components: {
@@ -16,8 +16,8 @@
 </template>

 <script>
-import AddAttribute from './AddAttribute';
-import CustomAttribute from './CustomAttribute';
+import AddAttribute from './AddAttribute.vue';
+import CustomAttribute from './CustomAttribute.vue';
 export default {
  components: {
    AddAttribute,
@@ -64,7 +64,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import TableFooter from 'dashboard/components/widgets/TableFooter';
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
 import timeMixin from 'dashboard/mixins/time';
 import alertMixin from 'shared/mixins/alertMixin';
 import {
@@ -174,7 +174,7 @@
 import { mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
 import { URLPattern } from 'urlpattern-polyfill';
@@ -29,8 +29,8 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import campaignMixin from 'shared/mixins/campaignMixin';
-import CampaignsTable from './CampaignsTable';
-import EditCampaign from './EditCampaign';
+import CampaignsTable from './CampaignsTable.vue';
+import EditCampaign from './EditCampaign.vue';
 export default {
  components: {
    CampaignsTable,
@@ -65,8 +65,8 @@
 </template>

 <script>
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
-import InboxName from 'dashboard/components/widgets/InboxName';
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from 'dashboard/mixins/time';

@@ -112,7 +112,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import { URLPattern } from 'urlpattern-polyfill';
@@ -18,7 +18,7 @@
 <script>
 import campaignMixin from 'shared/mixins/campaignMixin';
 import Campaign from './Campaign.vue';
-import AddCampaign from './AddCampaign';
+import AddCampaign from './AddCampaign.vue';

 export default {
  components: {
@@ -56,9 +56,9 @@
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';

-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
-import Modal from '../../../../components/Modal';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import Modal from '../../../../components/Modal.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 export default {
@@ -53,10 +53,10 @@
 <script>
 /* eslint no-console: 0 */
 import { required, minLength } from 'vuelidate/lib/validators';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import Modal from '../../../../components/Modal';
+import Modal from '../../../../components/Modal.vue';

 export default {
  components: {
@@ -110,8 +110,8 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import AddCanned from './AddCanned';
-import EditCanned from './EditCanned';
+import AddCanned from './AddCanned.vue';
+import EditCanned from './EditCanned.vue';

 export default {
  components: {
@@ -48,7 +48,7 @@ import { mapGetters } from 'vuex';

 import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
-import PageHeader from '../SettingsSubPageHeader';
+import PageHeader from '../SettingsSubPageHeader.vue';

 export default {
  components: {
@@ -22,9 +22,9 @@
 </template>

 <script>
-import ChannelItem from 'dashboard/components/widgets/ChannelItem';
+import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
 import router from '../../../index';
-import PageHeader from '../SettingsSubPageHeader';
+import PageHeader from '../SettingsSubPageHeader.vue';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';

@@ -83,7 +83,7 @@

 <script>
 import configMixin from 'shared/mixins/configMixin';
-import EmptyState from '../../../../components/widgets/EmptyState';
+import EmptyState from '../../../../components/widgets/EmptyState.vue';

 export default {
  components: {
@@ -72,7 +72,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import SettingsSection from 'dashboard/components/SettingsSection';
+import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import { required, minLength } from 'vuelidate/lib/validators';

 export default {
@@ -135,7 +135,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import Settings from './Settings';
+import Settings from './Settings.vue';
 import adminMixin from '../../../../mixins/isAdmin';
 import accountMixin from '../../../../mixins/account';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -82,7 +82,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import PreChatFields from './PreChatFields.vue';
 import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 export default {
  components: {
    PreChatFields,
@@ -438,19 +438,19 @@ import { mapGetters } from 'vuex';
 import { shouldBeUrl } from 'shared/helpers/Validators';
 import configMixin from 'shared/mixins/configMixin';
 import alertMixin from 'shared/mixins/alertMixin';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner';
-import SettingsSection from '../../../../components/SettingsSection';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
+import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import FacebookReauthorize from './facebook/Reauthorize';
-import PreChatFormSettings from './PreChatForm/Settings';
-import WeeklyAvailability from './components/WeeklyAvailability';
-import GreetingsEditor from 'shared/components/GreetingsEditor';
-import ConfigurationPage from './settingsPage/ConfigurationPage';
-import CollaboratorsPage from './settingsPage/CollaboratorsPage';
-import WidgetBuilder from './WidgetBuilder';
-import BotConfiguration from './components/BotConfiguration';
+import FacebookReauthorize from './facebook/Reauthorize.vue';
+import PreChatFormSettings from './PreChatForm/Settings.vue';
+import WeeklyAvailability from './components/WeeklyAvailability.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
+import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
+import WidgetBuilder from './WidgetBuilder.vue';
+import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
-import SenderNameExamplePreview from './components/SenderNameExamplePreview';
+import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';

 export default {
  components: {
@@ -90,10 +90,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import SettingsSection from 'dashboard/components/SettingsSection';
+import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import { required, minLength } from 'vuelidate/lib/validators';
-import InputRadioGroup from './components/InputRadioGroup';
-import SingleSelectDropdown from './components/SingleSelectDropdown';
+import InputRadioGroup from './components/InputRadioGroup.vue';
+import SingleSelectDropdown from './components/SingleSelectDropdown.vue';

 export default {
  components: {
@@ -154,8 +154,8 @@

 <script>
 import { mapGetters } from 'vuex';
-import Widget from 'dashboard/modules/widget-preview/components/Widget';
-import InputRadioGroup from './components/InputRadioGroup';
+import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
+import InputRadioGroup from './components/InputRadioGroup.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -54,7 +54,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';

 const shouldBeWebhookUrl = (value = '') =>
  value ? value.startsWith('http') : true;
@@ -21,11 +21,11 @@
  <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
 <script>
-import ForwardToOption from './emailChannels/ForwardToOption';
-import Microsoft from './emailChannels/Microsoft';
+import ForwardToOption from './emailChannels/ForwardToOption.vue';
+import Microsoft from './emailChannels/Microsoft.vue';
 import { mapGetters } from 'vuex';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';

 export default {
  components: {
@@ -82,10 +82,10 @@
 /* eslint-env browser */
 /* global FB */
 import { required } from 'vuelidate/lib/validators';
-import LoadingState from 'dashboard/components/widgets/LoadingState';
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import accountMixin from '../../../../../mixins/account';
@@ -79,7 +79,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';

 export default {
  components: {
@@ -23,9 +23,9 @@
 </template>

 <script>
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';
 import BandwidthSms from './BandwidthSms.vue';
-import Twilio from './Twilio';
+import Twilio from './Twilio.vue';

 export default {
  components: {
@@ -37,7 +37,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader';
+import PageHeader from '../../SettingsSubPageHeader.vue';

 export default {
  components: {
@@ -129,8 +129,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import router from '../../../../index';
-import PageHeader from '../../SettingsSubPageHeader';
-import GreetingsEditor from 'shared/components/GreetingsEditor';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 export default {
@@ -28,10 +28,10 @@
 </template>

 <script>
-import PageHeader from '../../SettingsSubPageHeader';
-import Twilio from './Twilio';
-import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp';
-import CloudWhatsapp from './CloudWhatsapp';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import Twilio from './Twilio.vue';
+import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
+import CloudWhatsapp from './CloudWhatsapp.vue';

 export default {
  components: {
@@ -52,7 +52,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required, email } from 'vuelidate/lib/validators';
 import router from '../../../../../index';
-import PageHeader from '../../../SettingsSubPageHeader';
+import PageHeader from '../../../SettingsSubPageHeader.vue';

 export default {
  components: {
@@ -20,7 +20,7 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import microsoftClient from '../../../../../../api/channel/microsoftClient';
-import SettingsSection from '../../../../../../components/SettingsSection';
+import SettingsSection from '../../../../../../components/SettingsSection.vue';

 export default {
  components: {
@@ -50,8 +50,8 @@

 <script>
 import { mapGetters } from 'vuex';
-import SettingsSection from 'dashboard/components/SettingsSection';
-import LoadingState from 'dashboard/components/widgets/LoadingState';
+import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 export default {
@@ -44,8 +44,8 @@
 </template>

 <script>
-import PreviewCard from 'dashboard/components/ui/PreviewCard';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

 export default {
  components: {
@@ -74,9 +74,9 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from 'dashboard/components/SettingsSection';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
-import BusinessDay from './BusinessDay';
+import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import BusinessDay from './BusinessDay.vue';
 import {
  timeSlotParse,
  timeSlotTransform,
@@ -14,7 +14,7 @@

 <script>
 /* global FB */
-import SettingsSection from '../../../../../components/SettingsSection';
+import SettingsSection from '../../../../../components/SettingsSection.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 export default {
@@ -81,7 +81,7 @@ import { mapGetters } from 'vuex';
 import { minValue } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
-import SettingsSection from '../../../../../components/SettingsSection';
+import SettingsSection from '../../../../../components/SettingsSection.vue';

 export default {
  components: {
@@ -155,10 +155,10 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from '../../../../../components/SettingsSection';
-import ImapSettings from '../ImapSettings';
-import SmtpSettings from '../SmtpSettings';
-import MicrosoftReauthorize from '../channels/microsoft/Reauthorize';
+import SettingsSection from '../../../../../components/SettingsSection.vue';
+import ImapSettings from '../ImapSettings.vue';
+import SmtpSettings from '../SmtpSettings.vue';
+import MicrosoftReauthorize from '../channels/microsoft/Reauthorize.vue';
 import { required } from 'vuelidate/lib/validators';

 export default {
@@ -27,7 +27,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import IntegrationItem from './IntegrationItem';
+import IntegrationItem from './IntegrationItem.vue';

 export default {
  components: {
@@ -46,9 +46,9 @@ import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import hookMixin from './hookMixin';
-import NewHook from './NewHook';
-import SingleIntegrationHooks from './SingleIntegrationHooks';
-import MultipleIntegrationHooks from './MultipleIntegrationHooks';
+import NewHook from './NewHook.vue';
+import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
+import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';

 export default {
  components: {
@@ -40,7 +40,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { frontendURL } from '../../../../helper/URLHelper';
-import WootLabel from 'dashboard/components/ui/Label';
+import WootLabel from 'dashboard/components/ui/Label.vue';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
@@ -40,7 +40,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import Integration from './Integration';
+import Integration from './Integration.vue';

 export default {
  components: {
@@ -30,8 +30,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import Integration from './Integration';
-import IntegrationHelpText from './IntegrationHelpText';
+import Integration from './Integration.vue';
+import IntegrationHelpText from './IntegrationHelpText.vue';

 export default {
  components: {
@@ -41,7 +41,7 @@ import Integration from './Integration.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
 export default {
  components: {
    Spinner,
@@ -90,11 +90,11 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import NewWebhook from './NewWebHook';
-import EditWebhook from './EditWebHook';
+import NewWebhook from './NewWebHook.vue';
+import EditWebhook from './EditWebHook.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WebhookRow from './WebhookRow';
+import WebhookRow from './WebhookRow.vue';

 export default {
  components: {
@@ -33,7 +33,7 @@
 </template>
 <script>
 import webhookMixin from './webhookMixin';
-import ShowMore from 'dashboard/components/widgets/ShowMore';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';

 export default {
  components: { ShowMore },
@@ -103,8 +103,8 @@
 <script>
 import { mapGetters } from 'vuex';

-import AddLabel from './AddLabel';
-import EditLabel from './EditLabel';
+import AddLabel from './AddLabel.vue';
+import EditLabel from './EditLabel.vue';
 import alertMixin from 'shared/mixins/alertMixin';

 export default {
@@ -60,7 +60,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import accountMixin from 'dashboard/mixins/account.js';
-import MacrosTableRow from './MacrosTableRow';
+import MacrosTableRow from './MacrosTableRow.vue';
 export default {
  components: {
    MacrosTableRow,
@@ -13,7 +13,7 @@
 </template>

 <script>
-import MacroForm from './MacroForm';
+import MacroForm from './MacroForm.vue';
 import { MACRO_ACTION_TYPES } from './constants';
 import { mapGetters } from 'vuex';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
@@ -22,8 +22,8 @@
 </template>

 <script>
-import MacroNodes from './MacroNodes';
-import MacroProperties from './MacroProperties';
+import MacroNodes from './MacroNodes.vue';
+import MacroProperties from './MacroProperties.vue';
 import { required, requiredIf } from 'vuelidate/lib/validators';

 export default {
--- a/Show More
+++ b/Show More