Commit Graph

75 Commits

Author SHA1 Message Date
Shivam Mishra
3a78192e74 fix: Resolve accountId from the route, initialize route-sync before the app is loaded (#10245)
On production on multiple instances it may happen that the UI is
rendered in correctly, with a lot of options in the sidebar not
available. On further investigation I found out that the feature flag
checks were disabling multiple of those, and also we could see many
correlated errors that pointed towards missing information.

So, there were two problems here

1. The `vuex-router-sync` was not very reliable in some cases
2. In `App.vue` the watch on `currentAccountId` didn't always trigger.

## Fix Tested on Staging

Basically tried to reload the page ~50 times with cache enabled,
disabled, throttling, navigating different pages.


https://www.loom.com/share/1bb27294aa364ac4acfb647780d6385a?sid=87e31330-8cb7-4ded-8616-5e95e2ae3516

<details><summary>

#### What I thought was the fix

</summary>
<p>

### My chain of actions

Replacing vuex-router-sync at first worked fine, but then I saw it was
still failing in some cases, I assumed (I was half-correct tho) that the
rendering of the `App.vue` and syncing of the route to the store was not
happening in a synchronous pattern. So I decided, let's not rely on the
store when the route is directly available in the App context.

Following this, I refactored `useAccount` composable to use `useRoute`
directly, instead of the store, and then replaced the getter inside
`App.vue`. What this did was surface the issue but more consistently 🤯

I saw the watcher, added some console logs, and turns out it was not
getting triggered in all those cases. So I added an `immediate` to it.
And viola, it works!

At the moment, this is deployed to staging and seems to be working
correctly. But we still need to verify it for sure, since how this issue
was surfaced is still a mystery. All we know is that it shows up when
the widget is also loaded alongside the app (if it loads before or after
the app, it works fine)

### What about the route in the store?

Well I have used the `route` usage there with fallback to the store
state. Since Vuex exists in the app context, the route should always be
available to it. But after today I have lost all trust in JavaScript and
will worship rails until end of my life, so I added that in a
`try-catch` block, logged the error to Sentry

</p>
</details> 

## Here's the real fix

If you read the explanation I wrote earlier, I thought I fixed the
issue, but then the chat list navigation completely broke. So I removed
the custom route sync implementation and added the original package
back. Turns out the vuex-router-sync earlier was placed after the app
was initalized, however for it to work, the vue app context is not
required. And it's best to run it before the app is even bootstrapped,
so I added it back and placed it correctly.

So the following changes fixes this problem

1. Hoisting the `sync` function call to before we call `createApp` this
ensures that the stores and route hooks are in place before even the app
is created
2. Ensuring the `initializeAccount` is run immediately when watching
`currentAccountId`
4. Source `currentAccountId` for critical top of the tree components
directly from the route instead of the store
2024-10-08 09:25:51 -07:00
Shivam Mishra
c51a458c25 style: apply fixes for eslint issues [cw-3590] (#10210)
These fixes are all auto generated and can be merged directly

Fixes the following issues

1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)


We ignore the top level v-if for now, we will fix it later
2024-10-03 15:02:12 +05:30
Shivam Mishra
42f6621afb feat: Vite + vue 3 💚 (#10047)
Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 00:36:30 -07:00
Shivam Mishra
dadd572f9d refactor: useKeyboardEvents composable (#9959)
This PR has the following changes

1. Fix tab styles issue caused by adding an additional wrapper for
getting an element ref on `ChatTypeTabs.vue`
2. Refactor `useKeyboardEvents` composable to not require an element
ref. It will use a local abort controller to abort any listener

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-08-22 16:40:55 +05:30
Pranav
77b718c22c fix: Remove user.permissions, resolve it from accounts (#9990)
Remove the `user.permissions` field and resolve the permissions directly
from the accounts array in the user. This change ensures that the cache
or previous values from the last active account don't affect the
permissions.

In this PR: 
- Remove user.permissions usage, replace it with getUserPermissions
method.
- Remove json.permissions from user.json.jbuilder
2024-08-21 11:36:26 +05:30
Sivin Varghese
e0b67bb552 feat: Rewrite keyboardEventListener mixin to a composable (#9831) 2024-08-05 18:59:47 +05:30
Sivin Varghese
b4b308336f feat: Eslint rules (#9839)
# Pull Request Template

## Description

This PR adds new eslint rules to the code base.

**Error rules**

|    Rule name     | Type | Files updated |
| ----------------- | --- | - |
| `vue/block-order`  | error  |    |
| `vue/component-name-in-template-casing`  | error  |    |
| `vue/component-options-name-casing`  | error  |    |
| `vue/custom-event-name-casing`  | error  |    |
| `vue/define-emits-declaration`  | error  |    |
| `vue/no-unused-properties`  | error  |    |
| `vue/define-macros-order`  | error  |    |
| `vue/define-props-declaration`  | error  |    |
| `vue/match-component-import-name`  | error  |    |
| `vue/next-tick-style`  | error  |    |
| `vue/no-bare-strings-in-template`  | error  |    |
| `vue/no-empty-component-block`  | error  |    |
| `vue/no-multiple-objects-in-class`  | error  |    |
| `vue/no-required-prop-with-default`  | error  |    |
| `vue/no-static-inline-styles`  | error  |    |
| `vue/no-template-target-blank`  | error  |    |
| `vue/no-this-in-before-route-enter`  | error  |    |
| `vue/no-undef-components`  | error  |    |
| `vue/no-unused-emit-declarations`  | error  |    |
| `vue/no-unused-refs`  | error  |    |
| `vue/no-use-v-else-with-v-for`  | error  |    |
| `vue/no-useless-v-bind`  | error  |    |
| `vue/no-v-text`  | error  |    |
| `vue/padding-line-between-blocks`  | error  |    |
| ~`vue/prefer-prop-type-boolean-first`~ | ~error~ |  (removed this
rule, cause a bug in displaying custom attributes) |
| `vue/prefer-separate-static-class`  | error  |    |
| `vue/prefer-true-attribute-shorthand`  | error  |    |
| `vue/require-explicit-slots`  | error  |    |
| `vue/require-macro-variable-name`  | error  |    |


**Warn rules**

|    Rule name     | Type | Files updated |
| ---- | ------------- | ------------- |
| `vue/no-root-v-if`  | warn  |    |


Fixes https://linear.app/chatwoot/issue/CW-3492/vue-eslint-rules

## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Fayaz Ahmed <fayazara@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
2024-08-05 14:02:16 +05:30
Sivin Varghese
79aa5a5d7f feat: Replace alertMixin usage with useAlert (#9793)
# Pull Request Template

## Description

This PR will replace the usage of `alertMixin` from the code base with
the `useAlert` composable.

Fixes
https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert

## Type of change

- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)

## How Has This Been Tested?

Please refer this issue description

https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>
2024-07-23 16:41:11 +05:30
Sojan Jose
cc4851b19d chore: Move frontend authorization to permission based system (#9709)
We previously relied on user roles to determine whether to render
specific routes in our frontend components. A permissions-based model is replacing this approach.


Follow up: #9695

Co-authored-by: Pranav <pranavrajs@gmail.com>
2024-07-03 15:13:16 -07:00
Shivam Mishra
47f8b2cd0c refactor: handling keyboard shortcuts (#9242)
* fix: Resolve and go next keyboard shortcuts doesn't work

* refactor: use buildHotKeys instead of  hasPressedCommandPlusAltAndEKey

* feat: install tinykeys

* refactor: use tinykeys

* test: update buildKeyEvents

* fix: remove stray import

* feat: handle action list globally

* feat: allow configuring `allowOnFocusedInput`

* chore: Navigate chat list item

* chore: Navigate dashboard

* feat: Navigate editor top panel

* feat: Toggle file upload

* chore: More keyboard shortcuts

* chore: Update mention selection mixin

* chore: Phone input

* chore: Clean up

* chore: Clean up

* chore: Dropdown and editor

* chore: Enter key to send and clean up

* chore: Rename mixin

* chore: Review fixes

* chore: Removed unused shortcut from modal

* fix: Specs

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-04-26 15:41:02 +05:30
Sivin Varghese
3ea54065b1 feat: Upgrade prompt for help center (#8010)
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-10-05 08:34:21 +05:30
Shivam Mishra
48bf8d08e5 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
Sivin Varghese
3054a4cb59 feat: Add support for dark mode in dashboard (#7460)
- Add config for TailwindCSS
- Enable HMR
- Add a config in LocalStorage for Dark Mode

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-07-05 12:13:32 -07:00
Pranav Raj S
985b3f3bfc chore: Reset the base font-size to 16px instead of 10px (#7455)
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
2023-07-04 03:23:00 +05:30
Sivin Varghese
4172cb4b23 feat: Uses expanded layout as default if the breakpoint is less than or equal to 992px (#6134)
* feat: Uses expanded layout as default if the breakpoint is below 992px

* fixes: ES lint issue

* chore: Review fixes

* chore: Hide toggle sidebar menu in profile settings

* chore: Fix login screen

* Update app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* chore: Review fixes

* chore: Review fixes

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
2023-01-09 13:26:31 +05:30
Pranav Raj S
20b4a91122 chore: Add feature flags in the settings console (#5657) 2022-10-17 14:59:44 -07:00
Nithin David Thomas
54d0055e86 chore: Helpcenter routing and UI fixes (#5460)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-09-19 19:40:32 -07:00
Sivin Varghese
678a0af962 chore: Enable Help Center on Sidebar (#5435)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-09-18 13:08:30 -07:00
Sivin Varghese
a680b08251 chore: Fixes height issues with seconday sidebar (#5407) 2022-09-12 19:36:49 +05:30
Sivin Varghese
7a5ea89fd9 chore: Sidebar improvements in small screens (#5400)
* chore: Sidebar improvements in small screens

* chore: Minor fixes
2022-09-06 14:06:26 +05:30
Nithin David Thomas
1594d49a70 Chore: Add link to product docs on sidebar (#5119)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-07-27 10:49:06 +05:30
Pranav Raj S
7fc0d166e8 feat: Allow SaaS users to manage subscription within the dashboard (#5059) 2022-07-19 19:04:17 +05:30
Pranav Raj S
8dd0d514fd feat: Init HelpCenter Routes (#5034) 2022-07-14 10:31:36 +07:00
Fayaz Ahmed
263b8240d3 fix: Add a fix for minor UI / a11y issues (#4905) 2022-06-24 23:12:53 +05:30
Jordan Brough
77a6893203 feat: Open "Switch Account" modal when clicking account name on dashboard (#4613)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-05-06 14:55:38 +05:30
Sivin Varghese
48389d69d8 feat: New notification panel for unread notifications (#4061)
Fixes: #4052
2022-03-25 19:02:45 +05:30
Muhsin Keloth
8c8c5a77c8 feat: Show banner message if Chatwoot update available (#3999)
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
2022-03-15 21:09:14 +05:30
Sivin Varghese
5edf0f2bbe fix: Fix modal responsiveness (#4149) 2022-03-14 18:14:16 +05:30
Sivin Varghese
504fc24fb3 feat: Add the ability to save filters for contact (#3791) 2022-01-21 14:11:59 -08:00
Sivin Varghese
4398734bdf feat: Adds the ability to have custom view for conversations (#3666)
* feat: Adds the ability to save custom filters and display folders on the sidebar

* Minor fixes

* Review fixes

* Review fixes

* i18n fixes

* Shows conversations when the user click on the folder sidebar item

* Spacing fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2022-01-17 09:18:54 +05:30
Pranav Raj S
f7ed7756d9 chore: Use logo thumbnail instead of logo in the sidebar (#3706) 2022-01-06 15:09:01 -08:00
Nithin David Thomas
fade94658a chore: Show scrollbar for sidebar only on hover (#3688) 2022-01-05 09:37:43 +05:30
Pranav Raj S
8b4134c790 fix: Update route permissions in the new primary menu (#3499)
* fix: Display rolewise primary sidebar

* Fix issues with roles

* Fix active style

* Fix accessible menu

* Fix key missing

* Changes menu icon size

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
2021-12-02 11:02:43 +05:30
Nithin David Thomas
b01d032d0d feat: Updates sidebar to accomodate sub menu (#3416)
* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2021-12-01 12:45:39 +05:30
Pranav Raj S
c792cfc0be feat: Use Fluent SVG icons on the dashboard (#3482) 2021-11-30 21:03:18 -08:00
Muhsin Keloth
76370267f3 feat: Render contact custom attributes in contact/conversation sidebar (#3310) 2021-11-11 15:23:33 +05:30
Pranav Raj S
3abcadb5cb fix: Reject keyboard shortcut listeners if input box is active (#3019)
Reject keyboard shortcut listeners if input box is active
2021-09-15 20:15:06 +05:30
Pranav Raj S
4759730022 feat: Configure Chatwoot & Analytics for SaaS app (#2975)
* feat: Add Chatwoot support inside Chatwoot SaaS
* Fix identity issues with Chatwoot
2021-09-07 23:11:01 +05:30
Sivin Varghese
d13c4ff8c5 feat: Keyboard shortcuts improvements (#2790) 2021-08-26 15:55:58 +05:30
Sivin Varghese
c3314dd186 feat: Creates a modal showing all the available keyboard shortcuts (#2728)
* feat: Adds modal showing all the available keyboard shortcuts

* Minor fixes

* Minor fixes

* Spacing fixes

* fix translations

* Adds i18n

* Review fixes

* Review fixes

* spacing fixes

* Review fixes

* Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2021-08-09 21:23:40 -07:00
Pranav Raj S
6c49e58ff8 feat: Add contact label filter (#2454)
Co-authored-by: Sojan Jose <sojan@pepalo.com>
2021-06-18 20:08:58 +05:30
Sivin Varghese
8ca63f0b79 chore: Cleanup page-top-bar style conflicts (#2407)
* chore: Class name cleanup page-top-bar.

* prettier spacing fixes

* Review fixes and adds storybook

* Circleci fixes
2021-06-10 09:35:15 +05:30
Nithin David Thomas
c681e8a01b chore: Refactor button styles (#2259) 2021-05-20 13:51:46 +05:30
Suraj Rajput
7f6abdc987 fix: Add plus icon in sidebar items to settings create page (#2141)
* [Issue-#1965] Add changes

* Added newLink prop with default value true to show the new icon

* Fix button alignment

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
2021-05-08 19:06:41 +05:30
Sivin Varghese
012502a2d1 chore: Refactor shouldShowInboxes function name (#2065) 2021-04-08 11:44:23 +05:30
Sivin Varghese
e289106c5b Chore: Hover color for status dropdown (#1906) 2021-03-20 13:08:56 +05:30
Nithin David Thomas
941d4219f0 feat: Set up store for teams (#1689) 2021-03-15 18:35:56 +05:30
Nithin David Thomas
eaafc45f45 feat: Show teams on sidebar (#1754)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
2021-02-13 14:58:05 +05:30
Pranav Raj S
d4c2a78db6 chore: Add Chatwoot SDK to Chatwoot Dashboard (#1726)
Add Chatwoot SDK to Chatwoot Dashboard
2021-02-08 16:38:35 +05:30
Muhsin Keloth
c087e75808 feat: notification center (#1612)
Co-authored-by: Pranav <pranav@chatwoot.com>
2021-01-25 00:59:44 +05:30