Combined Message Pages/Redesign (#15310)

* split component prepare new views / states

* extract empty and disabled state as components

* fix empty state mail icon

* first logic switching between modes, move page to /private-messages/index.vue

* extract autoCompleteHelper.js

* style header + start new message input

* style plus button + focus input

* state logic, types for sanity

* WIP PM new Message started

* add /members/username test

* first design changes to messageCard

* delete private message or chat - based on the mode

* copy as todo

* mention links to modal

* report chat or private message

* WIP likeButton

* likeButton styling

* hide like on private message cards

* fix unit test

* replace copy as todo - to just a copy to clipboard

* style changes

* menu position + like button width

* dropdown items background + like font

* fix like button padding

* move api endpoints and tests around to group inbox methods  + like for inbox private messages

* restyle system messages

* Dropdown Radius and Padding

* WIP system messages

* fix lint

* copy delta commit of allowing liking own private messages

* enable liking private messages

* fix menu non hovered item icon color

* fix import path

* ignore background on system messages

* requested changes + migration

* update migration to update the unique id to some messages and delete the duplicates

* migration based on users pagination

* fix(migration): use Promise.all

* change to bulkWrites per User, and all messages in one run (of a user)

* check for array

* use rest operator ...

* skip sorting to get the users

* remove migration, disable like for private messages without uniqueMessageId

* lean+bulkWrite for likes, add time checks for like and auth for further debugging

* add a limit 2 get the messages by uniqueId

* Adding a simple server start script

* remove pinned nodemon dep

* fix inbox controller/tests

* fix / requested style changes

* fix empty state padding /

* hide avatar weapons on messages - fix avatar spacing on messages

* Hourglass Simplification (#15323)

* begin removing obsolete tests

* begin refactoring

* update cron tests

* cleanup

* finish basic implementation of new logic

* add more subscription tests

* subscription test improvements

* return nextHourglassDate again

* fix gem limit

* fix(test): short circuit this.

* fix(admin): correct logic and style for shrimple subs

* WIP(frontend): draft of main subs page view

* fix hourglass count

* Fix hourglass logic for upgrades

* fix admin panel display

* WIP(subs): extant Stripe state

* fix admin panel strings

* fix missing transaction type

* add new field for cumulative subscription count

* show date for hourglass bonus if it was received

* fix test

* feat(subscription): max Gems progress readout

* fix(css): correct and refactor heights and selection states

* fix(subs): correct border-radius and redirect

* fix(stripe): correct redirect after success

* Admin panel display fixes

* don’t give additional HG for new sub if they already got one this month

* fix issue with promo hourglasses

* fix(subscription): update layout when gifting

* fix(subscriptions): more gift layout revisions

* fix(subscriptions): minor visual updates

* fix(subs): pass autoRenews through Stripe

* fix(subs): gifts DON't renew

* fix(lint): unnecessary ternary

* fix(lint): do negate object ig

* fix(subs): try again on gifts

* fix(subs): unhovery and un-12-monthy

* fix bug with incorrectly giving HG bonus

* remove only

* fix test

* fix test

* fix(subs): also redirect to subs after gift sub

* fix(subs): fix typeError

* fix(g1g1): don't try to find Gems promo during bogo

---------

Co-authored-by: Phillip Thelen <[email protected]>
Co-authored-by: Kalista Payne <[email protected]>

* chore(sprites): update subproject

* fix(layout): tighten cancellation note

* fix(subs): Google wording and HG escape

* chore(testing): fake g1g1 dates

* fix(subs): don't hide HG preview entirely

* fix(subs): center next hourglass message

* working validatedTextInput.vue within start-new-conversation-input-header.vue 🎉

* fix(git): remove changes from old develop

* Revert "fix(git): remove changes from old develop"

This reverts commit 0e30f7d.

* fix(git): no actually just this file i guesss

* adding an empty loading state, hiding

* fought the avatar arch nemesis again

* fix chatMessages (party chat) message spacing

* move disabled text back to above the input area - re-enable input area

* show disabled private messages top panel

* fix font color

* fixing uiStates - removing disabled - moving the own user check to the last

* fix(lint): add missing prop defaults

* fix(lint): object default should be fn

* fix(chat): correct grammar in error

---------

Co-authored-by: SabreCat <[email protected]>
Co-authored-by: Kalista Payne <[email protected]>
Co-authored-by: Phillip Thelen <[email protected]>

.gitignore

@@ -47,5 +47,5 @@ webpack.webstorm.config
 
 # mongodb replica set for local dev
 mongodb-*.tgz
-/mongodb-data
+/mongodb-data*
 /.nyc_output

package.json

@@ -110,6 +110,7 @@
     "start:simple": "node ./website/server/index.js",
     "debug": "gulp nodemon --inspect",
     "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
     "heroku-postbuild": ".heroku/report_deploy.sh"

test/api/v3/integration/members/GET-members_username.test.js

@@ -0,0 +1,56 @@
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+import common from '../../../../../website/common';
+
+describe('GET /members/username/:username', () => {
+  let user;
+
+  before(async () => {
+    user = await generateUser();
+  });
+
+  it('validates req.params.username', async () => {
+    await expect(user.get('/members/username/')).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('invalidReqParams'),
+    });
+  });
+
+  it('returns a member public data only', async () => {
+    // make sure user has all the fields that can be returned by the getMember call
+    const member = await generateUser({
+      contributor: { level: 1 },
+      backer: { tier: 3 },
+      preferences: {
+        costume: false,
+        background: 'volcano',
+      },
+      secret: {
+        text: 'Clark Kent',
+      },
+    });
+    const memberRes = await user.get(`/members/username/${member.auth.local.username}`);
+    expect(memberRes).to.have.all.keys([ // works as: object has all and only these keys
+      '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
+      'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
+    ]);
+    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
+    expect(Object.keys(memberRes.preferences).sort()).to.eql([
+      'size', 'hair', 'skin', 'shirt',
+      'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',
+    ].sort());
+
+    expect(memberRes.stats.maxMP).to.exist;
+    expect(memberRes.stats.maxHealth).to.equal(common.maxHealth);
+    expect(memberRes.stats.toNextLevel).to.equal(common.tnl(memberRes.stats.lvl));
+    expect(memberRes.inbox.optOut).to.exist;
+    expect(memberRes.inbox.canReceive).to.exist;
+    expect(memberRes.inbox.messages).to.not.exist;
+    expect(memberRes.secret).to.not.exist;
+
+    expect(memberRes.blocks).to.not.exist;
+  });
+});

test/api/v4/inbox/POST-inbox_message_like.test.js

@@ -0,0 +1,104 @@
+import find from 'lodash/find';
+import {
+  generateUser,
+  translate as t,
+} from '../../../helpers/api-integration/v4';
+
+/**
+ * Checks the messages array if the uniqueMessageId has the like flag
+ * @param {InboxMessage[]} messages
+ * @param {String} uniqueMessageId
+ * @param {String} userId
+ * @param {Boolean} likeStatus
+ */
+function expectMessagesLikeStatus (messages, uniqueMessageId, userId, likeStatus) {
+  const messageToCheck = find(messages, { uniqueMessageId });
+
+  expect(messageToCheck.likes[userId]).to.equal(likeStatus);
+}
+
+// eslint-disable-next-line mocha/no-exclusive-tests
+describe('POST /inbox/like-private-message/:messageId', () => {
+  let userToSendMessage;
+  const getLikeUrl = messageId => `/inbox/like-private-message/${messageId}`;
+
+  before(async () => {
+    userToSendMessage = await generateUser();
+  });
+
+  it('Returns an error when private message is not found', async () => {
+    await expect(userToSendMessage.post(getLikeUrl('some-unknown-id')))
+      .to.eventually.be.rejected.and.eql({
+        code: 404,
+        error: 'NotFound',
+        message: t('messageGroupChatNotFound'),
+      });
+  });
+
+  it('Likes a message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+    expect(likeResult.likes[receiver._id]).to.equal(true);
+
+    const senderMessages = await userToSendMessage.get('/inbox/messages');
+
+    expectMessagesLikeStatus(senderMessages, uniqueMessageId, receiver._id, true);
+
+    const receiversMessages = await receiver.get('/inbox/messages');
+
+    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, receiver._id, true);
+  });
+
+  it('Allows to likes their own private message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await userToSendMessage.post(getLikeUrl(uniqueMessageId));
+    expect(likeResult.likes[userToSendMessage._id]).to.equal(true);
+
+    const messages = await userToSendMessage.get('/inbox/messages');
+    expectMessagesLikeStatus(messages, uniqueMessageId, userToSendMessage._id, true);
+
+    const receiversMessages = await receiver.get('/inbox/messages');
+
+    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, userToSendMessage._id, true);
+  });
+
+  it('Unlikes a message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+
+    expect(likeResult.likes[receiver._id]).to.equal(true);
+
+    const unlikeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+
+    expect(unlikeResult.likes[receiver._id]).to.equal(false);
+
+    const messages = await userToSendMessage.get('/inbox/messages');
+
+    const messageToCheck = find(messages, { id: sentMessageResult.message.id });
+    expect(messageToCheck.likes[receiver._id]).to.equal(false);
+  });
+});

website/client/.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
   extends: [
     'habitrpg/lib/vue',
   ],
-  ignorePatterns: ['dist/', 'node_modules/'],
+  ignorePatterns: ['dist/', 'node_modules/', '*.d.ts'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

website/client/src/assets/scss/button.scss

@@ -101,8 +101,7 @@
 
 .btn-secondary,
 .dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
-.show > .btn-secondary.dropdown-toggle:not(.btn-success)
-{
+.show > .btn-secondary.dropdown-toggle:not(.btn-success) {
   background: $white;
   border: 2px solid transparent;
   color: $gray-50;
@@ -298,6 +297,16 @@
   box-shadow: none;
 }
 
+.btn-flat,
+.dropdown > .btn-flat.dropdown-toggle:not(.btn-success),
+.show > .btn-flat.dropdown-toggle:not(.btn-success) {
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
+  }
+}
+
 .btn-cancel {
   color: $blue-10;
 }

website/client/src/assets/scss/dropdown.scss

@@ -38,7 +38,12 @@
   border-radius: 2px;
   box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   padding: 0;
+}
 
+.no-min-width {
+  .dropdown-menu {
+    min-width: 0 !important;
+  }
 }
 
 // shared dropdown-item styles
@@ -54,6 +59,8 @@
   color: $gray-50 !important;
   cursor: pointer;
 
+  --dropdown-item-hover-icon-color: #{$gray-200};
+
   &:focus {
     outline: none;
     background-color: inherit;
@@ -88,7 +95,7 @@
 
   &:not(:hover) {
     .with-icon .svg-icon {
-      color: $gray-200;
+      color: var(dropdown-item-hover-icon-color);
     }
   }
 }
@@ -151,7 +158,7 @@
 
 // selectList.vue items sizing
 .selectListItem .dropdown-item {
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem 1rem 0.25rem 0.75rem;
   height: 32px;
 
   &:active, &:hover, &:focus, &.active {