in desktop/plugins/public/network/index.tsx [107:461]
export function plugin(client: PluginClient<Events, Methods>) {
const networkRouteManager = createState<NetworkRouteManager>(
nullNetworkRouteManager,
);
const routes = createState<{[id: string]: Route}>({});
const nextRouteId = createState<number>(0);
const isMockResponseSupported = createState<boolean>(false);
const showMockResponseDialog = createState<boolean>(false);
const detailBodyFormat = createState<string>(
localStorage.getItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY) || 'parsed',
);
const requests = createDataSource<Request, 'id'>([], {
key: 'id',
});
const selectedId = createState<string | undefined>(undefined);
const tableManagerRef = createRef<undefined | DataTableManager<Request>>();
const partialResponses = createState<PartialResponses>({});
const customColumns = createState<CustomColumnConfig[]>([], {
persist: 'customColumns',
persistToLocalStorage: true,
});
const columns = createState<DataTableColumn<Request>[]>(baseColumns); // not persistable
client.onDeepLink((payload: unknown) => {
const searchTermDelim = 'searchTerm=';
if (typeof payload !== 'string') {
return;
} else if (payload.startsWith(searchTermDelim)) {
tableManagerRef.current?.clearSelection();
tableManagerRef.current?.setSearchValue(
payload.slice(searchTermDelim.length),
);
} else {
tableManagerRef.current?.setSearchValue('');
tableManagerRef.current?.selectItemById(payload);
}
});
client.addMenuEntry({
action: 'clear',
handler: clearLogs,
});
client.onConnect(() => {
init();
});
client.onMessage('newRequest', (data) => {
// Some network stacks may send duplicate data, so we filter them out.
if (requests.has(data.id)) {
console.warn(`Ignoring duplicate request with id ${data.id}:`, data);
} else {
requests.append(createRequestFromRequestInfo(data, customColumns.get()));
}
});
function storeResponse(response: ResponseInfo) {
const request = requests.getById(response.id);
if (!request) {
return; // request table might have been cleared
}
requests.upsert(
updateRequestWithResponseInfo(request, response, customColumns.get()),
);
}
client.onMessage('newResponse', (data) => {
storeResponse(data);
});
client.onMessage('addProtobufDefinitions', (data) => {
const repository = ProtobufDefinitionsRepository.getInstance();
for (const [baseUrl, definitions] of Object.entries(data)) {
repository.addDefinitions(baseUrl, definitions);
}
});
client.onMessage('partialResponse', (data) => {
/* Some clients (such as low end Android devices) struggle to serialise large payloads in one go, so partial responses allow them
to split payloads into chunks and serialise each individually.
Such responses will be distinguished between normal responses by both:
* Being sent to the partialResponse method.
* Having a totalChunks value > 1.
The first chunk will always be included in the initial response. This response must have index 0.
The remaining chunks will be sent in ResponseFollowupChunks, which each contain another piece of the payload, along with their index from 1 onwards.
The payload of each chunk is individually encoded in the same way that full responses are.
The order that initialResponse, and followup chunks are received is not guaranteed to be in index order.
*/
const message = data as ResponseInfo | ResponseFollowupChunk;
partialResponses.update((draft) => {
if (!draft[message.id]) {
draft[message.id] = {
followupChunks: {},
};
}
const entry = draft[message.id];
if (message.index !== undefined && message.index > 0) {
// It's a follow up chunk
const chunk = message as ResponseFollowupChunk;
entry.followupChunks[chunk.index] = chunk.data;
} else {
// It's an initial chunk
entry.initialResponse = message as ResponseInfo;
}
});
const response = assembleChunksIfResponseIsComplete(
partialResponses.get()[message.id],
);
if (response) {
storeResponse(response);
partialResponses.update((draft) => {
delete draft[response.id];
});
}
});
async function supportsMocks(device: Device): Promise<boolean> {
if (device.isArchived) {
return isMockResponseSupported.get();
} else {
return client.supportsMethod('mockResponses');
}
}
function init() {
supportsMocks(client.device)
.then((result) => {
const newRoutes = JSON.parse(
localStorage.getItem(
LOCALSTORAGE_MOCK_ROUTE_LIST_KEY + client.appId,
) || '{}',
);
batch(() => {
routes.set(newRoutes);
isMockResponseSupported.set(result);
showMockResponseDialog.set(false);
nextRouteId.set(Object.keys(routes.get()).length);
});
informClientMockChange(routes.get());
})
.catch((e) => console.error('[network] Failed to init mocks:', e));
// declare new variable to be called inside the interface
networkRouteManager.set(
createNetworkManager(
nextRouteId,
routes,
informClientMockChange,
tableManagerRef,
),
);
}
function clearLogs() {
requests.clear();
}
async function informClientMockChange(routes: {[id: string]: Route}) {
const filteredRoutes: {[id: string]: Route} = computeMockRoutes(routes);
if (isMockResponseSupported.get()) {
const routesValuesArray = Object.values(filteredRoutes);
localStorage.setItem(
LOCALSTORAGE_MOCK_ROUTE_LIST_KEY + client.appId,
JSON.stringify(routesValuesArray),
);
if (!client.device.isArchived) {
try {
await client.send('mockResponses', {
routes: routesValuesArray
.filter((e) => e.enabled)
.map((route: Route) => ({
requestUrl: route.requestUrl,
method: route.requestMethod,
data: route.responseData,
headers: [...Object.values(route.responseHeaders)],
status: route.responseStatus,
enabled: route.enabled,
})),
});
} catch (e) {
console.error('Failed to mock responses.', e);
}
}
}
}
function addCustomColumn(column: CustomColumnConfig) {
// prevent doubles
if (
customColumns
.get()
.find((c) => c.header === column.header && c.type === column.type)
) {
return;
}
// add custom column config
customColumns.update((d) => {
d.push(column);
});
// generate DataTable column config
addDataTableColumnConfig(column);
// update existing entries
for (let i = 0; i < requests.size; i++) {
const request = requests.get(i);
requests.update(i, {
...request,
[`${column.type}_header_${column.header}`]: getHeaderValue(
column.type === 'request'
? request.requestHeaders
: request.responseHeaders,
column.header,
),
});
}
}
function addDataTableColumnConfig(column: CustomColumnConfig) {
columns.update((d) => {
d.push({
key: `${column.type}_header_${column.header}` as any,
width: 200,
title: `${column.header} (${column.type})`,
});
});
}
client.onReady(() => {
// after restoring a snapshot, let's make sure we update the columns
customColumns.get().forEach(addDataTableColumnConfig);
});
client.onExport<StateExport>(async (idler, onStatusMessage) => {
const serializedRequests: SerializedRequest[] = [];
for (let i = 0; i < requests.size; i++) {
const request = requests.get(i);
serializedRequests.push({
...request,
requestTime: request.requestTime.getTime(),
responseTime: request.responseTime?.getTime(),
requestData:
request.requestData instanceof Uint8Array
? [Base64.fromUint8Array(request.requestData)]
: request.requestData,
responseData:
request.responseData instanceof Uint8Array
? [Base64.fromUint8Array(request.responseData)]
: request.responseData,
});
if (idler.isCancelled()) {
return;
}
if (idler.shouldIdle()) {
onStatusMessage(`Serializing request ${i + 1}/${requests.size}`);
await idler.idle();
}
}
return {
isMockResponseSupported: isMockResponseSupported.get(),
selectedId: selectedId.get(),
requests2: serializedRequests,
customColumns: customColumns.get(),
};
});
client.onImport<StateExport>((data) => {
selectedId.set(data.selectedId);
isMockResponseSupported.set(data.isMockResponseSupported);
customColumns.set(data.customColumns);
data.requests2.forEach((request) => {
requests.append({
...request,
requestTime: new Date(request.requestTime),
responseTime:
request.responseTime != null
? new Date(request.responseTime)
: undefined,
requestData: Array.isArray(request.requestData)
? Base64.toUint8Array(request.requestData[0])
: request.requestData,
responseData: Array.isArray(request.responseData)
? Base64.toUint8Array(request.responseData[0])
: request.responseData,
});
});
});
return {
columns,
routes,
nextRouteId,
isMockResponseSupported,
showMockResponseDialog,
detailBodyFormat,
requests,
partialResponses,
networkRouteManager,
clearLogs,
onMockButtonPressed() {
showMockResponseDialog.set(true);
},
onCloseButtonPressed() {
showMockResponseDialog.set(false);
},
onSelectFormat(bodyFormat: string) {
detailBodyFormat.set(bodyFormat);
localStorage.setItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY, bodyFormat);
},
selectedId,
onSelect(request: Request) {
selectedId.set(request?.id);
},
init,
tableManagerRef,
onContextMenu(request: Request | undefined) {
return (
<>
<Menu.Item
key="curl"
onClick={() => {
if (!request) {
return;
}
const command = convertRequestToCurlCommand(request);
client.writeTextToClipboard(command);
}}>
Copy cURL command
</Menu.Item>
<Menu.Item
key="custom header"
onClick={() => {
showCustomColumnDialog(addCustomColumn);
}}>
Add header column{'\u2026'}
</Menu.Item>
</>
);
},
onCopyText(text: string) {
client.writeTextToClipboard(text);
message.success('Text copied to clipboard');
},
addCustomColumn,
};
}