From ba1d9bb87dcb5ce5fdffc121383539e44a2f5726 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 4 Mar 2020 16:30:10 -0500 Subject: [PATCH 1/3] rebasing mark's changes working card view working card view card view, appToolbar WIP adding UI components updates to appToolbar, appCardview. moving state functions to toolbar adding context for card view adding props to be passed to context from state removing state functions from context addressing some PR feedback, formatting, WIP renaming attributes adds selected items to array rebasing with master deleting some files adding back api-data.json commenting out data list for now commenting out context-related state mgmt. -- refactor to hooks in progress refactor to function component with hooks, WIP change to DataToolbarGroup for filter/search rebased with master, checkboxes are working with bulk-select now, WIP splitCheckboxSelectAll is working in bulk-select, working on other select functions working on bulk-select functions bulk-select and alphabetic sorting is done, ready for review rebased with context changes --- packages/studio/src/api-data.json | 78 +++--- packages/studio/src/app/app.css | 1 - .../app/components/api/apiCard/apiCard.tsx | 94 ++++--- .../components/api/apiCard/apiCardContext.tsx | 54 ++++ .../components/api/apiCard/apiCardView.tsx | 147 +++++++++-- .../components/api/apiDrawer/apiDrawer.tsx | 2 +- .../components/api/apiToolbar/apiToolbar.tsx | 247 +++++++++++++++++- .../src/app/pages/dashboard/dashboard.tsx | 3 +- packages/studio/src/context/GlobalContext.tsx | 154 ++++++----- 9 files changed, 603 insertions(+), 177 deletions(-) create mode 100644 packages/studio/src/app/components/api/apiCard/apiCardContext.tsx diff --git a/packages/studio/src/api-data.json b/packages/studio/src/api-data.json index 9009f1e..9a7eca1 100644 --- a/packages/studio/src/api-data.json +++ b/packages/studio/src/api-data.json @@ -1,40 +1,40 @@ { - "apis": [ - { - "id": "0", - "name": "Pet Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 29, 2020", - "createdBy": "cmolloy@redhat.com", - "tags": ["Pet store tag", "Another tag", "Tag one"], - "type": "Open API 3.0.2" - }, - { - "id": "1", - "name": "Sports Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 30, 2020", - "createdBy": "dlabaj@redhat.com", - "tags": ["Sports store tag", "Another tag", "Tag two"], - "type": "Open API 3.0.2" - }, - { - "id": "2", - "name": "Weather API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 18, 2020", - "createdBy": "cmolloy@redhat.com", - "tags": ["Weather store tag", "Another tag", "Tag three"], - "type": "Open API 3.0.2" - }, - { - "id": "3", - "name": "Clothes Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 24, 2020", - "createdBy": "dlabaj@redhat.com", - "tags": ["Clothes store tag", "Another tag", "Tag four"], - "type": "Open API 3.0.2" - } - ] -} + "apis": [ + { + "id": "0", + "name": "Pet Store API", + "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", + "createdOn": "January 29, 2020", + "createdBy": "cmolloy@redhat.com", + "tags": ["Pet store tag", "Another tag", "Tag one"], + "type": "Open API 3.0.2" + }, + { + "id": "1", + "name": "Sports Store API", + "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", + "createdOn": "January 30, 2020", + "createdBy": "dlabaj@redhat.com", + "tags": ["Sports store tag", "Another tag", "Tag two"], + "type": "Open API 3.0.2" + }, + { + "id": "2", + "name": "Weather API", + "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", + "createdOn": "January 18, 2020", + "createdBy": "cmolloy@redhat.com", + "tags": ["Weather store tag", "Another tag", "Tag three"], + "type": "Open API 3.0.2" + }, + { + "id": "3", + "name": "Clothes Store API", + "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", + "createdOn": "January 24, 2020", + "createdBy": "dlabaj@redhat.com", + "tags": ["Clothes store tag", "Another tag", "Tag four"], + "type": "Open API 3.0.2" + } + ] + } \ No newline at end of file diff --git a/packages/studio/src/app/app.css b/packages/studio/src/app/app.css index 8e0ac64..a8c40b5 100644 --- a/packages/studio/src/app/app.css +++ b/packages/studio/src/app/app.css @@ -29,7 +29,6 @@ height: 100vh; } - .app-api-title { color: var(--pf-global--primary-color--100); } diff --git a/packages/studio/src/app/components/api/apiCard/apiCard.tsx b/packages/studio/src/app/components/api/apiCard/apiCard.tsx index 30b5de9..89943a9 100644 --- a/packages/studio/src/app/components/api/apiCard/apiCard.tsx +++ b/packages/studio/src/app/components/api/apiCard/apiCard.tsx @@ -1,37 +1,63 @@ + import React from 'react'; -import { Card, CardHead, CardHeader, CardBody, CardFooter, CardActions } from '@patternfly/react-core'; -import {ApiTag} from '../apiTag'; -import ApicurioIcon from '../../../assets/apicurio-icon.png'; -import './apiCard.css' +// import { Card, CardHead, CardHeader, CardBody, CardFooter, CardActions, Gallery, Dropdown, KebabToggle, DropdownItem, DropdownSeparator, Checkbox } from '@patternfly/react-core'; +// import {ApiTag} from '../apiTag'; +// import ApicurioIcon from './assets/apicurio-icon.png'; +// import './apiCard.css' +// import { useStoreContext } from '../../../../context/reducers'; +// import { ApiDropdownKebab } from './../apiDropDownKebab'; + +// interface AppCardProps { +// id?: string, +// name?: string, +// description?: string, +// tags?: string[], +// type?: string +// } + +// export const AppCard: React.FunctionComponent = ({ name, description, tags = []}: AppCardProps) => { +// const { apiData } = useStoreContext(); -interface ApiCardProps { - id: string, - name: string, - description: string, - tags: string[], - type?: string -} +// return ( -export const ApiCard: React.FunctionComponent = ({ name, description, tags = []}: ApiCardProps) => { - return ( - - - - - - - {name} - - - {description} - - -
- {tags.map((tag, index) => - - )} -
- - - ); -} +// + +// {apiData.map((api, key) => ( +// +// +// +// +// +// +// +// +// +// +// {api.name} +// +// +// {api.description} +// +// +//
+// {api.tags.map( +// (tag: string, index: string | number | undefined) => ( +// +// ) +// )} +//
+// +// +// +// ))} +// +// ); +// } \ No newline at end of file diff --git a/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx b/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx new file mode 100644 index 0000000..fa30ffb --- /dev/null +++ b/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx @@ -0,0 +1,54 @@ +import React, { Component } from "react"; + +const ApiCardContext = React.createContext({ + res: [] as any, + selectedItems: [] as any, + areAllSelected: false, + splitButtonDropdownIsOpen: false, + page: 1, + perPage: 2, + totalItemCount: 2, + isChecked: false, + numSelected: 0, + handleCheckboxClick: (checked: boolean, e: any) => {}, + selectAll: (e: any) => {}, + selectPage: (e: any) => {}, + selectNone: (e: any) => {}, + splitCheckboxSelectAll: (e: any) => {} +}); + +class ApiCardProvider extends React.Component { + // Context state + state = { + res: [] as any, + selectedItems: [] as any, + areAllSelected: false, + splitButtonDropdownIsOpen: false, + page: 1, + perPage: 2, + totalItemCount: 2, + isChecked: false, + numSelected: 0, + handleCheckboxClick: (checked: boolean, e: any) => {}, + selectAll: (e: any) => {}, + selectPage: (e: any) => {}, + selectNone: (e: any) => {}, + splitCheckboxSelectAll: (e: any) => {} + }; + +// render() { +// const { children } = this.props; +// // const vars = this.state +// // const { selectPage, selectNone, selectAll } = this + + return ( + + {children} + + ); + } +} + +export default ApiCardContext; + +// export { AppCardProvider } diff --git a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx index 36c9bbe..6710d1a 100644 --- a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx +++ b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx @@ -1,26 +1,131 @@ -import React, { useContext } from 'react'; -import { Gallery } from '@patternfly/react-core'; -import {ApiCard} from './apiCard'; -import { GlobalContext } from '../../../../context'; - -export const ApiCardView: React.FunctionComponent = (props) => { - const { apis } = {... useContext(GlobalContext).store} - - const cardList = apis.map((api, index) => - - ); +import React, { useContext, useState } from "react"; +import { + Card, + CardHead, + CardHeader, + CardBody, + CardFooter, + CardActions, + Gallery, + Dropdown, + KebabToggle, + DropdownItem, + DropdownSeparator, + Checkbox +} from "@patternfly/react-core"; +import { ApiTag } from "../apiTag"; +import ApicurioIcon from "./../../../assets/apicurio-icon.png"; +import "./apiCard.css"; +import AppDropdownKebab from "../apiDropDownKebab/apiDropdownKebab"; +import { GlobalContext, GlobalContextObj } from "../../../../context"; + +interface ApiCardProps { + id?: string; + name?: string; + description?: string; + tags?: string[]; + type?: string; +} + +<<<<<<< HEAD + + +export const ApiCardView: React.FunctionComponent = ({ + name, + description, + tags = [] +}: ApiCardProps) => { + const { + apiData, + selectedItems, + isChecked, + res, + totalItemCount + } = useStoreContext(); + + const [state, setState] = useContext(StoreContext); + + + // const card = useContext(AppCardContext); +======= +export const AppCardView: React.FunctionComponent = ({ + name, + description, + tags = [] +}: AppCardProps) => { + const globalContext: GlobalContextObj = useContext(GlobalContext); + const { selectedItems } = { ...globalContext.store.toolbarStatus }; +>>>>>>> 7f2fbd0... rebased with context changes + + const getAllItems = () => { + const collection: number[] = []; + for (const items of selectedItems) { + // tslint:disable-next-line: radix + collection.push(parseInt(items.id)); + } + return collection; + }; + + const handleCheckboxClick = (checked: boolean, e: any) => { + const { value } = e.target; + + if (checked) { + globalContext.updateToolbarStatus({ + areAllSelected: + globalContext.store.apis.length - 1 === selectedItems.length, + selectedItems: selectedItems.concat(value * 1) + }); + } else { + globalContext.updateToolbarStatus({ + areAllSelected: false, + selectedItems: selectedItems.filter(item => item !== Number(value)) + }); + } + }; + + const { apis } = { ...useContext(GlobalContext).store }; return ( - {cardList} + {apis.map((api, key) => ( + + + + + + + + + + + {api.name} + + + {api.description} + + +
+ {api.tags.map( + (tag: string, index: string | number | undefined) => ( + + ) + )} +
+ + + + ))} ); -} - -export default ApiCardView; \ No newline at end of file +}; diff --git a/packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx b/packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx index cf966fe..00e3935 100644 --- a/packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx +++ b/packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import { Drawer, DrawerPanelContent, DrawerContent } from '@patternfly/react-core/dist/esm/experimental'; import ApiDataList from '../apiDataList/apiDataList'; -import {ApiCardView} from '../..'; +import {ApiCardView} from '../apiCard/apiCardView'; import ApiDrawerPanelContent from './apiDrawerPanelContent'; import { GlobalContext, GlobalContextObj } from '../../../../context'; import './apiDrawer.css'; diff --git a/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx b/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx index b06c87e..d3c548d 100644 --- a/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx +++ b/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx @@ -1,27 +1,246 @@ -import React, { useContext } from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; -import { Button } from '@patternfly/react-core'; -import {ThIcon, ListIcon} from '@patternfly/react-icons'; -import {GlobalContext, GlobalContextObj, DashboardViews} from '../../../../context'; - -export const ApiToolbar: React.FunctionComponent = () => { +import React, { useContext, useState } from "react"; +import { + DataToolbar, + DataToolbarItem, + DataToolbarContent +} from "@patternfly/react-core/dist/esm/experimental"; +import { + Button, + Dropdown, + DropdownPosition, + DropdownToggle, + DropdownItem, + DropdownToggleCheckbox, + InputGroup, + TextInput, + ButtonVariant, + DataToolbarGroup +} from "@patternfly/react-core"; +import { + ThIcon, + ListIcon, + FilterIcon, + SearchIcon, + SortAlphaDownIcon, + SortAlphaUpIcon +} from "@patternfly/react-icons"; +import { Api } from "@apicurio/models"; +import { + GlobalContext, + GlobalContextObj, + DashboardViews, + ToolbarStatus +} from "../../../../context"; +export const ApiToolbar = () => { const globalContext: GlobalContextObj = useContext(GlobalContext); const apiCount = globalContext.store.apis.length; + const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState( + false + ); + const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState( + false + ); + const [sortIconChanged, setSortIconChanged] = useState(false); + const [currentCategory, setCurrentCategory] = useState("Name"); + + const compare = (direction: string) => { + if (direction === "asc") { + return (a: Api, b: Api) => (a.name > b.name ? 1 : -1); + } else if (direction === "desc") { + return (a: Api, b: Api) => (b.name > a.name ? 1 : -1); + } + return (a: Api, b: Api) => 0; + }; + + const sortAlphaDown = () => { + globalContext.updateApis(globalContext.store.apis.sort(compare("desc"))); + setSortIconChanged(true); + }; + + const sortAlphaUp = () => { + globalContext.updateApis(globalContext.store.apis.sort(compare("asc"))); + setSortIconChanged(false); + }; + + const onNameSelect = (event: any) => { + setCurrentCategory(event.target.innerText); + setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen); + }; + + const onToolbarDropdownToggle = (event: any) => { + setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen); + }; + + const selectAll = () => { + let collection: number[] = []; + + // tslint:disable-next-line: prefer-for-of + for (let i = 0; i < globalContext.store.apis.length; i++) { + // tslint:disable-next-line: radix + collection = [...collection, parseInt(globalContext.store.apis[i].id)]; + } + + globalContext.updateToolbarStatus({ + areAllSelected: true, + isChecked: true, + selectedItems: collection + }); + }; + + const splitCheckboxSelectAll = (e: any) => { + const { checked } = e.target; + let collection: number[] = []; + + if (checked) { + // tslint:disable-next-line: prefer-for-of + for (let i = 0; i < globalContext.store.apis.length; i++) { + // tslint:disable-next-line: radix + collection = [...collection, parseInt(globalContext.store.apis[i].id)]; + } + } + + globalContext.updateToolbarStatus({ + areAllSelected: checked, + isChecked: checked, + selectedItems: collection + }); + }; + + const selectNone = (e: any) => { + globalContext.updateToolbarStatus({ + areAllSelected: false, + isChecked: false, + selectedItems: [] + }); + }; + + const onSplitButtonToggle = (isOpen: boolean) => { + setSplitButtonDropdownIsOpen(isOpen); + }; + + const onSplitButtonSelect = (event: any) => { + setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen); + }; + + const buildFilterDropdown = () => ( + + + {currentCategory} + + } + isOpen={isLowerToolbarDropdownOpen} + dropdownItems={[ + Name, + Tag + ]} + style={{ width: "100%" }} + /> + + ); + + const buildSelectDropdown = () => { + const numSelected = globalContext.store.toolbarStatus.selectedItems.length; + const allSelected = globalContext.store.toolbarStatus.areAllSelected; + const anySelected = numSelected > 0; + + return ( + + ]} + onToggle={onSplitButtonToggle} + > + {numSelected !== 0 && ( + {numSelected} selected + )} + + } + isOpen={splitButtonDropdownIsOpen} + dropdownItems={[ + + Select none (0 items) + , + + Select all ({globalContext.store.apis.length} items) + + ]} + /> + ); + }; return ( + {buildSelectDropdown()} + + {buildFilterDropdown()} + + + + + - This is where the Data Toolbar should go + - - {apiCount} APIs found @@ -29,7 +248,7 @@ export const ApiToolbar: React.FunctionComponent = () => { - ) -} + ); +}; export default ApiToolbar; diff --git a/packages/studio/src/app/pages/dashboard/dashboard.tsx b/packages/studio/src/app/pages/dashboard/dashboard.tsx index 2c15358..407bc5b 100644 --- a/packages/studio/src/app/pages/dashboard/dashboard.tsx +++ b/packages/studio/src/app/pages/dashboard/dashboard.tsx @@ -1,12 +1,13 @@ import React, {useEffect, useContext, useState} from "react"; import { Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent, Level, LevelItem, Title, PageSection, PageSectionVariants } from '@patternfly/react-core'; import '../../app.css'; -import { ApiDrawer, ApiEmptyState, ApiToolbar } from '../../components'; +import { ApiDrawer, ApiEmptyState, AppToolbar } from '../../components'; import {Link} from 'react-router-dom'; import { GlobalContext, GlobalContextObj } from '../../../context'; import { Services } from './../../common'; import { ApiNotificationDrawer } from './../../components/api/apiNotificationDrawer/apiNotificationDrawer'; import { ApiDesignChange } from "@apicurio/models"; +import ApiToolbar from "src/app/components/api/apiToolbar/apiToolbar"; export const Dashboard = () => { diff --git a/packages/studio/src/context/GlobalContext.tsx b/packages/studio/src/context/GlobalContext.tsx index 7591e73..ddd073a 100644 --- a/packages/studio/src/context/GlobalContext.tsx +++ b/packages/studio/src/context/GlobalContext.tsx @@ -1,92 +1,114 @@ -import React, { createContext } from 'react'; -import {Api, ApiDesignChange, ApiCollaborator} from "@apicurio/models"; +import React, { createContext } from "react"; +import { Api, ApiDesignChange, ApiCollaborator } from "@apicurio/models"; + +export interface ToolbarStatus { + areAllSelected: boolean; + selectedItems: any[]; + isChecked?: boolean; +} export interface GlobalState { - apis: Api[], - collaborators: ApiCollaborator[], - recentActivity: ApiDesignChange[], - dashboardView: DashboardViews, - notificationDrawerExpanded: boolean, - apiDrawerExpanded: boolean, - selectedApiId: string + apis: Api[]; + collaborators: ApiCollaborator[]; + recentActivity: ApiDesignChange[]; + notificationDrawerExpanded: boolean; + dashboardView: DashboardViews; + toolbarStatus: ToolbarStatus; + apiDrawerExpanded: boolean; + selectedApiId: string; } /** * List of views for the dashboard. */ export enum DashboardViews { - list='list', - card='card' + list = "list", + card = "card" } const initialState: GlobalState = { - apiDrawerExpanded: false, - apis: [], - collaborators: [], - dashboardView: DashboardViews.list, - notificationDrawerExpanded: false, - recentActivity: [], - selectedApiId: '' + apiDrawerExpanded: false, + apis: [], + collaborators: [], + dashboardView: DashboardViews.list, + notificationDrawerExpanded: false, + recentActivity: [], + selectedApiId: "", + toolbarStatus: { + areAllSelected: false, + isChecked: false, + selectedItems: [] + } }; export interface GlobalContextObj { - setApiDrawerExpanded: (isExpanded: boolean) => void, - setSelectedApiId: (selectedApiId: string) => void, - store: GlobalState, - setDashboardView: (view: DashboardViews) => void, - setNotificationDrawerExpanded: (isExpanded: boolean) => void, - updateApis: (apis: Api[]) => void, - updateCollaborators: (collaborators: ApiCollaborator[]) => void, - updateRecentActivity: (recentActivity: ApiDesignChange[]) => void, -}; + setApiDrawerExpanded: (isExpanded: boolean) => void; + setSelectedApiId: (selectedApiId: string) => void; + store: GlobalState; + setDashboardView: (view: DashboardViews) => void; + setNotificationDrawerExpanded: (isExpanded: boolean) => void; + updateApis: (apis: Api[]) => void; + updateCollaborators: (collaborators: ApiCollaborator[]) => void; + updateRecentActivity: (recentActivity: ApiDesignChange[]) => void; + updateToolbarStatus: (toolbarStatus: ToolbarStatus) => void; +} export const GlobalContext = createContext({} as GlobalContextObj); export class GlobalContextProvider extends React.Component<{}, GlobalState> { - state: GlobalState = initialState; + state: GlobalState = initialState; - render() { - return ( - - {this.props.children} - - ); - } + render() { + return ( + + {this.props.children} + + ); + } - private setApiDrawerExpanded = (apiDrawerExpanded: boolean) => { - this.setState({apiDrawerExpanded}) - } + private setApiDrawerExpanded = (apiDrawerExpanded: boolean) => { + this.setState({ apiDrawerExpanded }); + }; - private setSelectedApiId = (selectedApiId: string) => { - this.setState({selectedApiId}) - } + private setSelectedApiId = (selectedApiId: string) => { + this.setState({ selectedApiId }); + }; - private setDashboardView = (dashboardView: DashboardViews) => { - this.setState({dashboardView}); - } + private setDashboardView = (dashboardView: DashboardViews) => { + this.setState({ dashboardView }); + }; - private setNotificationDrawerExpanded = (notificationDrawerExpanded: boolean) => { - this.setState({notificationDrawerExpanded}) - } + private setNotificationDrawerExpanded = ( + notificationDrawerExpanded: boolean + ) => { + this.setState({ notificationDrawerExpanded }); + }; - private updateApis = (apis: Api[]) => { - this.setState({apis}) - } + private updateApis = (apis: Api[]) => { + this.setState({ apis }); + }; + + private updateRecentActivity = (recentActivity: ApiDesignChange[]) => { + this.setState({ recentActivity }); + }; - private updateCollaborators = (collaborators: ApiCollaborator[]) => { - this.setState({collaborators}) - } + private updateCollaborators = (collaborators: ApiCollaborator[]) => { + this.setState({ collaborators }); + }; - private updateRecentActivity = (recentActivity: ApiDesignChange[]) => { - this.setState({recentActivity}) - } -}; + private updateToolbarStatus = (toolbarStatus: ToolbarStatus) => { + this.setState({ toolbarStatus }); + }; +} From 0455629aba68d7af0c70f63a0f417d3f36630a27 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 1 May 2020 11:26:12 -0400 Subject: [PATCH 2/3] resolving conflicts after merge, deleting unnecessary files --- packages/studio/src/api-data.json | 40 ------------ .../app/components/api/apiCard/apiCard.tsx | 63 ------------------- .../components/api/apiCard/apiCardContext.tsx | 54 ---------------- .../components/api/apiCard/apiCardView.tsx | 26 -------- .../src/app/components/api/apiCard/index.ts | 1 - 5 files changed, 184 deletions(-) delete mode 100644 packages/studio/src/api-data.json delete mode 100644 packages/studio/src/app/components/api/apiCard/apiCard.tsx delete mode 100644 packages/studio/src/app/components/api/apiCard/apiCardContext.tsx diff --git a/packages/studio/src/api-data.json b/packages/studio/src/api-data.json deleted file mode 100644 index 9a7eca1..0000000 --- a/packages/studio/src/api-data.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "apis": [ - { - "id": "0", - "name": "Pet Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 29, 2020", - "createdBy": "cmolloy@redhat.com", - "tags": ["Pet store tag", "Another tag", "Tag one"], - "type": "Open API 3.0.2" - }, - { - "id": "1", - "name": "Sports Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 30, 2020", - "createdBy": "dlabaj@redhat.com", - "tags": ["Sports store tag", "Another tag", "Tag two"], - "type": "Open API 3.0.2" - }, - { - "id": "2", - "name": "Weather API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 18, 2020", - "createdBy": "cmolloy@redhat.com", - "tags": ["Weather store tag", "Another tag", "Tag three"], - "type": "Open API 3.0.2" - }, - { - "id": "3", - "name": "Clothes Store API", - "description": "A sample API that uses a pet store as an example to demonstrate features in the OpenAPI 3.0 specification.", - "createdOn": "January 24, 2020", - "createdBy": "dlabaj@redhat.com", - "tags": ["Clothes store tag", "Another tag", "Tag four"], - "type": "Open API 3.0.2" - } - ] - } \ No newline at end of file diff --git a/packages/studio/src/app/components/api/apiCard/apiCard.tsx b/packages/studio/src/app/components/api/apiCard/apiCard.tsx deleted file mode 100644 index 89943a9..0000000 --- a/packages/studio/src/app/components/api/apiCard/apiCard.tsx +++ /dev/null @@ -1,63 +0,0 @@ - -import React from 'react'; -// import { Card, CardHead, CardHeader, CardBody, CardFooter, CardActions, Gallery, Dropdown, KebabToggle, DropdownItem, DropdownSeparator, Checkbox } from '@patternfly/react-core'; -// import {ApiTag} from '../apiTag'; -// import ApicurioIcon from './assets/apicurio-icon.png'; -// import './apiCard.css' -// import { useStoreContext } from '../../../../context/reducers'; -// import { ApiDropdownKebab } from './../apiDropDownKebab'; - -// interface AppCardProps { -// id?: string, -// name?: string, -// description?: string, -// tags?: string[], -// type?: string -// } - -// export const AppCard: React.FunctionComponent = ({ name, description, tags = []}: AppCardProps) => { -// const { apiData } = useStoreContext(); - -// return ( - -// - -// {apiData.map((api, key) => ( -// -// -// -// -// -// -// -// -// -// -// {api.name} -// -// -// {api.description} -// -// -//
-// {api.tags.map( -// (tag: string, index: string | number | undefined) => ( -// -// ) -// )} -//
-// -// -// -// ))} -// -// ); -// } \ No newline at end of file diff --git a/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx b/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx deleted file mode 100644 index fa30ffb..0000000 --- a/packages/studio/src/app/components/api/apiCard/apiCardContext.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { Component } from "react"; - -const ApiCardContext = React.createContext({ - res: [] as any, - selectedItems: [] as any, - areAllSelected: false, - splitButtonDropdownIsOpen: false, - page: 1, - perPage: 2, - totalItemCount: 2, - isChecked: false, - numSelected: 0, - handleCheckboxClick: (checked: boolean, e: any) => {}, - selectAll: (e: any) => {}, - selectPage: (e: any) => {}, - selectNone: (e: any) => {}, - splitCheckboxSelectAll: (e: any) => {} -}); - -class ApiCardProvider extends React.Component { - // Context state - state = { - res: [] as any, - selectedItems: [] as any, - areAllSelected: false, - splitButtonDropdownIsOpen: false, - page: 1, - perPage: 2, - totalItemCount: 2, - isChecked: false, - numSelected: 0, - handleCheckboxClick: (checked: boolean, e: any) => {}, - selectAll: (e: any) => {}, - selectPage: (e: any) => {}, - selectNone: (e: any) => {}, - splitCheckboxSelectAll: (e: any) => {} - }; - -// render() { -// const { children } = this.props; -// // const vars = this.state -// // const { selectPage, selectNone, selectAll } = this - - return ( - - {children} - - ); - } -} - -export default ApiCardContext; - -// export { AppCardProvider } diff --git a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx index 6710d1a..5eb5bb2 100644 --- a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx +++ b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx @@ -7,10 +7,6 @@ import { CardFooter, CardActions, Gallery, - Dropdown, - KebabToggle, - DropdownItem, - DropdownSeparator, Checkbox } from "@patternfly/react-core"; import { ApiTag } from "../apiTag"; @@ -27,35 +23,13 @@ interface ApiCardProps { type?: string; } -<<<<<<< HEAD - - export const ApiCardView: React.FunctionComponent = ({ name, description, tags = [] }: ApiCardProps) => { - const { - apiData, - selectedItems, - isChecked, - res, - totalItemCount - } = useStoreContext(); - - const [state, setState] = useContext(StoreContext); - - - // const card = useContext(AppCardContext); -======= -export const AppCardView: React.FunctionComponent = ({ - name, - description, - tags = [] -}: AppCardProps) => { const globalContext: GlobalContextObj = useContext(GlobalContext); const { selectedItems } = { ...globalContext.store.toolbarStatus }; ->>>>>>> 7f2fbd0... rebased with context changes const getAllItems = () => { const collection: number[] = []; diff --git a/packages/studio/src/app/components/api/apiCard/index.ts b/packages/studio/src/app/components/api/apiCard/index.ts index d426bd3..805ad76 100644 --- a/packages/studio/src/app/components/api/apiCard/index.ts +++ b/packages/studio/src/app/components/api/apiCard/index.ts @@ -1,2 +1 @@ -export * from './apiCard'; export * from './apiCardView'; \ No newline at end of file From 8d4085dcc2c0b701dab4b50d80b4b496133f49a1 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 1 May 2020 16:30:49 -0400 Subject: [PATCH 3/3] addressing PR comments from Christie --- .../src/app/components/api/apiCard/apiCardView.tsx | 4 ++-- .../src/app/components/api/apiToolbar/apiToolbar.tsx | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx index 5eb5bb2..6ccf24b 100644 --- a/packages/studio/src/app/components/api/apiCard/apiCardView.tsx +++ b/packages/studio/src/app/components/api/apiCard/apiCardView.tsx @@ -77,8 +77,8 @@ export const ApiCardView: React.FunctionComponent = ({ checked={globalContext.store.toolbarStatus.isChecked} onChange={handleCheckboxClick} aria-label="card checkbox" - id="check-1" - name="check1" + id={"check " + api.id} + name="check" /> diff --git a/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx b/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx index d3c548d..d36b34b 100644 --- a/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx +++ b/packages/studio/src/app/components/api/apiToolbar/apiToolbar.tsx @@ -139,8 +139,8 @@ export const ApiToolbar = () => { } isOpen={isLowerToolbarDropdownOpen} dropdownItems={[ - Name, - Tag + Name, + Tag ]} style={{ width: "100%" }} /> @@ -179,7 +179,7 @@ export const ApiToolbar = () => { Select none (0 items) , - + Select all ({globalContext.store.apis.length} items) ]} @@ -199,11 +199,10 @@ export const ApiToolbar = () => { id="textInput1" type="search" aria-label="search input" - css="" /> @@ -219,6 +218,7 @@ export const ApiToolbar = () => {