From 032e04e8e17966347b53b6ab2809c52352e7b715 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Tue, 3 Dec 2019 20:20:06 +0200 Subject: [PATCH 01/29] Migrate Query Source View page to React: skeleton --- client/app/pages/queries/QuerySource.jsx | 55 ++++++ .../queries/components/QueryPageHeader.jsx | 181 ++++++++++++++++++ client/app/services/query.js | 1 + 3 files changed, 237 insertions(+) create mode 100644 client/app/pages/queries/QuerySource.jsx create mode 100644 client/app/pages/queries/components/QueryPageHeader.jsx diff --git a/client/app/pages/queries/QuerySource.jsx b/client/app/pages/queries/QuerySource.jsx new file mode 100644 index 0000000000..2f44504b34 --- /dev/null +++ b/client/app/pages/queries/QuerySource.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { react2angular } from 'react2angular'; +import { routesToAngularRoutes } from '@/lib/utils'; +import { Query } from '@/services/query'; + +import QueryPageHeader from './components/QueryPageHeader'; + +function QuerySource({ query }) { + return ( +
+
+ +
+
+ Content +
+
+ ); +} + +QuerySource.propTypes = { + query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types +}; + +export default function init(ngModule) { + ngModule.component('pageQuerySource', react2angular(QuerySource)); + + return { + ...routesToAngularRoutes([{ + path: '/queries/new2', + }], { + reloadOnSearch: false, + template: '', + resolve: { + query: () => Query.newQuery(), + }, + }), + ...routesToAngularRoutes([{ + path: '/queries/:queryId/source2', + }], { + reloadOnSearch: false, + template: '', + resolve: { + query: ($route) => { + 'ngInject'; + + return Query.get({ id: $route.current.params.queryId }).$promise; + }, + }, + }), + }; +} + +init.init = true; diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx new file mode 100644 index 0000000000..a65476886c --- /dev/null +++ b/client/app/pages/queries/components/QueryPageHeader.jsx @@ -0,0 +1,181 @@ +import { extend, map, filter, reduce } from 'lodash'; +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import Button from 'antd/lib/button'; +import Dropdown from 'antd/lib/dropdown'; +import Menu from 'antd/lib/menu'; +import { EditInPlace } from '@/components/EditInPlace'; +import { FavoritesControl } from '@/components/FavoritesControl'; +import { QueryTagsControl } from '@/components/tags-control/TagsControl'; +import getTags from '@/services/getTags'; + +function createMenu(menu) { + const handlers = {}; + + const groups = map(menu, group => ( + filter(map(group, (props, key) => { + props = extend({ isAvailable: true, isEnabled: true, onClick: () => {} }, props); + if (props.isAvailable) { + handlers[key] = props.onClick; + return {props.title}; + } + return null; + })) + )); + + return ( + handlers[key]()}> + {reduce(groups, (result, items, key) => { + const divider = result.length > 0 ? : null; + return [...result, divider, ...items]; + }, [])} + + ); +} + +export default function QueryPageHeader({ query, sourceMode }) { + function saveName(name) { + console.log('saveName', name); + } + + const loadTags = () => getTags('api/queries/tags').then(tags => map(tags, t => t.name)); + + function saveTags(tags) { + console.log('saveTags', tags); + } + + function togglePublished() { + console.log('togglePublished'); + } + + const selectedTab = null; // TODO: replace with actual value + const canViewSource = true; // TODO: replace with actual value + const canForkQuery = () => true; // TODO: replace with actual value + const showPermissionsControl = true; // TODO: replace with actual value + + const moreActionsMenu = [ + { + fork: { + isEnabled: !query.isNew() && canForkQuery(), + title: Fork, + onClick: () => { console.log('duplicateQuery'); }, + }, + }, + { + archive: { + isAvailable: !query.isNew() && query.can_edit && !query.is_archived, + title: 'Archive', + onClick: () => { console.log('archiveQuery'); }, + }, + managePermissions: { + isAvailable: !query.isNew() && query.can_edit && !query.is_archived && showPermissionsControl, + title: 'Manage Permissions', + onClick: () => { console.log('showManagePermissionsModal'); }, + }, + unpublish: { + isAvailable: !query.isNew() && query.can_edit && !query.is_draft, + title: 'Unpublish', + onClick: () => { console.log('togglePublished'); }, + }, + }, + { + showAPIKey: { + isAvailable: !query.isNew(), + title: 'Show API Key', + onClick: () => { console.log('showApiKey'); }, + }, + }, + ]; + + return ( +
+
+
+ {!query.isNew() && ( + + + + )} +

+ + + + +

+ +   + + + {query.is_draft && !query.isNew() && query.can_edit && ( + + )} + + {!query.isNew() && canViewSource && ( + + {!sourceMode && ( +