From 1eea21841e85dda4fae7f94c20614e4720ab972d Mon Sep 17 00:00:00 2001 From: Stafeeva Date: Fri, 21 Feb 2020 16:32:27 +0100 Subject: [PATCH 1/4] Create project menu component --- src/shared/components/Menu/SideMenu.tsx | 48 ++++++--- .../components/Projects/ProjectMenu.less | 19 ++++ .../components/Projects/ProjectMenu.tsx | 97 +++++++++++++++++++ src/shared/views/ProjectView.tsx | 76 ++------------- 4 files changed, 161 insertions(+), 79 deletions(-) create mode 100644 src/shared/components/Projects/ProjectMenu.less create mode 100644 src/shared/components/Projects/ProjectMenu.tsx diff --git a/src/shared/components/Menu/SideMenu.tsx b/src/shared/components/Menu/SideMenu.tsx index 354f61923..cc4911d1e 100644 --- a/src/shared/components/Menu/SideMenu.tsx +++ b/src/shared/components/Menu/SideMenu.tsx @@ -19,12 +19,26 @@ const ANIMATIONS = { export interface SideMenuProps { title?: string; visible: boolean; - onClose: () => void; + onClose?: () => void; side?: 'left' | 'right'; + tabList?: any; + activeTabKey?: any; + tabBarExtraContent?: any; + onTabChange?: (key: string) => void; } const SideMenu: React.FunctionComponent = props => { - const { title, children, visible, onClose, side = 'right' } = props; + const { + title, + children, + visible, + onClose, + side = 'right', + tabList, + activeTabKey, + tabBarExtraContent, + onTabChange, + } = props; const transitions = useTransition(visible, null, ANIMATIONS[side]); return ( <> @@ -34,17 +48,27 @@ const SideMenu: React.FunctionComponent = props => { - {!!title &&
{title}
} - - + (title || onClose) && ( +
+ {!!title && ( +
{title}
+ )} + {!!onClose && ( + + )} +
+ ) } + tabList={tabList} + activeTabKey={activeTabKey} + tabBarExtraContent={tabBarExtraContent} + onTabChange={onTabChange} size="small" bordered={false} > diff --git a/src/shared/components/Projects/ProjectMenu.less b/src/shared/components/Projects/ProjectMenu.less new file mode 100644 index 000000000..fb0eb1e6c --- /dev/null +++ b/src/shared/components/Projects/ProjectMenu.less @@ -0,0 +1,19 @@ +.project-menu { + .infinite-scroll-component .infinite-scroller { + height: 278px; + } + + &__content { + padding: 6px; + width: 280px; + } + + &__controls { + display: flex; + flex-direction: column; + } + + &__close-button { + border: none; + } +} diff --git a/src/shared/components/Projects/ProjectMenu.tsx b/src/shared/components/Projects/ProjectMenu.tsx new file mode 100644 index 000000000..45b800426 --- /dev/null +++ b/src/shared/components/Projects/ProjectMenu.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import { AccessControl } from '@bbp/react-nexus'; +import { Link } from 'react-router-dom'; +import { Divider, Button } from 'antd'; + +import SideMenu from '../../components/Menu/SideMenu'; +import FileUploadContainer from '../../containers/FileUploadContainer'; +import ResourceFormContainer from '../../containers/ResourceFormContainer'; +import StudioListContainer from '../../containers/StudioListContainer'; + +import './ProjectMenu.less'; + +const ProjectMenu: React.FunctionComponent<{ + menuVisible: boolean; + setMenuVisible: (value: boolean) => void; + orgLabel: string; + projectLabel: string; +}> = ({ menuVisible, orgLabel, projectLabel, setMenuVisible }) => { + const [activeResourceMenuTab, setActiveResourceMenuTab] = React.useState( + 'resources' + ); + + const tabList = [ + { + key: 'resources', + tab: 'Resources', + }, + { + key: 'studios', + tab: 'Studios', + }, + ]; + + const menuContentList: { [key: string]: any } = { + resources: [ +

+ View resources in your project using pre-defined query-helper lists. +

, +
+ + + + + Sparql Query Editor + + + ElasticSearch Query Editor + + + View Project's permissions + +
, + + + + , + ], + studios: ( + + ), + }; + + return ( +
+ setActiveResourceMenuTab(key)} + activeTabKey={activeResourceMenuTab} + tabBarExtraContent={ +
+ ); +}; + +export default ProjectMenu; diff --git a/src/shared/views/ProjectView.tsx b/src/shared/views/ProjectView.tsx index f218cba96..1c1556cce 100644 --- a/src/shared/views/ProjectView.tsx +++ b/src/shared/views/ProjectView.tsx @@ -4,19 +4,14 @@ import { ProjectResponseCommon, DEFAULT_ELASTIC_SEARCH_VIEW_ID, } from '@bbp/nexus-sdk'; -import { useNexusContext, AccessControl } from '@bbp/react-nexus'; -import { notification, Popover, Divider, Switch, Tabs, Icon } from 'antd'; +import { useNexusContext } from '@bbp/react-nexus'; +import { notification, Popover, Switch, Icon } from 'antd'; import { Link } from 'react-router-dom'; import ViewStatisticsContainer from '../components/Views/ViewStatisticsProgress'; -import SideMenu from '../components/Menu/SideMenu'; -import FileUploadContainer from '../containers/FileUploadContainer'; -import ResourceFormContainer from '../containers/ResourceFormContainer'; import ResourceListBoardContainer from '../containers/ResourceListBoardContainer'; -import StudioListContainer from '../containers/StudioListContainer'; import HomeIcon from '../components/HomeIcon'; - -const { TabPane } = Tabs; +import ProjectMenu from '../components/Projects/ProjectMenu'; const ProjectView: React.FunctionComponent<{ match: match<{ orgLabel: string; projectLabel: string }>; @@ -38,9 +33,6 @@ const ProjectView: React.FunctionComponent<{ const [menuVisible, setMenuVisible] = React.useState(true); const [refreshLists, setRefreshLists] = React.useState(false); - const [activeResourceMenuTab, setActiveResourceMenuTab] = React.useState( - 'Resources' - ); React.useEffect(() => { setState({ @@ -116,62 +108,12 @@ const ProjectView: React.FunctionComponent<{ checkedChildren={} unCheckedChildren={} /> - setMenuVisible(false)} - > - setActiveResourceMenuTab(key)} - activeKey={activeResourceMenuTab} - > - -

- View resources in your project using pre-defined - query-helper lists. -

-
- - - - - Sparql Query Editor - - - ElasticSearch Query Editor - - - View Project's permissions - -
- - - - - - - - - - +
From 574b8447d9cb2d5f16edb781bf521a6149b5ae30 Mon Sep 17 00:00:00 2001 From: Stafeeva Date: Fri, 21 Feb 2020 16:53:36 +0100 Subject: [PATCH 2/4] Fix studio list height --- src/shared/App.less | 2 +- src/shared/components/Projects/ProjectMenu.less | 8 -------- src/shared/components/Projects/ProjectMenu.tsx | 2 +- src/shared/components/Studio/Studio.less | 3 ++- src/shared/components/Studio/StudioList.tsx | 5 ++--- 5 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/shared/App.less b/src/shared/App.less index 1da812b2d..5f8f9d387 100644 --- a/src/shared/App.less +++ b/src/shared/App.less @@ -92,7 +92,7 @@ } .studio-modal { - margin: 20px 0 0; + margin: 5px 0 0; } .studio-resource-view { diff --git a/src/shared/components/Projects/ProjectMenu.less b/src/shared/components/Projects/ProjectMenu.less index fb0eb1e6c..86f6f652c 100644 --- a/src/shared/components/Projects/ProjectMenu.less +++ b/src/shared/components/Projects/ProjectMenu.less @@ -1,8 +1,4 @@ .project-menu { - .infinite-scroll-component .infinite-scroller { - height: 278px; - } - &__content { padding: 6px; width: 280px; @@ -12,8 +8,4 @@ display: flex; flex-direction: column; } - - &__close-button { - border: none; - } } diff --git a/src/shared/components/Projects/ProjectMenu.tsx b/src/shared/components/Projects/ProjectMenu.tsx index 45b800426..848a3db60 100644 --- a/src/shared/components/Projects/ProjectMenu.tsx +++ b/src/shared/components/Projects/ProjectMenu.tsx @@ -82,7 +82,7 @@ const ProjectMenu: React.FunctionComponent<{