fix(QueriesHistory): should save history to local storage (#8)

Author: Raubzeug

src/containers/Tenant/Acl/Acl.scss

@@ -1,6 +1,10 @@
 @import '../../../styles/mixins.scss';
 
 .kv-acl {
+    display: flex;
+    overflow: auto;
+    flex-grow: 1;
+
     padding: 0 12px 16px;
     @include query-data-table;
     &__message-container {
@@ -38,8 +42,4 @@
             color: var(--yc-color-text-danger);
         }
     }
-
-    &__result {
-        overflow: auto;
-    }
 }

src/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -13,7 +13,9 @@
     max-height: 100%;
 
     &__overview-wrapper {
+        display: flex;
         overflow: auto;
+        flex-grow: 1;
 
         padding: 0 12px 16px;
     }
@@ -91,7 +93,15 @@
     }
 
     &__info {
+        display: flex;
         overflow: hidden;
+        flex-direction: column;
+    }
+
+    &__schema {
+        display: flex;
+        overflow: auto;
+        flex-grow: 1;
     }
 
     &__info-controls {

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -78,7 +78,7 @@ interface ObjectSummaryProps {
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
-    additionalTenantInfo?: any
+    additionalTenantInfo?: any;
 }
 
 function ObjectSummary(props: ObjectSummaryProps) {
@@ -168,10 +168,16 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const renderTabContent = () => {
         switch (infoTab) {
             case TenantInfoTabsIds.acl: {
-                return <Acl additionalTenantInfo={props.additionalTenantInfo}/>;
+                return <Acl additionalTenantInfo={props.additionalTenantInfo} />;
             }
             case TenantInfoTabsIds.schema: {
-                return loadingSchema ? renderLoader() : <SchemaViewer data={schema} />;
+                return loadingSchema ? (
+                    renderLoader()
+                ) : (
+                    <div className={b('schema')}>
+                        <SchemaViewer data={schema} />
+                    </div>
+                );
             }
             default: {
                 return renderObjectOverview();
@@ -194,7 +200,9 @@ function ObjectSummary(props: ObjectSummaryProps) {
                     <div className={b('tree-title')}>Navigation</div>
                 </div>
                 <div className={b('tree')}>
-                    {tenantData && <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />}
+                    {tenantData && (
+                        <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />
+                    )}
                 </div>
             </div>
         );

src/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -38,6 +38,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
     };
 
     const renderSavedQueries = () => {
+        const reversedHistory = ([] as string[]).concat(history).reverse();
         return (
             <Popup
                 className={b('popup-wrapper')}
@@ -47,7 +48,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                 onClose={onCloseHistory}
             >
                 <div className={b()}>
-                    {history.length === 0 ? (
+                    {reversedHistory.length === 0 ? (
                         <div className={b('empty')}>History is empty</div>
                     ) : (
                         <React.Fragment>
@@ -57,7 +58,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                                 </div>
                             </div>
                             <div>
-                                {history?.reverse().map((query, index) => {
+                                {reversedHistory.map((query, index) => {
                                     return (
                                         <div
                                             className={b('saved-queries-row')}

src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -67,7 +67,7 @@ class SchemaViewer extends React.Component {
                 theme="yandex-cloud"
                 data={tableData}
                 columns={columns}
-                settings={{...DEFAULT_TABLE_SETTINGS, stickyTop: 107}}
+                settings={DEFAULT_TABLE_SETTINGS}
                 dynamicRender={true}
                 initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
             />

src/store/reducers/executeQuery.js

@@ -1,5 +1,9 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {getValueFromLS, parseJson} from '../../utils/utils';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+
+const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
@@ -9,6 +13,10 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
 const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
 
+const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, []));
+
+const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
+
 export const RUN_ACTIONS_VALUES = {
     script: 'execute-script',
     scan: 'execute-scan',
@@ -25,7 +33,7 @@ const initialState = {
     loading: false,
     input: '',
     history: {
-        queries: [],
+        queries: queriesHistoryInitial.slice(sliceLimit < 0 ? 0 : sliceLimit),
         currentIndex: -1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
@@ -76,7 +84,10 @@ const executeQuery = (state = initialState, action) => {
 
         case SAVE_QUERY_TO_HISTORY: {
             const query = action.data;
-            const newQueries = [...state.history.queries, query];
+            const newQueries = [...state.history.queries, query].slice(
+                state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
+            );
+            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
             const currentIndex = newQueries.length - 1;
 
             return {

src/utils/constants.js

@@ -120,6 +120,7 @@ export const PROBLEMS = 'With problems';
 
 export const THEME_KEY = 'theme';
 export const SAVED_QUERIES_KEY = 'saved_queries';
+export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
 
 export const defaultUserSettings = {