Move Sections Plugin to OS folder
Summary: as title; we'd like to reuse this for the Litho sections plugin but not having it in OS makes setting up deps more difficult than it should be. Reviewed By: danielbuechele Differential Revision: D16052298 fbshipit-source-id: cd965688eff4fedbe57264e6676b6ca09b9deb45
This commit is contained in:
Mihaela Ogrezeanu
committed by
Facebook Github Bot
Facebook Github Bot
parent
468468a3bc
commit
353f65cd7f
266
src/plugins/sections/index.js
Normal file
266
src/plugins/sections/index.js
Normal file
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* Copyright 2018-present Facebook.
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import type {
|
||||
TreeGeneration,
|
||||
AddEventPayload,
|
||||
UpdateTreeGenerationHierarchyGenerationPayload,
|
||||
UpdateTreeGenerationChangesetGenerationPayload,
|
||||
UpdateTreeGenerationChangesetApplicationPayload,
|
||||
} from './Models.js';
|
||||
|
||||
import {FlipperPlugin} from 'flipper';
|
||||
import React from 'react';
|
||||
import Tree from './Tree.js';
|
||||
import StackTrace from './StackTrace.js';
|
||||
import EventTable from './EventsTable.js';
|
||||
import DetailsPanel from './DetailsPanel.js';
|
||||
|
||||
import {
|
||||
Toolbar,
|
||||
Glyph,
|
||||
Sidebar,
|
||||
FlexBox,
|
||||
styled,
|
||||
Button,
|
||||
Spacer,
|
||||
colors,
|
||||
DetailSidebar,
|
||||
} from 'flipper';
|
||||
|
||||
const Waiting = styled(FlexBox)(props => ({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexGrow: 1,
|
||||
background: colors.light02,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
const InfoText = styled('div')(props => ({
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
fontWeight: '500',
|
||||
color: colors.light30,
|
||||
}));
|
||||
|
||||
const InfoBox = styled('div')(props => ({
|
||||
maxWidth: 400,
|
||||
margin: 'auto',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
type State = {
|
||||
focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
|
||||
userSelectedGenerationId: ?string,
|
||||
};
|
||||
|
||||
type PersistedState = {
|
||||
generations: {
|
||||
[id: string]: TreeGeneration,
|
||||
},
|
||||
focusedGenerationId: ?string,
|
||||
recording: boolean,
|
||||
};
|
||||
|
||||
export default class extends FlipperPlugin<State, *, PersistedState> {
|
||||
static title = 'Sections';
|
||||
static id = 'Sections';
|
||||
static icon = 'tree';
|
||||
|
||||
static defaultPersistedState = {
|
||||
generations: {},
|
||||
focusedGenerationId: null,
|
||||
recording: true,
|
||||
};
|
||||
|
||||
static persistedStateReducer = (
|
||||
persistedState: PersistedState,
|
||||
method: string,
|
||||
payload: Object,
|
||||
): $Shape<PersistedState> => {
|
||||
if (!persistedState.recording) {
|
||||
return persistedState;
|
||||
}
|
||||
|
||||
const addEvent = (data: AddEventPayload) => ({
|
||||
...persistedState,
|
||||
generations: {
|
||||
...persistedState.generations,
|
||||
[data.id]: {
|
||||
...data,
|
||||
changeSets: [],
|
||||
},
|
||||
},
|
||||
focusedGenerationId: persistedState.focusedGenerationId || data.id,
|
||||
});
|
||||
|
||||
const updateTreeGenerationHierarchyGeneration = (
|
||||
data: UpdateTreeGenerationHierarchyGenerationPayload,
|
||||
) => ({
|
||||
...persistedState,
|
||||
generations: {
|
||||
...persistedState.generations,
|
||||
[data.id]: {
|
||||
...persistedState.generations[data.id],
|
||||
...data,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const updateTreeGenerationChangeset = (
|
||||
data:
|
||||
| UpdateTreeGenerationChangesetGenerationPayload
|
||||
| UpdateTreeGenerationChangesetApplicationPayload,
|
||||
) => ({
|
||||
...persistedState,
|
||||
generations: {
|
||||
...persistedState.generations,
|
||||
[data.tree_generation_id]: {
|
||||
...persistedState.generations[data.tree_generation_id],
|
||||
changeSets: [
|
||||
...persistedState.generations[data.tree_generation_id].changeSets,
|
||||
data,
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (method === 'addEvent') {
|
||||
return addEvent(payload);
|
||||
} else if (method === 'updateTreeGenerationHierarchyGeneration') {
|
||||
return updateTreeGenerationHierarchyGeneration(payload);
|
||||
} else if (
|
||||
method === 'updateTreeGenerationChangesetApplication' ||
|
||||
method === 'updateTreeGenerationChangesetGeneration'
|
||||
) {
|
||||
return updateTreeGenerationChangeset(payload);
|
||||
} else {
|
||||
return persistedState;
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
focusedChangeSet: null,
|
||||
userSelectedGenerationId: null,
|
||||
};
|
||||
|
||||
onTreeGenerationFocused = (focusedGenerationId: ?string) => {
|
||||
this.setState({
|
||||
focusedChangeSet: null,
|
||||
userSelectedGenerationId: focusedGenerationId,
|
||||
});
|
||||
};
|
||||
|
||||
onFocusChangeSet = (
|
||||
focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
|
||||
) => {
|
||||
this.setState({
|
||||
focusedChangeSet,
|
||||
});
|
||||
};
|
||||
|
||||
renderTreeHierarchy = (generation: ?TreeGeneration) => {
|
||||
if (generation && generation.tree && generation.tree.length > 0) {
|
||||
// Display component tree hierarchy, if any
|
||||
return <Tree data={generation.tree} />;
|
||||
} else if (
|
||||
this.state.focusedChangeSet &&
|
||||
this.state.focusedChangeSet.section_component_hierarchy
|
||||
) {
|
||||
// Display section component hierarchy for specific changeset
|
||||
return (
|
||||
<Tree data={this.state.focusedChangeSet.section_component_hierarchy} />
|
||||
);
|
||||
} else {
|
||||
return this.renderWaiting();
|
||||
}
|
||||
};
|
||||
|
||||
renderWaiting = () => (
|
||||
<Waiting>
|
||||
<InfoBox>
|
||||
<Glyph
|
||||
name="face-unhappy"
|
||||
variant="outline"
|
||||
size={24}
|
||||
color={colors.light30}
|
||||
/>
|
||||
<InfoText>No data available...</InfoText>
|
||||
</InfoBox>
|
||||
</Waiting>
|
||||
);
|
||||
|
||||
clear = () => {
|
||||
this.props.setPersistedState({
|
||||
...this.constructor.defaultPersistedState,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {generations} = this.props.persistedState;
|
||||
if (Object.values(this.props.persistedState.generations).length === 0) {
|
||||
return this.renderWaiting();
|
||||
}
|
||||
|
||||
const focusedGenerationId =
|
||||
this.state.userSelectedGenerationId ||
|
||||
this.props.persistedState.focusedGenerationId;
|
||||
|
||||
const focusedTreeGeneration: ?TreeGeneration = focusedGenerationId
|
||||
? generations[focusedGenerationId]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Toolbar>
|
||||
<Spacer />
|
||||
{this.props.persistedState.recording ? (
|
||||
<Button
|
||||
onClick={() =>
|
||||
this.props.setPersistedState({
|
||||
recording: false,
|
||||
})
|
||||
}
|
||||
iconVariant="filled"
|
||||
icon="stop-playback">
|
||||
Stop
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={this.clear} icon="trash" iconVariant="outline">
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</Toolbar>
|
||||
<Sidebar position="top" minHeight={80} height={80}>
|
||||
<EventTable
|
||||
// $FlowFixMe Object.values returns Array<mixed>: https://github.com/facebook/flow/issues/2221
|
||||
generations={Object.values(generations)}
|
||||
focusedGenerationId={focusedGenerationId}
|
||||
onClick={this.onTreeGenerationFocused}
|
||||
/>
|
||||
</Sidebar>
|
||||
{this.renderTreeHierarchy(focusedTreeGeneration)}
|
||||
{focusedTreeGeneration && (
|
||||
<Sidebar position="bottom" minHeight={100} height={250}>
|
||||
<StackTrace data={focusedTreeGeneration.stack_trace} />
|
||||
</Sidebar>
|
||||
)}
|
||||
<DetailSidebar>
|
||||
<DetailsPanel
|
||||
eventUserInfo={focusedTreeGeneration?.payload}
|
||||
changeSets={focusedTreeGeneration?.changeSets}
|
||||
onFocusChangeSet={this.onFocusChangeSet}
|
||||
focusedChangeSet={this.state.focusedChangeSet}
|
||||
/>
|
||||
</DetailSidebar>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user