From d1ad38b9c84645a82b24aeb8f240ff14f455f059 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Mon, 14 Mar 2022 17:35:21 +0100 Subject: [PATCH 1/5] multiline init --- package-lock.json | 186 ++++++++++++- package.json | 5 +- src/components/LabelBrowser/QueryBar.js | 347 +++++++++++++----------- src/components/StatusBar/StatusBar.js | 3 +- src/plugins/queryeditor/index.js | 43 +++ src/scss/modules/query-bar.scss | 11 +- 6 files changed, 435 insertions(+), 160 deletions(-) create mode 100644 src/plugins/queryeditor/index.js diff --git a/package-lock.json b/package-lock.json index 06eb2e82..45d49de8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "lodash": "^4.17.21", "moment": "^2.29.1", "nanoid": "^3.3.1", + "prismjs": "^1.27.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flot": "^1.3.0", @@ -32,7 +33,9 @@ "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", - "redux-thunk": "^2.4.1" + "redux-thunk": "^2.4.1", + "slate": "^0.73.1", + "slate-react": "^0.74.2" }, "devDependencies": { "@babel/core": "^7.16.12", @@ -4056,6 +4059,11 @@ "@types/node": "*" } }, + "node_modules/@types/is-hotkey": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz", + "integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ==" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -4096,6 +4104,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "node_modules/@types/lodash": { + "version": "4.14.179", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.179.tgz", + "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -6408,6 +6421,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, + "node_modules/compute-scroll-into-view": { + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz", + "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -7243,6 +7261,18 @@ "node": ">=8" } }, + "node_modules/direction": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz", + "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==", + "bin": { + "direction": "cli.js" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -9972,6 +10002,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-hotkey": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz", + "integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==" + }, "node_modules/is-in-browser": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", @@ -14786,6 +14821,14 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/prismjs": { + "version": "1.27.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", + "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", + "engines": { + "node": ">=6" + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -16054,6 +16097,14 @@ "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" }, + "node_modules/scroll-into-view-if-needed": { + "version": "2.2.29", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz", + "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==", + "dependencies": { + "compute-scroll-into-view": "^1.0.17" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -16273,6 +16324,52 @@ "node": ">=8" } }, + "node_modules/slate": { + "version": "0.73.1", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.73.1.tgz", + "integrity": "sha512-MpBbw14g7D2expa9F2/hRRVucwl9jYDJp4qWC2NPGrDCJ6O0X1tWfxja5oVedWQDjfBj/QQFPx00EKxNQTn12A==", + "dependencies": { + "immer": "^9.0.6", + "is-plain-object": "^5.0.0", + "tiny-warning": "^1.0.3" + } + }, + "node_modules/slate-react": { + "version": "0.74.2", + "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.74.2.tgz", + "integrity": "sha512-NX9lFpHoEcHZ44KVJk1QvXoof5nN+QbDZ/zaAVklBn/XXbjogm1P6d/QqUStB2faKecZrV4BDRMq0Kw3WIpvaA==", + "dependencies": { + "@types/is-hotkey": "^0.1.1", + "@types/lodash": "^4.14.149", + "direction": "^1.0.3", + "is-hotkey": "^0.1.6", + "is-plain-object": "^5.0.0", + "lodash": "^4.17.4", + "scroll-into-view-if-needed": "^2.2.20", + "tiny-invariant": "1.0.6" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0", + "slate": ">=0.65.3" + } + }, + "node_modules/slate-react/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/slate/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -17114,6 +17211,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "node_modules/tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -21145,6 +21247,11 @@ "@types/node": "*" } }, + "@types/is-hotkey": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz", + "integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -21185,6 +21292,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/lodash": { + "version": "4.14.179", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.179.tgz", + "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -23009,6 +23121,11 @@ } } }, + "compute-scroll-into-view": { + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz", + "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -23599,6 +23716,11 @@ "path-type": "^4.0.0" } }, + "direction": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz", + "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==" + }, "dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -25590,6 +25712,11 @@ "is-extglob": "^2.1.1" } }, + "is-hotkey": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz", + "integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==" + }, "is-in-browser": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", @@ -28986,6 +29113,11 @@ } } }, + "prismjs": { + "version": "1.27.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", + "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==" + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -29907,6 +30039,14 @@ } } }, + "scroll-into-view-if-needed": { + "version": "2.2.29", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz", + "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==", + "requires": { + "compute-scroll-into-view": "^1.0.17" + } + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -30099,6 +30239,45 @@ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, + "slate": { + "version": "0.73.1", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.73.1.tgz", + "integrity": "sha512-MpBbw14g7D2expa9F2/hRRVucwl9jYDJp4qWC2NPGrDCJ6O0X1tWfxja5oVedWQDjfBj/QQFPx00EKxNQTn12A==", + "requires": { + "immer": "^9.0.6", + "is-plain-object": "^5.0.0", + "tiny-warning": "^1.0.3" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==" + } + } + }, + "slate-react": { + "version": "0.74.2", + "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.74.2.tgz", + "integrity": "sha512-NX9lFpHoEcHZ44KVJk1QvXoof5nN+QbDZ/zaAVklBn/XXbjogm1P6d/QqUStB2faKecZrV4BDRMq0Kw3WIpvaA==", + "requires": { + "@types/is-hotkey": "^0.1.1", + "@types/lodash": "^4.14.149", + "direction": "^1.0.3", + "is-hotkey": "^0.1.6", + "is-plain-object": "^5.0.0", + "lodash": "^4.17.4", + "scroll-into-view-if-needed": "^2.2.20", + "tiny-invariant": "1.0.6" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==" + } + } + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -30712,6 +30891,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", diff --git a/package.json b/package.json index e7279234..763d0e5a 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "lodash": "^4.17.21", "moment": "^2.29.1", "nanoid": "^3.3.1", + "prismjs": "^1.27.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flot": "^1.3.0", @@ -33,7 +34,9 @@ "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", - "redux-thunk": "^2.4.1" + "redux-thunk": "^2.4.1", + "slate": "^0.73.1", + "slate-react": "^0.74.2" }, "scripts": { "webpack": "webpack", diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index 20dac470..793d1cb3 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -13,166 +13,203 @@ import { Tooltip } from "@mui/material"; import { decodeQuery } from "../UpdateStateFromQueryParams"; import localUrl from "../../services/localUrl"; import setLinksHistory from "../../actions/setLinksHistory"; - +import QueryEditor from "../../plugins/queryeditor"; const HistoryButton = styled.button` - background: none; - color: #ddd; - font-size: 14px; - border: none; - cursor: pointer; + background: none; + color: #ddd; + font-size: 14px; + border: none; + cursor: pointer; `; export const QueryBar = () => { - //const [query, setQuery] = useState(props.query); - - const dispatch = useDispatch(); - const historyService = localService().historyStore(); - const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen); - const debug = useSelector((store) => store.debug); - const query = useSelector((store) => store.query); - const apiUrl = useSelector((store) => store.apiUrl) - const isSubmit = useSelector((store) => store.isSubmit); - const historyOpen = useSelector((store) => store.historyOpen) - const [queryInput, setQueryInput] = useState(query); - const [queryValid, setQueryValid] = useState(false); + //const [query, setQuery] = useState(props.query); + + const dispatch = useDispatch(); + const historyService = localService().historyStore(); + const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen); + const debug = useSelector((store) => store.debug); + const query = useSelector((store) => store.query); + const apiUrl = useSelector((store) => store.apiUrl); + const isSubmit = useSelector((store) => store.isSubmit); + const historyOpen = useSelector((store) => store.historyOpen); + const [queryInput, setQueryInput] = useState(query); + const [queryValid, setQueryValid] = useState(false); + const [queryValue, setQueryValue] = useState([ + { + type: "code_line", + children: [ + { + text: query || "Enter a cLoki Query", + }, + ], + }, + ]); + const SHOW_LOGS = "Show Logs"; + const LOG_BROWSER = "Log Browser"; + const queryHistory = useSelector((store) => store.queryHistory); + const [historyItems, setHistoryItems] = useState(queryHistory.length > 0); + const saveUrl = localUrl(); + useEffect(() => { + setHistoryItems(queryHistory.length > 0); + }, [queryHistory]); + + const onQueryValid = (query) => { + return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation + }; + + useEffect(() => { + // force a query to be run after load of component + if (debug) console.log("🚧 LOGIC/QueryBar/", typeof query, query.length); + + if (onQueryValid(query && isSubmit === "true")) { + if (debug) + console.log( + "🚧 LOGIC/QueryBar/ dispatch ", + query !== "{}", + query.length > 0, + query !== "{}" || query.length > 1 + ); + // here + dispatch(setLoading(true)); + dispatch(loadLogs()); + + setTimeout(() => { + dispatch(setIsSubmit(false)); + }, 200); + } else if (!onQueryValid(query) && isSubmit === "true") { + dispatch(setIsSubmit(false)); + } + }, []); + + useEffect(() => { + setQueryInput(query); + setQueryValue( + [ + { + type: "code_line", + children: [ + { + text: query, + }, + ], + }, + ] + ) + setQueryValid(onQueryValid(query)); + }, [query, queryInput]); + + const onValueDisplay = (e) => { + e.preventDefault(); + const isOpen = labelsBrowserOpen ? false : true; + dispatch(setLabelsBrowserOpen(isOpen)); + }; + + const handleChange = (e) => { + const qr = e.target.value; + setQueryInput(qr); + dispatch(setQuery(qr)); + }; + const handleQueryChange = (e) => { + console.log(e); + // const qr = e.target.value; + // console.log(qr) - const SHOW_LOGS = "Show Logs"; - const LOG_BROWSER = "Log Browser"; - const queryHistory = useSelector((store) => store.queryHistory) - const [historyItems, setHistoryItems] = useState(queryHistory.length>0) - const saveUrl = localUrl() - useEffect(()=>{ - setHistoryItems(queryHistory.length>0) - },[queryHistory]) - - const onQueryValid = (query) => { - return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation - }; - - useEffect(() => { - // force a query to be run after load of component - if (debug) - console.log("🚧 LOGIC/QueryBar/", typeof query, query.length); - - if (onQueryValid(query && isSubmit === "true")) { - if (debug) - console.log( - "🚧 LOGIC/QueryBar/ dispatch ", - query !== "{}", - query.length > 0, - query !== "{}" || query.length > 1 - ); - // here - dispatch(setLoading(true)); - dispatch(loadLogs()); - - setTimeout(() => { - dispatch(setIsSubmit(false)); - }, 200); - } else if (!onQueryValid(query) && isSubmit === "true") { - dispatch(setIsSubmit(false)); - } - }, []); - - useEffect(() => { - setQueryInput(query); - setQueryValid(onQueryValid(query)); - }, [query, queryInput]); - - const onValueDisplay = (e) => { - e.preventDefault(); - const isOpen = labelsBrowserOpen ? false : true; - dispatch(setLabelsBrowserOpen(isOpen)); - }; - - const handleChange = (e) => { - const qr = e.target.value; - setQueryInput(qr); - dispatch(setQuery(qr)); - }; - - const onBrowserActive = () => { - return !labelsBrowserOpen - ? { - borderColor: "#11abab", - } - : {}; - }; - - const handleInputKeyDown = (e) => { - if (e.code === "Enter" && e.ctrlKey) { - onSubmit(e); + const multiline = e.map( text => text.children[0].text).join('') + dispatch(setQuery(multiline)) + + }; + const onBrowserActive = () => { + return !labelsBrowserOpen + ? { + borderColor: "#11abab", } - }; - - const onSubmit = (e) => { - e.preventDefault(); - - dispatch(setQuery(queryInput)); - - if (onQueryValid(queryInput)) { - try { - const historyUpdated = historyService.add({ - data: queryInput, - url: window.location.hash, - }); - dispatch(setQueryHistory(historyUpdated)); - dispatch(setLabelsBrowserOpen(false)); - decodeQuery(query,apiUrl) - dispatch(loadLogs()); - const storedUrl = saveUrl.add({data: window.location.href, description:'From Query Submit'}) - dispatch(setLinksHistory(storedUrl)) - } catch (e) { - console.log(e); - } - } else { - console.log("Please make a log query", query); - } - }; - function handleHistoryClick(e){ - dispatch((setHistoryOpen(!historyOpen))) + : {}; + }; + + const handleInputKeyDown = (e) => { + if (e.code === "Enter" && e.ctrlKey) { + onSubmit(e); + } + }; + + const onSubmit = (e) => { + e.preventDefault(); + + dispatch(setQuery(queryInput)); + + if (onQueryValid(queryInput)) { + try { + const historyUpdated = historyService.add({ + data: queryInput, + url: window.location.hash, + }); + dispatch(setQueryHistory(historyUpdated)); + dispatch(setLabelsBrowserOpen(false)); + decodeQuery(query, apiUrl); + dispatch(loadLogs()); + const storedUrl = saveUrl.add({ + data: window.location.href, + description: "From Query Submit", + }); + dispatch(setLinksHistory(storedUrl)); + } catch (e) { + console.log(e); + } + } else { + console.log("Please make a log query", query); } - return ( -
- - {LOG_BROWSER} - - - - - - - handleHistoryClick(e)} - > - - - - - - - -
- ); + }; + function handleHistoryClick(e) { + dispatch(setHistoryOpen(!historyOpen)); + } + return ( +
+ + {LOG_BROWSER} + + + + + {/* */} + + + handleHistoryClick(e)} + > + + + + + +
+ ); }; diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js index c09ec128..a1d6673a 100644 --- a/src/components/StatusBar/StatusBar.js +++ b/src/components/StatusBar/StatusBar.js @@ -212,10 +212,9 @@ export function StatusBarSelectors() { )} + "Please add a query for sharing link" : "Copy Link" }>