Page MenuHomePhabricator
Differential D5113

[web] Introducing `ModalLabel` component
AbandonedPublic
Actions

Authored by • jakub on Sep 12 2022, 7:11 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 3, 12:53 AM
Unknown Object (File)
Tue, Apr 1, 10:42 AM
Unknown Object (File)
Tue, Apr 1, 10:42 AM
Unknown Object (File)
Tue, Apr 1, 10:42 AM
Unknown Object (File)
Tue, Apr 1, 10:42 AM
Unknown Object (File)
Sun, Mar 30, 9:04 PM
Unknown Object (File)
Fri, Mar 21, 10:52 AM
Unknown Object (File)
Feb 27 2025, 12:21 PM
View All Files
Subscribers
• abosh
ashoat
atul
tomek

Details

Reviewers
tomek
atul
ashoat
Summary

Depends on D5110

Introducing a simple ModalLabel component, which will be used in e.g. SubchannelComposer

Screenshot 2022-09-12 at 16.04.34.png (105×235 px, 4 KB)

Figma:
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1077%3A70464

Test Plan

This component will be used in next diffs (firstly in SubchannelComposer). Currently, no changes in the app.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jakub created this revision.Sep 12 2022, 7:11 AM
Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptSep 12 2022, 7:11 AM
Harbormaster completed remote builds in B12084: Diff 16585.Sep 12 2022, 7:22 AM
• jakub requested review of this revision.Sep 12 2022, 7:22 AM
• jakub retitled this revision from [web] Introducing ModalLabel to [web] Introducing `ModalLabel` component.Sep 12 2022, 8:22 AM
• jakub edited the summary of this revision. (Show Details)
• jakub edited the test plan for this revision. (Show Details)
• jakub added reviewers: tomek, atul, ashoat.
• jakub added a parent revision: D5110: [web] Fix warning - set readOnly param to EnumSettingOption radio.
• jakub added a child revision: D5115: [web] Added possibility to change input type and icon position in EnumSettingsOption.Sep 12 2022, 9:25 AM
atul requested changes to this revision.Sep 15 2022, 7:35 AM

Looks good at a high level! Requested two changes to maintain consistency with the rest of the codebase

web/components/modal-label.react.js
3 ↗(On Diff #16585)

We use

import * as React from 'react';

elsewhere in the codebase

8 ↗(On Diff #16585)

nice catch making this read only

11–15 ↗(On Diff #16585)

We use the function keyword for React components elsewhere in the codebase

eg

function ModalLabel(props: Props): React.Node {
  return <h1>Blah</h1>;
}
This revision now requires changes to proceed.Sep 15 2022, 7:35 AM
ashoat resigned from this revision.Sep 15 2022, 12:45 PM

I should not be a first-pass reviewer except for the cases listed here

• jakub updated this revision to Diff 16733.Sep 16 2022, 1:24 AM

Adjust to codebase

Harbormaster completed remote builds in B12198: Diff 16733.Sep 16 2022, 1:34 AM
tomek requested changes to this revision.Sep 16 2022, 10:53 AM

Overall I'm not really sure if introducing components that are that simple is beneficial. It is just a simple div with a class, so maybe it would be better to just have div with a class where this component would be used? (not sure, it depends on the rest of the stack).

Usually, when we have a component which renders a single prop, we can consider using children instead - that is more reusable, but not sure if it applies here.

web/components/modal-label.css
2

Usually rem should be preferred over px, but in our case we're using px almost everywhere, and the consistency is more important.

This revision now requires changes to proceed.Sep 16 2022, 10:53 AM
• jakub abandoned this revision.Sep 20 2022, 11:11 AM

After discussion in real life, I decided to abandon this diff and include this component directly to ComposeSubchannel

Revision Contents
Changeset List

PathSize
web/
components/
4 lines
17 lines

Diff 16733

View Options

web/components/modal-label.css

Show First 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst entryQueryInputValidator: TInterface<EntryQueryInput> = tShape({
filters: t.maybe( filters: t.maybe(
t.list( t.list(
t.union([ t.union([
tShape({ tShape({
type: tString(calendarThreadFilterTypes.NOT_DELETED), type: tString(calendarThreadFilterTypes.NOT_DELETED),
}), }),
tShape({ tShape({
type: tString(calendarThreadFilterTypes.THREAD_LIST), type: tString(calendarThreadFilterTypes.THREAD_LIST),
threadIDs: t.list(t.String), threadIDs: t.list(tID),
}), }),
]), ]),
), ),
), ),
}); });
const newEntryQueryInputValidator: TInterface<CalendarQuery> = tShape({ const newEntryQueryInputValidator: TInterface<CalendarQuery> = tShape({
startDate: tDate, startDate: tDate,
endDate: tDate, endDate: tDate,
filters: t.list( filters: t.list(
t.union([ t.union([
tShape({ tShape({
type: tString(calendarThreadFilterTypes.NOT_DELETED), type: tString(calendarThreadFilterTypes.NOT_DELETED),
}), }),
tShape({ tShape({
type: tString(calendarThreadFilterTypes.THREAD_LIST), type: tString(calendarThreadFilterTypes.THREAD_LIST),
threadIDs: t.list(t.String), threadIDs: t.list(tID),
}), }),
]), ]),
), ),
}); });
function normalizeCalendarQuery(input: any): CalendarQuery { function normalizeCalendarQuery(input: any): CalendarQuery {
if (input.filters) { if (input.filters) {
return { return {
▲ Show 20 Lines • Show All 49 Lines • ▼ Show 20 Lines): Promise<FetchEntryInfosResponse> {
const response = await fetchEntryInfos(viewer, [request]); const response = await fetchEntryInfos(viewer, [request]);
return validateOutput(viewer, fetchEntryInfosResponseValidator, { return validateOutput(viewer, fetchEntryInfosResponseValidator, {
...response, ...response,
userInfos: {}, userInfos: {},
}); });
} }
const entryRevisionHistoryFetchInputValidator = tShape({ const entryRevisionHistoryFetchInputValidator = tShape({
id: t.String, id: tID,
}); });
export const fetchEntryRevisionInfosResultValidator: TInterface<FetchEntryRevisionInfosResult> = export const fetchEntryRevisionInfosResultValidator: TInterface<FetchEntryRevisionInfosResult> =
tShape<FetchEntryRevisionInfosResult>({ tShape<FetchEntryRevisionInfosResult>({
result: t.list(historyRevisionInfoValidator), result: t.list(historyRevisionInfoValidator),
}); });
async function entryRevisionFetchResponder( async function entryRevisionFetchResponder(
Show All 11 Lines): Promise<FetchEntryRevisionInfosResult> {
); );
} }
const createEntryRequestInputValidator = tShape({ const createEntryRequestInputValidator = tShape({
text: t.String, text: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
date: tDate, date: tDate,
threadID: t.String, threadID: tID,
localID: t.maybe(t.String), localID: t.maybe(t.String),
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const saveEntryResponseValidator: TInterface<SaveEntryResponse> = export const saveEntryResponseValidator: TInterface<SaveEntryResponse> =
tShape<SaveEntryResponse>({ tShape<SaveEntryResponse>({
entryID: tID, entryID: tID,
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
updatesResult: serverCreateUpdatesResponseValidator, updatesResult: serverCreateUpdatesResponseValidator,
}); });
async function entryCreationResponder( async function entryCreationResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<SaveEntryResponse> { ): Promise<SaveEntryResponse> {
const request: CreateEntryRequest = input; const request: CreateEntryRequest = input;
await validateInput(viewer, createEntryRequestInputValidator, request); await validateInput(viewer, createEntryRequestInputValidator, request);
const response = await createEntry(viewer, request); const response = await createEntry(viewer, request);
return validateOutput(viewer, saveEntryResponseValidator, response); return validateOutput(viewer, saveEntryResponseValidator, response);
} }
const saveEntryRequestInputValidator = tShape({ const saveEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
text: t.String, text: t.String,
prevText: t.String, prevText: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
async function entryUpdateResponder( async function entryUpdateResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<SaveEntryResponse> { ): Promise<SaveEntryResponse> {
const request: SaveEntryRequest = input; const request: SaveEntryRequest = input;
await validateInput(viewer, saveEntryRequestInputValidator, request); await validateInput(viewer, saveEntryRequestInputValidator, request);
const response = await updateEntry(viewer, request); const response = await updateEntry(viewer, request);
return validateOutput(viewer, saveEntryResponseValidator, response); return validateOutput(viewer, saveEntryResponseValidator, response);
} }
const deleteEntryRequestInputValidator = tShape({ const deleteEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
prevText: t.String, prevText: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const deleteEntryResponseValidator: TInterface<DeleteEntryResponse> = export const deleteEntryResponseValidator: TInterface<DeleteEntryResponse> =
tShape<DeleteEntryResponse>({ tShape<DeleteEntryResponse>({
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
threadID: tID, threadID: tID,
updatesResult: serverCreateUpdatesResponseValidator, updatesResult: serverCreateUpdatesResponseValidator,
}); });
async function entryDeletionResponder( async function entryDeletionResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<DeleteEntryResponse> { ): Promise<DeleteEntryResponse> {
const request: DeleteEntryRequest = input; const request: DeleteEntryRequest = input;
await validateInput(viewer, deleteEntryRequestInputValidator, request); await validateInput(viewer, deleteEntryRequestInputValidator, request);
const response = await deleteEntry(viewer, request); const response = await deleteEntry(viewer, request);
return validateOutput(viewer, deleteEntryResponseValidator, response); return validateOutput(viewer, deleteEntryResponseValidator, response);
} }
const restoreEntryRequestInputValidator = tShape({ const restoreEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const restoreEntryResponseValidator: TInterface<RestoreEntryResponse> = export const restoreEntryResponseValidator: TInterface<RestoreEntryResponse> =
tShape<RestoreEntryResponse>({ tShape<RestoreEntryResponse>({
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
▲ Show 20 Lines • Show All 61 Lines • Show Last 20 Lines
View Options

web/components/modal-label.react.js

Show First 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst entryQueryInputValidator: TInterface<EntryQueryInput> = tShape({
filters: t.maybe( filters: t.maybe(
t.list( t.list(
t.union([ t.union([
tShape({ tShape({
type: tString(calendarThreadFilterTypes.NOT_DELETED), type: tString(calendarThreadFilterTypes.NOT_DELETED),
}), }),
tShape({ tShape({
type: tString(calendarThreadFilterTypes.THREAD_LIST), type: tString(calendarThreadFilterTypes.THREAD_LIST),
threadIDs: t.list(t.String), threadIDs: t.list(tID),
}), }),
]), ]),
), ),
), ),
}); });
const newEntryQueryInputValidator: TInterface<CalendarQuery> = tShape({ const newEntryQueryInputValidator: TInterface<CalendarQuery> = tShape({
startDate: tDate, startDate: tDate,
endDate: tDate, endDate: tDate,
filters: t.list( filters: t.list(
t.union([ t.union([
tShape({ tShape({
type: tString(calendarThreadFilterTypes.NOT_DELETED), type: tString(calendarThreadFilterTypes.NOT_DELETED),
}), }),
tShape({ tShape({
type: tString(calendarThreadFilterTypes.THREAD_LIST), type: tString(calendarThreadFilterTypes.THREAD_LIST),
threadIDs: t.list(t.String), threadIDs: t.list(tID),
}), }),
]), ]),
), ),
}); });
function normalizeCalendarQuery(input: any): CalendarQuery { function normalizeCalendarQuery(input: any): CalendarQuery {
if (input.filters) { if (input.filters) {
return { return {
▲ Show 20 Lines • Show All 49 Lines • ▼ Show 20 Lines): Promise<FetchEntryInfosResponse> {
const response = await fetchEntryInfos(viewer, [request]); const response = await fetchEntryInfos(viewer, [request]);
return validateOutput(viewer, fetchEntryInfosResponseValidator, { return validateOutput(viewer, fetchEntryInfosResponseValidator, {
...response, ...response,
userInfos: {}, userInfos: {},
}); });
} }
const entryRevisionHistoryFetchInputValidator = tShape({ const entryRevisionHistoryFetchInputValidator = tShape({
id: t.String, id: tID,
}); });
export const fetchEntryRevisionInfosResultValidator: TInterface<FetchEntryRevisionInfosResult> = export const fetchEntryRevisionInfosResultValidator: TInterface<FetchEntryRevisionInfosResult> =
tShape<FetchEntryRevisionInfosResult>({ tShape<FetchEntryRevisionInfosResult>({
result: t.list(historyRevisionInfoValidator), result: t.list(historyRevisionInfoValidator),
}); });
async function entryRevisionFetchResponder( async function entryRevisionFetchResponder(
Show All 11 Lines): Promise<FetchEntryRevisionInfosResult> {
); );
} }
const createEntryRequestInputValidator = tShape({ const createEntryRequestInputValidator = tShape({
text: t.String, text: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
date: tDate, date: tDate,
threadID: t.String, threadID: tID,
localID: t.maybe(t.String), localID: t.maybe(t.String),
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const saveEntryResponseValidator: TInterface<SaveEntryResponse> = export const saveEntryResponseValidator: TInterface<SaveEntryResponse> =
tShape<SaveEntryResponse>({ tShape<SaveEntryResponse>({
entryID: tID, entryID: tID,
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
updatesResult: serverCreateUpdatesResponseValidator, updatesResult: serverCreateUpdatesResponseValidator,
}); });
async function entryCreationResponder( async function entryCreationResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<SaveEntryResponse> { ): Promise<SaveEntryResponse> {
const request: CreateEntryRequest = input; const request: CreateEntryRequest = input;
await validateInput(viewer, createEntryRequestInputValidator, request); await validateInput(viewer, createEntryRequestInputValidator, request);
const response = await createEntry(viewer, request); const response = await createEntry(viewer, request);
return validateOutput(viewer, saveEntryResponseValidator, response); return validateOutput(viewer, saveEntryResponseValidator, response);
} }
const saveEntryRequestInputValidator = tShape({ const saveEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
text: t.String, text: t.String,
prevText: t.String, prevText: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
async function entryUpdateResponder( async function entryUpdateResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<SaveEntryResponse> { ): Promise<SaveEntryResponse> {
const request: SaveEntryRequest = input; const request: SaveEntryRequest = input;
await validateInput(viewer, saveEntryRequestInputValidator, request); await validateInput(viewer, saveEntryRequestInputValidator, request);
const response = await updateEntry(viewer, request); const response = await updateEntry(viewer, request);
return validateOutput(viewer, saveEntryResponseValidator, response); return validateOutput(viewer, saveEntryResponseValidator, response);
} }
const deleteEntryRequestInputValidator = tShape({ const deleteEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
prevText: t.String, prevText: t.String,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const deleteEntryResponseValidator: TInterface<DeleteEntryResponse> = export const deleteEntryResponseValidator: TInterface<DeleteEntryResponse> =
tShape<DeleteEntryResponse>({ tShape<DeleteEntryResponse>({
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
threadID: tID, threadID: tID,
updatesResult: serverCreateUpdatesResponseValidator, updatesResult: serverCreateUpdatesResponseValidator,
}); });
async function entryDeletionResponder( async function entryDeletionResponder(
viewer: Viewer, viewer: Viewer,
input: any, input: any,
): Promise<DeleteEntryResponse> { ): Promise<DeleteEntryResponse> {
const request: DeleteEntryRequest = input; const request: DeleteEntryRequest = input;
await validateInput(viewer, deleteEntryRequestInputValidator, request); await validateInput(viewer, deleteEntryRequestInputValidator, request);
const response = await deleteEntry(viewer, request); const response = await deleteEntry(viewer, request);
return validateOutput(viewer, deleteEntryResponseValidator, response); return validateOutput(viewer, deleteEntryResponseValidator, response);
} }
const restoreEntryRequestInputValidator = tShape({ const restoreEntryRequestInputValidator = tShape({
entryID: t.String, entryID: tID,
sessionID: t.maybe(t.String), sessionID: t.maybe(t.String),
timestamp: t.Number, timestamp: t.Number,
calendarQuery: t.maybe(newEntryQueryInputValidator), calendarQuery: t.maybe(newEntryQueryInputValidator),
}); });
export const restoreEntryResponseValidator: TInterface<RestoreEntryResponse> = export const restoreEntryResponseValidator: TInterface<RestoreEntryResponse> =
tShape<RestoreEntryResponse>({ tShape<RestoreEntryResponse>({
newMessageInfos: t.list(rawMessageInfoValidator), newMessageInfos: t.list(rawMessageInfoValidator),
▲ Show 20 Lines • Show All 61 Lines • Show Last 20 Lines