Skip to content

Commit 036d256

Browse files
jloleysensjloleysens
committed
[Console] Refactoring more legacy code and implementing minor fixes (#51312)
* First part of context refactor * Finised "hook"ing in to new context for old editor output. Also fixed passing through of content type * Remove comment * - update console history behaviour - don't scroll into view on click. Doesn't really make sense. - make triple quote setting update in place
1 parent be2cdad commit 036d256

35 files changed

Lines changed: 737 additions & 391 deletions

‎.eslintrc.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,6 @@ module.exports = {
6464
'jsx-a11y/no-onchange': 'off',
6565
},
6666
},
67-
{
68-
files: ['src/legacy/core_plugins/console/**/*.{js,ts,tsx}'],
69-
rules: {
70-
'react-hooks/exhaustive-deps': 'off',
71-
},
72-
},
7367
{
7468
files: ['src/legacy/core_plugins/data/**/*.{js,ts,tsx}'],
7569
rules: {

‎src/legacy/core_plugins/console/np_ready/public/application/components/editor_example.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function EditorExample(props: EditorExampleProps) {
4141
return () => {
4242
editor.destroy();
4343
};
44-
}, []);
44+
}, [elemId]);
4545

4646
return <div id={elemId} className="conHelp__example" />;
4747
}

‎src/legacy/core_plugins/console/np_ready/public/application/components/split_panel/containers/panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function Panel({ children, initialWidth = '100%', style = {} }: Props) {
4141
return divRef.current!.getBoundingClientRect().width;
4242
},
4343
});
44-
}, []);
44+
}, [initialWidth, registry]);
4545

4646
return (
4747
<div ref={divRef} style={{ ...style, width, display: 'flex' }}>

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx renamed to src/legacy/core_plugins/console/np_ready/public/application/containers/console_history/console_history.tsx

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* under the License.
1818
*/
1919

20-
import React, { useCallback, useEffect, useRef, useState } from 'react';
20+
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
2121
import { i18n } from '@kbn/i18n';
2222
import { memoize } from 'lodash';
2323
import moment from 'moment';
@@ -32,9 +32,10 @@ import {
3232
EuiButton,
3333
} from '@elastic/eui';
3434

35-
import { useAppContext } from '../../../../context';
35+
import { useServicesContext } from '../../contexts';
3636
import { HistoryViewer } from './history_viewer';
37-
import { useEditorActionContext, useEditorReadContext } from '../../context';
37+
import { useEditorReadContext } from '../../contexts/editor_context';
38+
import { useRestoreRequestFromHistory } from '../../hooks';
3839

3940
interface Props {
4041
close: () => void;
@@ -45,32 +46,24 @@ const CHILD_ELEMENT_PREFIX = 'historyReq';
4546
export function ConsoleHistory({ close }: Props) {
4647
const {
4748
services: { history },
48-
} = useAppContext();
49+
} = useServicesContext();
4950

50-
const dispatch = useEditorActionContext();
5151
const { settings: readOnlySettings } = useEditorReadContext();
5252

5353
const [requests, setPastRequests] = useState<any[]>(history.getHistory());
5454

5555
const clearHistory = useCallback(() => {
5656
history.clearHistory();
5757
setPastRequests(history.getHistory());
58-
}, []);
58+
}, [history]);
5959

6060
const listRef = useRef<HTMLUListElement | null>(null);
6161

6262
const [viewingReq, setViewingReq] = useState<any>(null);
6363
const [selectedIndex, setSelectedIndex] = useState<number>(0);
6464
const selectedReq = useRef<any>(null);
6565

66-
const scrollIntoView = (idx: number) => {
67-
const activeDescendant = listRef.current!.querySelector(`#${CHILD_ELEMENT_PREFIX}${idx}`);
68-
if (activeDescendant) {
69-
activeDescendant.scrollIntoView();
70-
}
71-
};
72-
73-
const [describeReq] = useState(() => {
66+
const describeReq = useMemo(() => {
7467
const _describeReq = (req: any) => {
7568
const endpoint = req.endpoint;
7669
const date = moment(req.time);
@@ -86,34 +79,39 @@ export function ConsoleHistory({ close }: Props) {
8679
(_describeReq as any).cache = new WeakMap();
8780

8881
return memoize(_describeReq);
89-
});
82+
}, []);
83+
84+
const scrollIntoView = useCallback((idx: number) => {
85+
const activeDescendant = listRef.current!.querySelector(`#${CHILD_ELEMENT_PREFIX}${idx}`);
86+
if (activeDescendant) {
87+
activeDescendant.scrollIntoView();
88+
}
89+
}, []);
9090

91-
const initialize = () => {
91+
const initialize = useCallback(() => {
9292
const nextSelectedIndex = 0;
9393
(describeReq as any).cache = new WeakMap();
9494
setViewingReq(requests[nextSelectedIndex]);
9595
selectedReq.current = requests[nextSelectedIndex];
9696
setSelectedIndex(nextSelectedIndex);
9797
scrollIntoView(nextSelectedIndex);
98-
};
98+
}, [describeReq, requests, scrollIntoView]);
9999

100100
const clear = () => {
101101
clearHistory();
102102
initialize();
103103
};
104104

105-
const restore = (req: any = selectedReq.current) => {
106-
dispatch({ type: 'restoreRequest', value: req });
107-
};
105+
const restoreRequestFromHistory = useRestoreRequestFromHistory();
108106

109107
useEffect(() => {
110108
initialize();
111-
}, [requests]);
109+
}, [initialize]);
112110

113111
useEffect(() => {
114112
const done = history.change(setPastRequests);
115113
return () => done();
116-
}, []);
114+
}, [history]);
117115

118116
/* eslint-disable */
119117
return (
@@ -128,7 +126,7 @@ export function ConsoleHistory({ close }: Props) {
128126
ref={listRef}
129127
onKeyDown={(ev: React.KeyboardEvent) => {
130128
if (ev.keyCode === keyCodes.ENTER) {
131-
restore();
129+
restoreRequestFromHistory(selectedReq.current);
132130
return;
133131
}
134132

@@ -173,12 +171,11 @@ export function ConsoleHistory({ close }: Props) {
173171
setViewingReq(req);
174172
selectedReq.current = req;
175173
setSelectedIndex(idx);
176-
scrollIntoView(idx);
177174
}}
178175
role="option"
179176
onMouseEnter={() => setViewingReq(req)}
180177
onMouseLeave={() => setViewingReq(selectedReq.current)}
181-
onDoubleClick={() => restore(req)}
178+
onDoubleClick={restoreRequestFromHistory}
182179
aria-label={i18n.translate('console.historyPage.itemOfRequestListAriaLabel', {
183180
defaultMessage: 'Request: {historyItem}',
184181
values: { historyItem: reqDescription },
@@ -196,10 +193,7 @@ export function ConsoleHistory({ close }: Props) {
196193

197194
<div className="conHistory__body__spacer" />
198195

199-
<HistoryViewer
200-
settings={readOnlySettings}
201-
req={viewingReq}
202-
/>
196+
<HistoryViewer settings={readOnlySettings} req={viewingReq} />
203197
</div>
204198

205199
<EuiSpacer size="s" />
@@ -224,7 +218,11 @@ export function ConsoleHistory({ close }: Props) {
224218
</EuiFlexItem>
225219

226220
<EuiFlexItem grow={false}>
227-
<EuiButton color="primary" disabled={!selectedReq} onClick={() => restore()}>
221+
<EuiButton
222+
color="primary"
223+
disabled={!selectedReq}
224+
onClick={() => restoreRequestFromHistory(selectedReq.current)}
225+
>
228226
{i18n.translate('console.historyPage.applyHistoryButtonLabel', {
229227
defaultMessage: 'Apply',
230228
})}

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx renamed to src/legacy/core_plugins/console/np_ready/public/application/containers/console_history/history_viewer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ import React, { useEffect, useRef } from 'react';
2121
import { i18n } from '@kbn/i18n';
2222
import $ from 'jquery';
2323

24-
import { DevToolsSettings } from '../../../../../services';
25-
import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
24+
import { DevToolsSettings } from '../../../services';
25+
import { subscribeResizeChecker } from '../editor/legacy/subscribe_console_resize_checker';
2626

2727
// @ts-ignore
28-
import SenseEditor from '../../../../../../../public/quarantined/src/sense_editor/editor';
29-
import { applyCurrentSettings } from '../console_editor/apply_editor_settings';
28+
import SenseEditor from '../../../../../public/quarantined/src/sense_editor/editor';
29+
import { applyCurrentSettings } from '../editor/legacy/console_editor/apply_editor_settings';
3030

3131
interface Props {
3232
settings: DevToolsSettings;

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/index.ts renamed to src/legacy/core_plugins/console/np_ready/public/application/containers/console_history/index.ts

File renamed without changes.

‎src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/reducer.ts‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎src/legacy/core_plugins/console/np_ready/public/application/containers/editor/editor.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React, { useCallback } from 'react';
21+
import { debounce } from 'lodash';
22+
23+
import { Panel, PanelsContainer } from '../../components/split_panel';
24+
import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
25+
import { StorageKeys } from '../../../services';
26+
import { useServicesContext } from '../../contexts';
27+
28+
const INITIAL_PANEL_WIDTH = 50;
29+
const PANEL_MIN_WIDTH = '100px';
30+
31+
export const Editor = () => {
32+
const {
33+
services: { storage },
34+
} = useServicesContext();
35+
36+
const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
37+
INITIAL_PANEL_WIDTH,
38+
INITIAL_PANEL_WIDTH,
39+
]);
40+
41+
const onPanelWidthChange = useCallback(
42+
debounce((widths: number[]) => {
43+
storage.set(StorageKeys.WIDTH, widths);
44+
}, 300),
45+
[]
46+
);
47+
48+
return (
49+
<PanelsContainer onPanelWidthChange={onPanelWidthChange}>
50+
<Panel
51+
style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
52+
initialWidth={firstPanelWidth + '%'}
53+
>
54+
<EditorUI />
55+
</Panel>
56+
<Panel
57+
style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
58+
initialWidth={secondPanelWidth + '%'}
59+
>
60+
<EditorOutput />
61+
</Panel>
62+
</PanelsContainer>
63+
);
64+
};

‎src/legacy/core_plugins/console/np_ready/public/application/containers/editor/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
* under the License.
1818
*/
1919

20-
export { Editor, EditorOutput, ConsoleHistory, autoIndent, getDocumentation } from './legacy';
21-
export { useEditorActionContext, useEditorReadContext, EditorContextProvider } from './context';
20+
export { autoIndent, getDocumentation } from './legacy';
21+
export { Editor } from './editor';

0 commit comments

Comments
 (0)