Page MenuHomePhabricator
Differential D5318

[web] replaced ThreadPicker with ThreadPicker modal
ClosedPublic
Actions

Authored by ginsu on Oct 7 2022, 11:58 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Mar 18, 12:32 AM
Unknown Object (File)
Tue, Mar 18, 12:32 AM
Unknown Object (File)
Tue, Mar 18, 12:31 AM
Unknown Object (File)
Tue, Mar 18, 12:06 AM
Unknown Object (File)
Mon, Mar 17, 7:28 PM
Unknown Object (File)
Feb 22 2025, 7:16 AM
Unknown Object (File)
Feb 16 2025, 7:37 PM
Unknown Object (File)
Feb 16 2025, 7:37 PM
View All Files
Subscribers
• abosh
ashoat
atul
tomek

Details

Reviewers
atul
rohan
• abosh
Commits
rCOMMbdc0254ad0d6: [web] replaced ThreadPicker with ThreadPicker modal
Summary

replaced ThreadPicker component with ThreadPickerModal component.

Depends on D5317 D5239 D5289 D5230

Linear Issue: ENG-1848

Design: ENG-1778

Test Plan

Please view the video to see how the new adding calendar event user flow works now:

Diff Detail

Repository
rCOMM Comm
Branch
eng-1778 (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Oct 7 2022, 11:58 AM
Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptOct 7 2022, 11:58 AM
ginsu edited the summary of this revision. (Show Details)Oct 7 2022, 12:01 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, rohan, • abosh.
ginsu added parent revisions: D5317: [web] introduced thread-picker-modal.react, D5289: [web] refactored ThreadPicker from class based to functional, D5239: [web] implemented search feature for Thread Picker, D5230: [web] removed pagination logic from thread picker.
ginsu attached a referenced file: F193691: Screen Recording 2022-10-07 at 1.55.28 PM.mov. (Show Details)
Harbormaster completed remote builds in B12675: Diff 17419.Oct 7 2022, 12:09 PM
ginsu requested review of this revision.Oct 7 2022, 12:09 PM
atul accepted this revision.Oct 7 2022, 1:13 PM

Looks great!

This revision is now accepted and ready to land.Oct 7 2022, 1:13 PM
Closed by commit rCOMMbdc0254ad0d6: [web] replaced ThreadPicker with ThreadPicker modal (authored by ginsu). · Explain WhyOct 7 2022, 1:52 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMbdc0254ad0d6: [web] replaced ThreadPicker with ThreadPicker modal.

Revision Contents
Changeset List

Diff 17419

View Options

web/calendar/day.react.js

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/calendar/thread-picker.css

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/calendar/thread-picker.react.js

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };