Plugin folders re-structuring
Summary: Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions. Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually). New proposed structure for plugin packages: ``` - root - node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion -- plugins --- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936) --- public ---- node_modules - modules used by public plugins ---- pluginA ----- node_modules - modules used by plugin A exclusively ---- pluginB ----- node_modules - modules used by plugin B exclusively --- fb ---- node_modules - modules used by fb-internal plugins ---- pluginC ----- node_modules - modules used by plugin C exclusively ---- pluginD ----- node_modules - modules used by plugin D exclusively ``` I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies. Reviewed By: mweststrate Differential Revision: D27034108 fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586
This commit is contained in:
Anton Nikolaev
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
32bf4c32c2
commit
b3274a8450
49
desktop/plugins/public/databases/ButtonNavigation.tsx
Normal file
49
desktop/plugins/public/databases/ButtonNavigation.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {Button, ButtonGroup, Glyph, colors} from 'flipper';
|
||||
import React from 'react';
|
||||
|
||||
export default function ButtonNavigation(props: {
|
||||
/** Back button is enabled */
|
||||
canGoBack: boolean;
|
||||
/** Forwards button is enabled */
|
||||
canGoForward: boolean;
|
||||
/** Callback when back button is clicked */
|
||||
onBack: () => void;
|
||||
/** Callback when forwards button is clicked */
|
||||
onForward: () => void;
|
||||
}) {
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button disabled={!props.canGoBack} onClick={props.onBack}>
|
||||
<Glyph
|
||||
name="chevron-left"
|
||||
size={16}
|
||||
color={
|
||||
props.canGoBack
|
||||
? colors.macOSTitleBarIconActive
|
||||
: colors.macOSTitleBarIconBlur
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
<Button disabled={!props.canGoForward} onClick={props.onForward}>
|
||||
<Glyph
|
||||
name="chevron-right"
|
||||
size={16}
|
||||
color={
|
||||
props.canGoForward
|
||||
? colors.macOSTitleBarIconActive
|
||||
: colors.macOSTitleBarIconBlur
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
98
desktop/plugins/public/databases/ClientProtocol.tsx
Normal file
98
desktop/plugins/public/databases/ClientProtocol.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {PluginClient, Value} from 'flipper';
|
||||
|
||||
type ClientCall<Params, Response> = (arg: Params) => Promise<Response>;
|
||||
|
||||
type DatabaseListRequest = {};
|
||||
|
||||
type DatabaseListResponse = Array<{
|
||||
id: number;
|
||||
name: string;
|
||||
tables: Array<string>;
|
||||
}>;
|
||||
|
||||
type QueryTableRequest = {
|
||||
databaseId: number;
|
||||
table: string;
|
||||
order?: string;
|
||||
reverse: boolean;
|
||||
start: number;
|
||||
count: number;
|
||||
};
|
||||
|
||||
type QueryTableResponse = {
|
||||
columns: Array<string>;
|
||||
values: Array<Array<Value>>;
|
||||
start: number;
|
||||
count: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
type GetTableStructureRequest = {
|
||||
databaseId: number;
|
||||
table: string;
|
||||
};
|
||||
|
||||
type GetTableStructureResponse = {
|
||||
structureColumns: Array<string>;
|
||||
structureValues: Array<Array<Value>>;
|
||||
indexesColumns: Array<string>;
|
||||
indexesValues: Array<Array<Value>>;
|
||||
definition: string;
|
||||
};
|
||||
|
||||
type ExecuteSqlRequest = {
|
||||
databaseId: number;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type ExecuteSqlResponse = {
|
||||
type: string;
|
||||
columns: Array<string>;
|
||||
values: Array<Array<Value>>;
|
||||
insertedId: number;
|
||||
affectedCount: number;
|
||||
};
|
||||
|
||||
type GetTableInfoRequest = {
|
||||
databaseId: number;
|
||||
table: string;
|
||||
};
|
||||
|
||||
type GetTableInfoResponse = {
|
||||
definition: string;
|
||||
};
|
||||
|
||||
export class DatabaseClient {
|
||||
client: PluginClient;
|
||||
|
||||
constructor(pluginClient: PluginClient) {
|
||||
this.client = pluginClient;
|
||||
}
|
||||
|
||||
getDatabases: ClientCall<DatabaseListRequest, DatabaseListResponse> = () =>
|
||||
this.client.call('databaseList', {});
|
||||
|
||||
getTableData: ClientCall<QueryTableRequest, QueryTableResponse> = (params) =>
|
||||
this.client.call('getTableData', params);
|
||||
|
||||
getTableStructure: ClientCall<
|
||||
GetTableStructureRequest,
|
||||
GetTableStructureResponse
|
||||
> = (params) => this.client.call('getTableStructure', params);
|
||||
|
||||
getExecution: ClientCall<ExecuteSqlRequest, ExecuteSqlResponse> = (params) =>
|
||||
this.client.call('execute', params);
|
||||
|
||||
getTableInfo: ClientCall<GetTableInfoRequest, GetTableInfoResponse> = (
|
||||
params,
|
||||
) => this.client.call('getTableInfo', params);
|
||||
}
|
||||
222
desktop/plugins/public/databases/DatabaseDetailSidebar.tsx
Normal file
222
desktop/plugins/public/databases/DatabaseDetailSidebar.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React, {useMemo, useState, useEffect, useReducer} from 'react';
|
||||
import {
|
||||
Input,
|
||||
DetailSidebar,
|
||||
Panel,
|
||||
ManagedDataInspector,
|
||||
Value,
|
||||
valueToNullableString,
|
||||
renderValue,
|
||||
Button,
|
||||
styled,
|
||||
produce,
|
||||
colors,
|
||||
} from 'flipper';
|
||||
|
||||
type TableRow = {
|
||||
col: string;
|
||||
type: Value['type'];
|
||||
value: React.ReactElement;
|
||||
};
|
||||
|
||||
type DatabaseDetailSidebarProps = {
|
||||
columnLabels: Array<string>;
|
||||
columnValues: Array<Value>;
|
||||
onSave?: ((changes: {[key: string]: string | null}) => void) | undefined;
|
||||
};
|
||||
|
||||
const EditTriggerSection = styled.div({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
width: '100%',
|
||||
paddingTop: '3px',
|
||||
paddingBottom: '3px',
|
||||
paddingRight: '10px',
|
||||
});
|
||||
|
||||
const TableDetailRow = styled.div({
|
||||
borderBottom: `1px solid ${colors.blackAlpha10}`,
|
||||
padding: 8,
|
||||
});
|
||||
|
||||
const TableDetailRowTitle = styled.div({
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 8,
|
||||
});
|
||||
|
||||
const TableDetailRowType = styled.span({
|
||||
color: colors.light20,
|
||||
marginLeft: 8,
|
||||
fontWeight: 'normal',
|
||||
});
|
||||
|
||||
const TableDetailRowValue = styled.div({});
|
||||
|
||||
function sidebarRows(labels: Array<string>, values: Array<Value>): TableRow[] {
|
||||
return labels.map((label, idx) => buildSidebarRow(label, values[idx]));
|
||||
}
|
||||
|
||||
function buildSidebarRow(key: string, val: Value): TableRow {
|
||||
let output = renderValue(val, true);
|
||||
if (
|
||||
(val.type === 'string' || val.type === 'blob') &&
|
||||
(val.value[0] === '[' || val.value[0] === '{')
|
||||
) {
|
||||
try {
|
||||
// eslint-disable-next-line
|
||||
var parsed = JSON.parse(val.value);
|
||||
} catch (_error) {}
|
||||
if (parsed) {
|
||||
output = (
|
||||
<ManagedDataInspector data={parsed} expandRoot={true} collapsed />
|
||||
);
|
||||
}
|
||||
}
|
||||
return {
|
||||
col: key,
|
||||
type: val.type,
|
||||
value: output,
|
||||
};
|
||||
}
|
||||
|
||||
function sidebarEditableRows(
|
||||
labels: Array<string>,
|
||||
values: Array<Value>,
|
||||
rowDispatch: (action: RowAction) => void,
|
||||
): TableRow[] {
|
||||
return labels.map((label, idx) =>
|
||||
buildSidebarEditableRow(label, values[idx], (value: string | null) =>
|
||||
rowDispatch({type: 'set', key: label, value}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function buildSidebarEditableRow(
|
||||
key: string,
|
||||
val: Value,
|
||||
onUpdateValue: (value: string | null) => void,
|
||||
): TableRow {
|
||||
if (val.type === 'blob' || !val.type) {
|
||||
return buildSidebarRow(key, val);
|
||||
}
|
||||
return {
|
||||
col: key,
|
||||
type: val.type,
|
||||
value: (
|
||||
<EditField
|
||||
key={key}
|
||||
initialValue={valueToNullableString(val)}
|
||||
onUpdateValue={onUpdateValue}
|
||||
/>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
const EditField = React.memo(
|
||||
(props: {
|
||||
initialValue: string | null;
|
||||
onUpdateValue: (value: string | null) => void;
|
||||
}) => {
|
||||
const {initialValue, onUpdateValue} = props;
|
||||
const [value, setValue] = useState<string | null>(initialValue);
|
||||
useEffect(() => setValue(initialValue), [initialValue]);
|
||||
return (
|
||||
<Input
|
||||
value={value || ''}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
onUpdateValue(e.target.value);
|
||||
}}
|
||||
placeholder={value === null ? 'NULL' : undefined}
|
||||
data-testid={'update-query-input'}
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
type RowState = {changes: {[key: string]: string | null}; updated: boolean};
|
||||
type RowAction =
|
||||
| {type: 'set'; key: string; value: string | null}
|
||||
| {type: 'reset'};
|
||||
|
||||
const rowStateReducer = produce((draftState: RowState, action: RowAction) => {
|
||||
switch (action.type) {
|
||||
case 'set':
|
||||
draftState.changes[action.key] = action.value;
|
||||
draftState.updated = true;
|
||||
return;
|
||||
case 'reset':
|
||||
draftState.changes = {};
|
||||
draftState.updated = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
export default React.memo(function DatabaseDetailSidebar(
|
||||
props: DatabaseDetailSidebarProps,
|
||||
) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [rowState, rowDispatch] = useReducer(rowStateReducer, {
|
||||
changes: {},
|
||||
updated: false,
|
||||
});
|
||||
const {columnLabels, columnValues, onSave} = props;
|
||||
useEffect(() => rowDispatch({type: 'reset'}), [columnLabels, columnValues]);
|
||||
const rows = useMemo(
|
||||
() =>
|
||||
editing
|
||||
? sidebarEditableRows(columnLabels, columnValues, rowDispatch)
|
||||
: sidebarRows(columnLabels, columnValues),
|
||||
[columnLabels, columnValues, editing],
|
||||
);
|
||||
return (
|
||||
<DetailSidebar>
|
||||
<Panel
|
||||
heading="Row details"
|
||||
floating={false}
|
||||
collapsable={true}
|
||||
padded={false}>
|
||||
{onSave ? (
|
||||
<EditTriggerSection>
|
||||
{editing ? (
|
||||
<>
|
||||
<Button
|
||||
disabled={!rowState.updated}
|
||||
onClick={() => {
|
||||
onSave(rowState.changes);
|
||||
setEditing(false);
|
||||
}}>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={() => setEditing(false)}>Close</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button onClick={() => setEditing(true)}>Edit</Button>
|
||||
)}
|
||||
</EditTriggerSection>
|
||||
) : null}
|
||||
<div>
|
||||
{rows.map((row) => (
|
||||
<TableDetailRow key={row.col}>
|
||||
<TableDetailRowTitle>
|
||||
{row.col}
|
||||
<TableDetailRowType>({row.type})</TableDetailRowType>
|
||||
</TableDetailRowTitle>
|
||||
<TableDetailRowValue>{row.value}</TableDetailRowValue>
|
||||
</TableDetailRow>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
</DetailSidebar>
|
||||
);
|
||||
});
|
||||
91
desktop/plugins/public/databases/DatabaseStructure.tsx
Normal file
91
desktop/plugins/public/databases/DatabaseStructure.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {
|
||||
FlexRow,
|
||||
ManagedTable,
|
||||
TableBodyRow,
|
||||
TableBodyColumn,
|
||||
Value,
|
||||
renderValue,
|
||||
} from 'flipper';
|
||||
import React, {useMemo} from 'react';
|
||||
|
||||
import {Structure} from './index';
|
||||
|
||||
function transformRow(
|
||||
columns: Array<string>,
|
||||
row: Array<Value>,
|
||||
index: number,
|
||||
): TableBodyRow {
|
||||
const transformedColumns: {[key: string]: TableBodyColumn} = {};
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
transformedColumns[columns[i]] = {value: renderValue(row[i], true)};
|
||||
}
|
||||
return {key: String(index), columns: transformedColumns};
|
||||
}
|
||||
|
||||
const DatabaseStructureManagedTable = React.memo(
|
||||
(props: {columns: Array<string>; rows: Array<Array<Value>>}) => {
|
||||
const {columns, rows} = props;
|
||||
const renderRows = useMemo(
|
||||
() =>
|
||||
rows.map((row: Array<Value>, index: number) =>
|
||||
transformRow(columns, row, index),
|
||||
),
|
||||
[rows, columns],
|
||||
);
|
||||
const renderColumns = useMemo(
|
||||
() =>
|
||||
columns.reduce(
|
||||
(acc, val) =>
|
||||
Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
|
||||
{},
|
||||
),
|
||||
[columns],
|
||||
);
|
||||
const columnOrder = useMemo(
|
||||
() =>
|
||||
columns.map((name) => ({
|
||||
key: name,
|
||||
visible: true,
|
||||
})),
|
||||
[columns],
|
||||
);
|
||||
return (
|
||||
<FlexRow grow={true}>
|
||||
<ManagedTable
|
||||
floating={false}
|
||||
columnOrder={columnOrder}
|
||||
columns={renderColumns}
|
||||
zebra={true}
|
||||
rows={renderRows}
|
||||
horizontallyScrollable={true}
|
||||
/>
|
||||
</FlexRow>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default React.memo((props: {structure: Structure | null}) => {
|
||||
const {structure} = props;
|
||||
if (!structure) {
|
||||
return null;
|
||||
}
|
||||
const {columns, rows, indexesColumns, indexesValues} = structure;
|
||||
return (
|
||||
<>
|
||||
<DatabaseStructureManagedTable columns={columns} rows={rows} />
|
||||
<DatabaseStructureManagedTable
|
||||
columns={indexesColumns}
|
||||
rows={indexesValues}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
92
desktop/plugins/public/databases/UpdateQueryUtil.tsx
Normal file
92
desktop/plugins/public/databases/UpdateQueryUtil.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {Value} from 'flipper';
|
||||
|
||||
const INT_DATA_TYPE = ['INTEGER', 'LONG', 'INT', 'BIGINT'];
|
||||
const FLOAT_DATA_TYPE = ['REAL', 'DOUBLE'];
|
||||
const BLOB_DATA_TYPE = ['BLOB'];
|
||||
|
||||
export function convertStringToValue(
|
||||
types: {[key: string]: {type: string; nullable: boolean}},
|
||||
key: string,
|
||||
value: string | null,
|
||||
): Value {
|
||||
if (types.hasOwnProperty(key)) {
|
||||
const {type, nullable} = types[key];
|
||||
value = value === null ? '' : value;
|
||||
if (value.length <= 0 && nullable) {
|
||||
return {type: 'null', value: null};
|
||||
}
|
||||
|
||||
if (INT_DATA_TYPE.indexOf(type) >= 0) {
|
||||
const converted = parseInt(value, 10);
|
||||
return {type: 'integer', value: isNaN(converted) ? 0 : converted};
|
||||
} else if (FLOAT_DATA_TYPE.indexOf(type) >= 0) {
|
||||
const converted = parseFloat(value);
|
||||
return {type: 'float', value: isNaN(converted) ? 0 : converted};
|
||||
} else if (BLOB_DATA_TYPE.indexOf(type) >= 0) {
|
||||
return {type: 'blob', value};
|
||||
} else {
|
||||
return {type: 'string', value};
|
||||
}
|
||||
}
|
||||
// if no type found assume type is nullable string
|
||||
if (value === null || value.length <= 0) {
|
||||
return {type: 'null', value: null};
|
||||
} else {
|
||||
return {type: 'string', value};
|
||||
}
|
||||
}
|
||||
|
||||
export function constructQueryClause(
|
||||
values: {[key: string]: Value},
|
||||
connector: string,
|
||||
): string {
|
||||
return Object.entries(values).reduce(
|
||||
(clauses, [key, val]: [string, Value], idx) => {
|
||||
const valueString =
|
||||
val.type === 'null'
|
||||
? 'NULL'
|
||||
: val.type === 'string' || val.type === 'blob'
|
||||
? `'${val.value.replace(/'/g, "''")}'`
|
||||
: `${val.value}`;
|
||||
if (idx <= 0) {
|
||||
return `\`${key}\`=${valueString}`;
|
||||
} else {
|
||||
return `${clauses} ${connector} \`${key}\`=${valueString}`;
|
||||
}
|
||||
},
|
||||
'',
|
||||
);
|
||||
}
|
||||
|
||||
export function constructUpdateQuery(
|
||||
table: string,
|
||||
where: {[key: string]: Value},
|
||||
change: {[key: string]: Value},
|
||||
): string {
|
||||
return `UPDATE \`${table}\`
|
||||
SET ${constructQueryClause(change, ',')}
|
||||
WHERE ${constructQueryClause(where, 'AND')}`;
|
||||
}
|
||||
|
||||
export function isUpdatable(
|
||||
columnMeta: Array<string>,
|
||||
columnData: Array<Array<Value>>,
|
||||
): boolean {
|
||||
const primaryKeyIdx = columnMeta.indexOf('primary_key');
|
||||
return (
|
||||
primaryKeyIdx >= 0 &&
|
||||
columnData.reduce((acc: boolean, column) => {
|
||||
const primaryValue = column[primaryKeyIdx];
|
||||
return acc || (primaryValue.type === 'boolean' && primaryValue.value);
|
||||
}, false)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {render, fireEvent} from '@testing-library/react';
|
||||
import React from 'react';
|
||||
// TODO T71355623
|
||||
// eslint-disable-next-line flipper/no-relative-imports-across-packages
|
||||
import reducers, {Store} from '../../../../app/src/reducers';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import {Provider} from 'react-redux';
|
||||
|
||||
import {Value} from 'flipper';
|
||||
import DatabaseDetailSidebar from '../DatabaseDetailSidebar';
|
||||
|
||||
const labels: Array<string> = [
|
||||
'_id',
|
||||
'db1_col0_text',
|
||||
'db1_col1_integer',
|
||||
'db1_col2_float',
|
||||
'db1_col3_blob',
|
||||
'db1_col4_null',
|
||||
'db1_col5',
|
||||
'db1_col6',
|
||||
'db1_col7',
|
||||
'db1_col8',
|
||||
'db1_col9',
|
||||
];
|
||||
const values: Array<Value> = [
|
||||
{value: 1, type: 'integer'},
|
||||
{value: 'Long text data for testing resizing', type: 'string'},
|
||||
{value: 1000, type: 'integer'},
|
||||
{value: 1000.4650268554688, type: 'float'},
|
||||
{value: '\u0000\u0000\u0000\u0001\u0001\u0000\u0001\u0001', type: 'blob'},
|
||||
{value: null, type: 'null'},
|
||||
{value: 'db_1_column5_value', type: 'string'},
|
||||
{value: 'db_1_column6_value', type: 'string'},
|
||||
{value: 'db_1_column7_value', type: 'string'},
|
||||
{value: 'db_1_column8_value', type: 'string'},
|
||||
{value: 'db_1_column9_value', type: 'string'},
|
||||
];
|
||||
|
||||
const mockStore: Store = configureStore([])(
|
||||
reducers(undefined, {type: 'INIT'}),
|
||||
) as Store;
|
||||
|
||||
beforeEach(() => {
|
||||
mockStore.dispatch({type: 'rightSidebarAvailable', value: true});
|
||||
mockStore.dispatch({type: 'rightSidebarVisible', value: true});
|
||||
});
|
||||
|
||||
test('render and try to see if it renders properly', () => {
|
||||
const res = render(
|
||||
<Provider store={mockStore}>
|
||||
<div id="detailsSidebar">
|
||||
<DatabaseDetailSidebar columnLabels={labels} columnValues={values} />
|
||||
</div>
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
for (const label of labels) {
|
||||
expect(res.queryAllByText(label).length).toBeGreaterThan(0);
|
||||
}
|
||||
for (const value of values) {
|
||||
if (value.type === 'blob') {
|
||||
continue;
|
||||
}
|
||||
const searchValue: string =
|
||||
value.type === 'null' ? 'NULL' : value.value.toString();
|
||||
expect(res.queryAllByText(searchValue).length).toBeGreaterThan(0);
|
||||
}
|
||||
// Edit, Save, Close buttons should not be shown because no onSave is provided
|
||||
expect(res.queryAllByText('Edit').length).toBe(0);
|
||||
expect(res.queryAllByText('Save').length).toBe(0);
|
||||
expect(res.queryAllByText('Close').length).toBe(0);
|
||||
});
|
||||
|
||||
test('render edit, save, and close correctly when onSave provided', () => {
|
||||
const res = render(
|
||||
<Provider store={mockStore}>
|
||||
<div id="detailsSidebar">
|
||||
<DatabaseDetailSidebar
|
||||
columnLabels={labels}
|
||||
columnValues={values}
|
||||
onSave={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
// expect only Edit to show up
|
||||
expect(res.queryAllByText('Edit').length).toBe(1);
|
||||
expect(res.queryAllByText('Save').length).toBe(0);
|
||||
expect(res.queryAllByText('Close').length).toBe(0);
|
||||
|
||||
fireEvent.click(res.getByText('Edit'));
|
||||
// expect Save and Close to show up
|
||||
expect(res.queryAllByText('Edit').length).toBe(0);
|
||||
expect(res.queryAllByText('Save').length).toBe(1);
|
||||
expect(res.queryAllByText('Close').length).toBe(1);
|
||||
|
||||
// unclickable because none field has changed
|
||||
fireEvent.click(res.getByText('Save'));
|
||||
expect(res.queryAllByText('Edit').length).toBe(0);
|
||||
expect(res.queryAllByText('Save').length).toBe(1);
|
||||
expect(res.queryAllByText('Close').length).toBe(1);
|
||||
|
||||
// Click on close to return to the previous state
|
||||
fireEvent.click(res.getByText('Close'));
|
||||
expect(res.queryAllByText('Edit').length).toBe(1);
|
||||
expect(res.queryAllByText('Save').length).toBe(0);
|
||||
expect(res.queryAllByText('Close').length).toBe(0);
|
||||
});
|
||||
|
||||
test('editing some field after trigger Edit', async () => {
|
||||
const mockOnSave = jest.fn((_changes) => {});
|
||||
const res = render(
|
||||
<Provider store={mockStore}>
|
||||
<div id="detailsSidebar">
|
||||
<DatabaseDetailSidebar
|
||||
columnLabels={labels}
|
||||
columnValues={values}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
</div>
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
fireEvent.click(res.getByText('Edit'));
|
||||
// still find all values because it needs to show up
|
||||
for (const value of values) {
|
||||
const searchValue = value.value?.toString();
|
||||
expect(
|
||||
(value.type === 'null'
|
||||
? res.queryAllByPlaceholderText('NULL')
|
||||
: value.type === 'blob'
|
||||
? res.queryAllByText(searchValue!)
|
||||
: res.queryAllByDisplayValue(searchValue!)
|
||||
).length,
|
||||
).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
// expect the last one to contain value of 'db_1_column9_value'
|
||||
const textFields = await res.findAllByTestId('update-query-input');
|
||||
const lastTextField = textFields[textFields.length - 1];
|
||||
// add '_edited' to the back
|
||||
fireEvent.change(lastTextField, {
|
||||
target: {value: 'db_1_column9_value_edited'},
|
||||
});
|
||||
|
||||
// be able to click on Save
|
||||
fireEvent.click(res.getByText('Save'));
|
||||
expect(res.queryAllByText('Edit').length).toBe(1);
|
||||
expect(res.queryAllByText('Save').length).toBe(0);
|
||||
expect(res.queryAllByText('Close').length).toBe(0);
|
||||
|
||||
expect(mockOnSave.mock.calls.length).toBe(1);
|
||||
expect(mockOnSave.mock.calls[0][0]).toEqual({
|
||||
db1_col9: 'db_1_column9_value_edited',
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,335 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {Value} from 'flipper';
|
||||
import {
|
||||
isUpdatable,
|
||||
convertStringToValue,
|
||||
constructQueryClause,
|
||||
constructUpdateQuery,
|
||||
} from '../UpdateQueryUtil';
|
||||
|
||||
const dbColumnMeta: Array<string> = [
|
||||
'column_name',
|
||||
'data_type',
|
||||
'nullable',
|
||||
'default',
|
||||
'primary_key',
|
||||
'foreign_key',
|
||||
];
|
||||
// this is copied from table db1_first_table from db database1.db
|
||||
const db1FirstTableColumnData: Array<Array<Value>> = [
|
||||
[
|
||||
{value: '_id', type: 'string'},
|
||||
{value: 'INTEGER', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col0_text', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col1_integer', type: 'string'},
|
||||
{value: 'INTEGER', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col2_float', type: 'string'},
|
||||
{value: 'FLOAT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col3_blob', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col4_null', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{value: 'NULL', type: 'string'},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col5', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col6', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col7', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col8', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
[
|
||||
{value: 'db1_col9', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
];
|
||||
// this is copied from table android_metadata from db database1.db
|
||||
const androidMetadataColumnData: Array<Array<Value>> = [
|
||||
[
|
||||
{value: 'locale', type: 'string'},
|
||||
{value: 'TEXT', type: 'string'},
|
||||
{value: true, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
{value: false, type: 'boolean'},
|
||||
{type: 'null', value: null},
|
||||
],
|
||||
];
|
||||
|
||||
test('convertStringToValue', () => {
|
||||
const allTypes: {[key: string]: {type: string; nullable: boolean}} = {
|
||||
nullableString: {type: 'STRING', nullable: true},
|
||||
nonNullString: {type: 'STRING', nullable: false},
|
||||
nullableInteger: {type: 'INTEGER', nullable: true},
|
||||
nonNullInteger: {type: 'INTEGER', nullable: false},
|
||||
nullableBlob: {type: 'BLOB', nullable: true},
|
||||
nonNullBlob: {type: 'BLOB', nullable: false},
|
||||
nullableReal: {type: 'REAL', nullable: true},
|
||||
nonNullReal: {type: 'REAL', nullable: false},
|
||||
};
|
||||
|
||||
const testcases: Array<{
|
||||
input: {key: string; value: string};
|
||||
output: Value;
|
||||
}> = [
|
||||
{
|
||||
input: {key: 'nullableString', value: 'this is a string'},
|
||||
output: {type: 'string', value: 'this is a string'},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableString', value: ''},
|
||||
output: {type: 'null', value: null},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullString', value: 'this is a string'},
|
||||
output: {type: 'string', value: 'this is a string'},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullString', value: ''},
|
||||
output: {type: 'string', value: ''},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableInteger', value: '1337'},
|
||||
output: {type: 'integer', value: 1337},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableInteger', value: ''},
|
||||
output: {type: 'null', value: null},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullInteger', value: '1337'},
|
||||
output: {type: 'integer', value: 1337},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullInteger', value: ''},
|
||||
output: {type: 'integer', value: 0},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableBlob', value: 'this is a blob'},
|
||||
output: {type: 'blob', value: 'this is a blob'},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableBlob', value: ''},
|
||||
output: {type: 'null', value: null},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullBlob', value: 'this is a blob'},
|
||||
output: {type: 'blob', value: 'this is a blob'},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullBlob', value: ''},
|
||||
output: {type: 'blob', value: ''},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableReal', value: '13.37'},
|
||||
output: {type: 'float', value: 13.37},
|
||||
},
|
||||
{
|
||||
input: {key: 'nullableReal', value: ''},
|
||||
output: {type: 'null', value: null},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullReal', value: '13.37'},
|
||||
output: {type: 'float', value: 13.37},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonNullReal', value: ''},
|
||||
output: {type: 'float', value: 0},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonExistingType', value: 'this has no type'},
|
||||
output: {type: 'string', value: 'this has no type'},
|
||||
},
|
||||
{
|
||||
input: {key: 'nonExistingType', value: ''},
|
||||
output: {type: 'null', value: null},
|
||||
},
|
||||
];
|
||||
|
||||
for (const testcase of testcases) {
|
||||
expect(
|
||||
convertStringToValue(allTypes, testcase.input.key, testcase.input.value),
|
||||
).toEqual(testcase.output);
|
||||
}
|
||||
});
|
||||
|
||||
test('constructQueryClause with no value given', () => {
|
||||
expect(constructQueryClause({}, 'connecter')).toEqual('');
|
||||
});
|
||||
|
||||
test('constructQueryClause with exactly one string value', () => {
|
||||
expect(
|
||||
constructQueryClause(
|
||||
{key1: {type: 'string', value: 'this is a string'}},
|
||||
'connecter',
|
||||
),
|
||||
).toEqual(`\`key1\`='this is a string'`);
|
||||
});
|
||||
|
||||
test('constructQueryClause with exactly one integer value', () => {
|
||||
expect(
|
||||
constructQueryClause({key1: {type: 'integer', value: 1337}}, 'connecter'),
|
||||
).toEqual(`\`key1\`=1337`);
|
||||
});
|
||||
|
||||
test('constructQueryClause with exactly one null value', () => {
|
||||
expect(
|
||||
constructQueryClause({key1: {type: 'null', value: null}}, 'connecter'),
|
||||
).toEqual(`\`key1\`=NULL`);
|
||||
});
|
||||
|
||||
test("constructQueryClause with special character (single quote ('))", () => {
|
||||
expect(
|
||||
constructQueryClause(
|
||||
{key1: {type: 'string', value: "this is a 'single quote'"}},
|
||||
'connecter',
|
||||
),
|
||||
).toEqual(`\`key1\`='this is a ''single quote'''`);
|
||||
});
|
||||
|
||||
test('constructQueryClause with multiple value', () => {
|
||||
const values: {[key: string]: Value} = {
|
||||
key1: {type: 'string', value: 'this is a string'},
|
||||
key2: {type: 'null', value: null},
|
||||
key3: {type: 'float', value: 13.37},
|
||||
};
|
||||
|
||||
expect(constructQueryClause(values, 'connector')).toEqual(
|
||||
`\`key1\`='this is a string' connector \`key2\`=NULL connector \`key3\`=13.37`,
|
||||
);
|
||||
});
|
||||
|
||||
test('constructQueryClause with multiple value with single quotes mixed in string', () => {
|
||||
const values: {[key: string]: Value} = {
|
||||
key1: {type: 'string', value: `this is 'a' string`},
|
||||
key2: {type: 'null', value: null},
|
||||
key3: {type: 'float', value: 13.37},
|
||||
key4: {type: 'string', value: `there are single quotes 'here' and 'there'`},
|
||||
};
|
||||
|
||||
expect(constructQueryClause(values, 'connector')).toEqual(
|
||||
`\`key1\`='this is ''a'' string' connector \`key2\`=NULL connector \`key3\`=13.37 connector \`key4\`='there are single quotes ''here'' and ''there'''`,
|
||||
);
|
||||
});
|
||||
|
||||
test('constructUpdateQuery', () => {
|
||||
const setClause: {[key: string]: Value} = {
|
||||
key1: {type: 'string', value: 'this is a string'},
|
||||
key2: {type: 'null', value: null},
|
||||
key3: {type: 'float', value: 13.37},
|
||||
};
|
||||
const whereClause: {[key: string]: Value} = {
|
||||
key4: {type: 'number', value: 13371337},
|
||||
};
|
||||
expect(constructUpdateQuery('table_name', whereClause, setClause)).toEqual(
|
||||
`UPDATE \`table_name\`
|
||||
SET \`key1\`='this is a string' , \`key2\`=NULL , \`key3\`=13.37
|
||||
WHERE \`key4\`=13371337`,
|
||||
);
|
||||
});
|
||||
|
||||
test('isUpdatable with straightforward test with some are true', () => {
|
||||
const columnMeta = ['primary_key'];
|
||||
const columnData: Array<Array<Value>> = [
|
||||
[{type: 'boolean', value: true}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
];
|
||||
expect(isUpdatable(columnMeta, columnData)).toBe(true);
|
||||
});
|
||||
|
||||
test('isUpdatable with straightforward test with all are false', () => {
|
||||
const columnMeta = ['primary_key'];
|
||||
const columnData: Array<Array<Value>> = [
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
[{type: 'boolean', value: false}],
|
||||
];
|
||||
expect(isUpdatable(columnMeta, columnData)).toBe(false);
|
||||
});
|
||||
|
||||
test('isUpdate with regular use case with some are true', () => {
|
||||
const columnMeta = dbColumnMeta;
|
||||
const columnData: Array<Array<Value>> = db1FirstTableColumnData;
|
||||
expect(isUpdatable(columnMeta, columnData)).toBe(true);
|
||||
});
|
||||
|
||||
test('isUpdate with regular use case with all are false', () => {
|
||||
const columnMeta = dbColumnMeta;
|
||||
const columnData: Array<Array<Value>> = androidMetadataColumnData;
|
||||
expect(isUpdatable(columnMeta, columnData)).toBe(false);
|
||||
});
|
||||
1436
desktop/plugins/public/databases/index.tsx
Normal file
1436
desktop/plugins/public/databases/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
29
desktop/plugins/public/databases/package.json
Normal file
29
desktop/plugins/public/databases/package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
|
||||
"name": "flipper-plugin-databases",
|
||||
"id": "Databases",
|
||||
"version": "0.0.0",
|
||||
"title": "Databases",
|
||||
"icon": "internet",
|
||||
"main": "dist/bundle.js",
|
||||
"flipperBundlerEntry": "index.tsx",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"flipper-plugin"
|
||||
],
|
||||
"dependencies": {
|
||||
"dateformat": "^4.5.1",
|
||||
"sql-formatter": "^2.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@types/dateformat": "^3.0.1",
|
||||
"@types/sql-formatter": "^2.3.0",
|
||||
"react-redux": "^7.2.3",
|
||||
"redux-mock-store": "^1.0.1"
|
||||
},
|
||||
"bugs": {
|
||||
"email": "oncall+flipper@xmail.facebook.com",
|
||||
"url": "https://fb.workplace.com/groups/flippersupport/"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user