Page MenuHomePhabricator
Differential D8819

[web] introduce ReactionPill component
ClosedPublic
Actions

Authored by ginsu on Aug 15 2023, 10:19 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 23, 3:43 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:45 PM
Unknown Object (File)
Mon, Mar 17, 4:24 PM
Unknown Object (File)
Feb 26 2025, 5:09 PM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
kamil
Commits
rCOMM7661ac1baf29: [web] introduce ReactionPill component
Summary

As I was working on implementing the reaction tooltip I was having to put a ton of reaction specific code into InlineEngagement. This was getting messy really quick so I created and introduced this ReactionPill component to keep the logic organized

Depends on D8810

Test Plan

flow and no regressions with the ReactionPill (The pill looks the same and I can still react/unreact by clicking on the pill)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Aug 15 2023, 10:19 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptAug 15 2023, 10:19 AM
ginsu edited the summary of this revision. (Show Details)Aug 15 2023, 10:20 AM
ginsu added reviewers: atul, kamil.
ginsu added a parent revision: D8810: [web] show which reactions the viewer has already selected in the inline engagement.
ginsu updated this revision to Diff 29916.Aug 15 2023, 10:22 AM

remove accidental reaction-tooltip.react.js file

Harbormaster failed remote builds in B21762: Diff 29915!Aug 15 2023, 10:36 AM
Harbormaster completed remote builds in B21763: Diff 29916.Aug 15 2023, 10:41 AM
ginsu requested review of this revision.Aug 15 2023, 10:41 AM
ginsu added a child revision: D8823: [web] introduce ReactionTooltip component.Aug 15 2023, 4:48 PM
ginsu removed a child revision: D8823: [web] introduce ReactionTooltip component.Aug 15 2023, 11:33 PM
ginsu added a child revision: D8826: [web] rename getMessageActionTooltipStyle to getTooltipStyle.Aug 15 2023, 11:38 PM
kamil accepted this revision.Aug 16 2023, 2:28 AM
kamil added inline comments.
web/chat/reaction-pill.react.js
16–18 ↗(On Diff #29916)

I think we should avoid passing large objects to child component when possible

This revision is now accepted and ready to land.Aug 16 2023, 2:28 AM
ginsu updated this revision to Diff 30382.Aug 27 2023, 8:50 PM

address feedback and rebase before landing

Harbormaster completed remote builds in B22136: Diff 30382.Aug 27 2023, 9:08 PM
Closed by commit rCOMM7661ac1baf29: [web] introduce ReactionPill component (authored by ginsu). · Explain WhyAug 27 2023, 10:04 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM7661ac1baf29: [web] introduce ReactionPill component.

Revision Contents
Changeset List

Diff 30382

View Options

web/chat/inline-engagement.css

Show All 12 Linesimport {
entryRevisionFetchResponder, entryRevisionFetchResponder,
entryCreationResponder, entryCreationResponder,
entryUpdateResponder, entryUpdateResponder,
entryDeletionResponder, entryDeletionResponder,
entryRestorationResponder, entryRestorationResponder,
calendarQueryUpdateResponder, calendarQueryUpdateResponder,
} from './responders/entry-responders.js'; } from './responders/entry-responders.js';
import type { JSONResponder } from './responders/handlers.js'; import type { JSONResponder } from './responders/handlers.js';
import { getSessionPublicKeysResponder } from './responders/keys-responders.js'; import {
getSessionPublicKeysResponder,
getOlmSessionInitializationDataResponder,
} from './responders/keys-responders.js';
import { inviteLinkVerificationResponder } from './responders/link-responders.js'; import { inviteLinkVerificationResponder } from './responders/link-responders.js';
import { messageReportCreationResponder } from './responders/message-report-responder.js'; import { messageReportCreationResponder } from './responders/message-report-responder.js';
import { import {
textMessageCreationResponder, textMessageCreationResponder,
messageFetchResponder, messageFetchResponder,
multimediaMessageCreationResponder, multimediaMessageCreationResponder,
reactionMessageCreationResponder, reactionMessageCreationResponder,
editMessageCreationResponder, editMessageCreationResponder,
▲ Show 20 Lines • Show All 239 Lines • ▼ Show 20 Linesconst jsonEndpoints: { [id: Endpoint]: JSONResponder } = {
update_user_avatar: { update_user_avatar: {
responder: updateUserAvatarResponder, responder: updateUserAvatarResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
upload_media_metadata: { upload_media_metadata: {
responder: uploadMediaMetadataResponder, responder: uploadMediaMetadataResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
get_olm_session_initialization_data: {
responder: getOlmSessionInitializationDataResponder,
requiredPolicies: [],
},
}; };
export { jsonEndpoints }; export { jsonEndpoints };
View Options

web/chat/inline-engagement.react.js

Show All 12 Linesimport {
entryRevisionFetchResponder, entryRevisionFetchResponder,
entryCreationResponder, entryCreationResponder,
entryUpdateResponder, entryUpdateResponder,
entryDeletionResponder, entryDeletionResponder,
entryRestorationResponder, entryRestorationResponder,
calendarQueryUpdateResponder, calendarQueryUpdateResponder,
} from './responders/entry-responders.js'; } from './responders/entry-responders.js';
import type { JSONResponder } from './responders/handlers.js'; import type { JSONResponder } from './responders/handlers.js';
import { getSessionPublicKeysResponder } from './responders/keys-responders.js'; import {
getSessionPublicKeysResponder,
getOlmSessionInitializationDataResponder,
} from './responders/keys-responders.js';
import { inviteLinkVerificationResponder } from './responders/link-responders.js'; import { inviteLinkVerificationResponder } from './responders/link-responders.js';
import { messageReportCreationResponder } from './responders/message-report-responder.js'; import { messageReportCreationResponder } from './responders/message-report-responder.js';
import { import {
textMessageCreationResponder, textMessageCreationResponder,
messageFetchResponder, messageFetchResponder,
multimediaMessageCreationResponder, multimediaMessageCreationResponder,
reactionMessageCreationResponder, reactionMessageCreationResponder,
editMessageCreationResponder, editMessageCreationResponder,
▲ Show 20 Lines • Show All 239 Lines • ▼ Show 20 Linesconst jsonEndpoints: { [id: Endpoint]: JSONResponder } = {
update_user_avatar: { update_user_avatar: {
responder: updateUserAvatarResponder, responder: updateUserAvatarResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
upload_media_metadata: { upload_media_metadata: {
responder: uploadMediaMetadataResponder, responder: uploadMediaMetadataResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
get_olm_session_initialization_data: {
responder: getOlmSessionInitializationDataResponder,
requiredPolicies: [],
},
}; };
export { jsonEndpoints }; export { jsonEndpoints };
View Options

web/chat/reaction-pill.css

Show All 12 Linesimport {
entryRevisionFetchResponder, entryRevisionFetchResponder,
entryCreationResponder, entryCreationResponder,
entryUpdateResponder, entryUpdateResponder,
entryDeletionResponder, entryDeletionResponder,
entryRestorationResponder, entryRestorationResponder,
calendarQueryUpdateResponder, calendarQueryUpdateResponder,
} from './responders/entry-responders.js'; } from './responders/entry-responders.js';
import type { JSONResponder } from './responders/handlers.js'; import type { JSONResponder } from './responders/handlers.js';
import { getSessionPublicKeysResponder } from './responders/keys-responders.js'; import {
getSessionPublicKeysResponder,
getOlmSessionInitializationDataResponder,
} from './responders/keys-responders.js';
import { inviteLinkVerificationResponder } from './responders/link-responders.js'; import { inviteLinkVerificationResponder } from './responders/link-responders.js';
import { messageReportCreationResponder } from './responders/message-report-responder.js'; import { messageReportCreationResponder } from './responders/message-report-responder.js';
import { import {
textMessageCreationResponder, textMessageCreationResponder,
messageFetchResponder, messageFetchResponder,
multimediaMessageCreationResponder, multimediaMessageCreationResponder,
reactionMessageCreationResponder, reactionMessageCreationResponder,
editMessageCreationResponder, editMessageCreationResponder,
▲ Show 20 Lines • Show All 239 Lines • ▼ Show 20 Linesconst jsonEndpoints: { [id: Endpoint]: JSONResponder } = {
update_user_avatar: { update_user_avatar: {
responder: updateUserAvatarResponder, responder: updateUserAvatarResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
upload_media_metadata: { upload_media_metadata: {
responder: uploadMediaMetadataResponder, responder: uploadMediaMetadataResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
get_olm_session_initialization_data: {
responder: getOlmSessionInitializationDataResponder,
requiredPolicies: [],
},
}; };
export { jsonEndpoints }; export { jsonEndpoints };
View Options

web/chat/reaction-pill.react.js

Show All 12 Linesimport {
entryRevisionFetchResponder, entryRevisionFetchResponder,
entryCreationResponder, entryCreationResponder,
entryUpdateResponder, entryUpdateResponder,
entryDeletionResponder, entryDeletionResponder,
entryRestorationResponder, entryRestorationResponder,
calendarQueryUpdateResponder, calendarQueryUpdateResponder,
} from './responders/entry-responders.js'; } from './responders/entry-responders.js';
import type { JSONResponder } from './responders/handlers.js'; import type { JSONResponder } from './responders/handlers.js';
import { getSessionPublicKeysResponder } from './responders/keys-responders.js'; import {
getSessionPublicKeysResponder,
getOlmSessionInitializationDataResponder,
} from './responders/keys-responders.js';
import { inviteLinkVerificationResponder } from './responders/link-responders.js'; import { inviteLinkVerificationResponder } from './responders/link-responders.js';
import { messageReportCreationResponder } from './responders/message-report-responder.js'; import { messageReportCreationResponder } from './responders/message-report-responder.js';
import { import {
textMessageCreationResponder, textMessageCreationResponder,
messageFetchResponder, messageFetchResponder,
multimediaMessageCreationResponder, multimediaMessageCreationResponder,
reactionMessageCreationResponder, reactionMessageCreationResponder,
editMessageCreationResponder, editMessageCreationResponder,
▲ Show 20 Lines • Show All 239 Lines • ▼ Show 20 Linesconst jsonEndpoints: { [id: Endpoint]: JSONResponder } = {
update_user_avatar: { update_user_avatar: {
responder: updateUserAvatarResponder, responder: updateUserAvatarResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
upload_media_metadata: { upload_media_metadata: {
responder: uploadMediaMetadataResponder, responder: uploadMediaMetadataResponder,
requiredPolicies: baseLegalPolicies, requiredPolicies: baseLegalPolicies,
}, },
get_olm_session_initialization_data: {
responder: getOlmSessionInitializationDataResponder,
requiredPolicies: [],
},
}; };
export { jsonEndpoints }; export { jsonEndpoints };