Refactor: Updated location of components.

packages/studio/src/app/app.css

@@ -25,9 +25,6 @@
   padding-bottom: 0;
 }
 
-.app-data-list-cell.pf-m-icon > img {
-  max-width: unset;
-}
 
 .app-api-title {
   color: var(--pf-global--primary-color--100);
@@ -46,38 +43,11 @@
   margin-right: var(--pf-global--spacer--sm);
 }
 
-.app-tag {
-  padding-right: var(--pf-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--sm);
-  background-color: var(--pf-global--BackgroundColor--300);
-  font-size: var(--pf-global--FontSize--xs);
-  border-radius: var(--pf-global--BorderRadius--lg);
-}
-
-.app-card-view-card-body {
-  font-size: var(--pf-global--FontSize--sm);
-}
-
-.app-card-view-card-header {
-  font-weight: var(--pf-global--FontWeight--normal) !important;
-}
 
 .pf-m-selected {
   color: var(--pf-global--active-color--100) !important;
 }
 
-.app-drawer-content {
-  padding: var(--pf-global--spacer--lg); /* remove this when new drawer styles in pf are added */
-}
-
-.app-drawer-panel-content {
-  padding: 0 !important;
-}
-
-.app-drawer-panel-body .pf-c-drawer__panel-body {
-  padding: 0;
-}
-
 .app-button-group-sm > *:not(:last-child) {
   margin-right: var(--pf-global--spacer--sm); /* remove this when action group is added or we use utility classes */
 }

packages/studio/src/app/app.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React  from "react";
 import { Page } from "@patternfly/react-core";
 import AppHeader from "./appHeader";
 import {BrowserRouter as Router, Route} from 'react-router-dom';

packages/studio/src/app/common/appConfig.ts

@@ -3,21 +3,16 @@ import {ApisService, KeycloakAuthenticationService, ConfigService} from  '@apicu
 // Initialize services.
 
 export class Services {
-
-    private static singleton: Services
-    public configService: ConfigService = new ConfigService();
-    public autheticationService : KeycloakAuthenticationService = new KeycloakAuthenticationService(this.configService);;
-    public apisService: ApisService = new ApisService(this.autheticationService, this.configService);;
-
-    constructor() {
-
-    }
-
     static getInstance() {
         if (Services.singleton === undefined) {
             Services.singleton = new Services();
         }
 
         return Services.singleton;
     }
+
+    private static singleton: Services;
+    public configService: ConfigService = new ConfigService();
+    public autheticationService : KeycloakAuthenticationService = new KeycloakAuthenticationService(this.configService);
+    public apisService: ApisService = new ApisService(this.autheticationService, this.configService);
 }

packages/studio/src/app/components/api/apiCard/apiCard.css

@@ -0,0 +1,7 @@
+.api-card-view-card-body {
+    font-size: var(--pf-global--FontSize--sm);
+}
+
+.api-card-view-card-header {
+    font-weight: var(--pf-global--FontWeight--normal) !important;
+}

packages/studio/src/app/appCard.tsx → packages/studio/src/app/components/api/apiCard/apiCard.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
 import { Card, CardHead, CardHeader, CardBody, CardFooter, CardActions } from '@patternfly/react-core';
-import {AppTag} from './appTag';
-import ApicurioIcon from './assets/apicurio-icon.png';
-import './app.css'
+import {ApiTag} from '../apiTag';
+import ApicurioIcon from '../../../assets/apicurio-icon.png';
+import './apiCard.css'
 
-interface AppCardProps {
+interface ApiCardProps {
   id: string,
   name: string,
   description: string,
   tags: string[],
   type?: string
 }
 
-export const AppCard: React.FunctionComponent<AppCardProps> = ({ name, description, tags = []}: AppCardProps) => {
+export const ApiCard: React.FunctionComponent<ApiCardProps> = ({ name, description, tags = []}: ApiCardProps) => {
   return (
     <Card>
       <CardHead>
         <img src={ApicurioIcon}/>
         <CardActions/>
       </CardHead>
-      <CardHeader className="app-card-view-card-header">
+      <CardHeader className="api-card-view-card-header">
         {name}
       </CardHeader>
-      <CardBody className="app-card-view-card-body">
+      <CardBody className="api-card-view-card-body">
         {description}
       </CardBody>
       <CardFooter>
         <div className="app-api-tag-group">
           {tags.map((tag, index) => 
-            <AppTag key={index} text={tag}/>
+            <ApiTag key={index} text={tag}/>
           )}
         </div>
       </CardFooter>

packages/studio/src/app/appCardView.tsx → packages/studio/src/app/components/api/apiCard/apiCardView.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Gallery } from '@patternfly/react-core';
-import {AppCard} from './appCard';
-import data from '../api-data.json';
+import {ApiCard} from './apiCard';
+import data from '../../../../api-data.json';
 
-export const AppCardView: React.FunctionComponent<any> = (props) => {
+export const ApiCardView: React.FunctionComponent<any> = (props) => {
   const apiData = data.apis;
   const cardList = apiData.map((api, index) =>
-    <AppCard
+    <ApiCard
       key={index}
       id={api.id}
       name={api.name}
@@ -22,4 +22,4 @@ export const AppCardView: React.FunctionComponent<any> = (props) => {
   );
 }
 
-export default AppCardView;
+export default ApiCardView;

packages/studio/src/app/components/api/apiCard/index.ts

@@ -0,0 +1,2 @@
+export * from './apiCard';
+export * from './apiCardView';

packages/studio/src/app/appDataList.tsx → packages/studio/src/app/components/api/apiDataList/apiDataList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {DataList} from '@patternfly/react-core';
-import AppDataListItem from './appDataListItem';
+import ApiDataListItem from './apiDataListItem';
 
 interface AppDataListProps {
   viewDetails: React.MouseEventHandler,
@@ -33,7 +33,7 @@ class AppDataList extends React.Component<AppDataListProps, AppDataListState> {
         selectedDataListItemId={this.state.selectedDataListItemId}
         onSelectDataListItem={this.onSelectDataListItem}
       >
-        <AppDataListItem/>
+        <ApiDataListItem/>
       </DataList>
     );
   }

packages/studio/src/app/components/api/apiDataList/apiDataListItem.css

@@ -0,0 +1,3 @@
+.api-data-list-cell.pf-m-icon > img {
+    max-width: unset;
+  }

packages/studio/src/app/appDataListItem.tsx → packages/studio/src/app/components/api/apiDataList/apiDataListItem.tsx

@@ -1,26 +1,23 @@
 import React, { useEffect, useContext } from 'react';
 import { Button, DataListItem, DataListItemCells, DataListItemRow, DataListCell, DataListCheck, DataListAction } from '@patternfly/react-core';
-import AppDropdownKebab from './appDropdownKebab';
-import {AppTag} from './appTag';
-import ApicurioIcon from './assets/apicurio-icon.png';
-import './app.css';
-import { Services } from './common';
-import { StoreContext } from './../context/StoreContext';
-import {Api} from "@apicurio/models";
-import { useStoreContext } from './../context/reducers';
+import {ApiTag} from '../apiTag';
+import {ApiDropdownKebab} from '../apiDropDownKebab';
+import ApicurioIcon from '../../../assets/apicurio-icon.png';
+import './apiDataListItem.css';
+import { useStoreContext } from '../../../../context/reducers';
 
-export const AppDataListItem = () => {
+export const ApiDataListItem: React.FunctionComponent<any> = () => {
   const { apiData } = useStoreContext();
 
     return (
       <React.Fragment>
         {apiData.map(apis => 
-          <DataListItem id={apis.id} aria-labelledby={`data-list-item-${apis.id}`}>
+          <DataListItem id={apis.id} key={apis.id} aria-labelledby={`data-list-item-${apis.id}`}>
           <DataListItemRow>
             <DataListCheck checked={false} aria-labelledby={`data-list-item-${apis.id}`} name={`data-list-item-check-${apis.id}`}/>
             <DataListItemCells
               dataListCells={[
-                <DataListCell isIcon className="app-data-list-cell" key={`primary content ${apis.id}`}>
+                <DataListCell isIcon={true} className="api-data-list-cell" key={`primary content ${apis.id}`}>
                   <img src={ApicurioIcon}/>
                 </DataListCell>,
                 <DataListCell key={`secondary content ${apis.id}`}>
@@ -32,7 +29,7 @@ export const AppDataListItem = () => {
                   </div>
                   <div className="app-api-tag-group">
                     {apis.tags.map((tag, index) =>
-                      <AppTag key={index} text={tag}/>
+                      <ApiTag key={index} text={tag}/>
                     )}
                   </div>
                 </DataListCell>
@@ -41,7 +38,7 @@ export const AppDataListItem = () => {
             <DataListAction aria-labelledby={`data-list-item-${apis.id}`} id={`data-list-item-${apis.id}`} aria-label="Actions">
                 <Button variant="link">View Details</Button>
                 <Button variant="secondary">Edit API</Button>
-                <AppDropdownKebab/>
+                <ApiDropdownKebab/>
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
@@ -50,4 +47,4 @@ export const AppDataListItem = () => {
   )
 };
 
-export default AppDataListItem;
+export default ApiDataListItem;

packages/studio/src/app/components/api/apiDrawer/apiDrawer.css

@@ -0,0 +1,11 @@
+.api-drawer-content {
+    padding: var(--pf-global--spacer--lg); /* remove this when new drawer styles in pf are added */
+  }
+
+  .api-drawer-panel-content {
+    padding: 0 !important;
+  }
+
+  .api-drawer-panel-body .pf-c-drawer__panel-body {
+    padding: 0;
+  }

packages/studio/src/app/appDrawer.tsx → packages/studio/src/app/components/api/apiDrawer/apiDrawer.tsx

@@ -1,66 +1,66 @@
 import React from 'react';
 import { Drawer, DrawerPanelContent, DrawerContent } from '@patternfly/react-core/dist/esm/experimental';
-import AppDataList from './appDataList';
-import {AppCardView} from './appCardView';
-import AppDrawerPanelContent from './appDrawerPanelContent';
-import './app.css';
+import AppDataList from '../apiDataList/apiDataList';
+import {ApiCardView} from '../..';
+import ApiDrawerPanelContent from './apiDrawerPanelContent';
+import './apiDrawer.css';
 
-interface AppDrawerProps {
+export interface ApiDrawerProps {
   dashboardView: string
 }
 
-interface AppDrawerState {
+interface ApiDrawerState {
   readonly currentApiId: string,
   readonly isExpanded: boolean,
 }
 
-class AppDrawer extends React.Component<AppDrawerProps, AppDrawerState> {
-  constructor(props: AppDrawerProps) {
+export class ApiDrawer extends React.Component<ApiDrawerProps, ApiDrawerState> {
+  constructor(props: ApiDrawerProps) {
     super(props);
     this.state = {
       currentApiId: "",
       isExpanded: false
     };
   }
 
-  private openDrawer = () => {
-    const isExpanded = !this.state.isExpanded;
-    this.setState({
-      isExpanded
-    });
-  };
-
-  private findKey = (id: string) => {
-    const keyListItem = id;
-    this.setState({
-      currentApiId: keyListItem
-    })
-  }
-
- render() {
+  render() {
    const { isExpanded, currentApiId } = this.state;
 
    return (
     <React.Fragment>
       <Drawer isExpanded={isExpanded} isInline>
         <DrawerContent>
-          <div className="app-drawer-content">
+          <div className="api-drawer-content">
             { 
             this.props.dashboardView === 'list' ? (
               <AppDataList keyListItem={this.findKey} selectItem={this.openDrawer} viewDetails={this.openDrawer}/>
              ) : (
-            <AppCardView/>
+            <ApiCardView/>
             )
           }
           </div>
         </DrawerContent>
-        <DrawerPanelContent className="app-drawer-panel-body">
-          <AppDrawerPanelContent currentApiId={currentApiId}/>
+        <DrawerPanelContent className="api-drawer-panel-body">
+          <ApiDrawerPanelContent currentApiId={currentApiId}/>
         </DrawerPanelContent>
       </Drawer>
     </React.Fragment>
     );
  }
+
+  private openDrawer = () => {
+    const isExpanded = !this.state.isExpanded;
+    this.setState({
+      isExpanded
+    });
+  };
+
+  private findKey = (id: string) => {
+    const keyListItem = id;
+    this.setState({
+      currentApiId: keyListItem
+    })
+  }
 }
 
-export default AppDrawer;
+export default ApiDrawer;