Spec page

packages/frontend-dist/src/view/AddSdkConfigModal.tsx

@@ -21,7 +21,7 @@ import { SdkConfigModal } from './basic/SdkConfigModal';
  * Currently only supports specifying a target, version and options as a valid JSON.
  */
 export class AddSdkConfigModal extends Component<
-  RouteComponentProps<{ specId: string; sdkConfigId?: string }>,
+  RouteComponentProps<{ id: string; sdkConfigId?: string }>,
   {}
 > {
   /**
@@ -66,7 +66,7 @@ export class AddSdkConfigModal extends Component<
       } else {
         await sdkConfigState.addSdkConfig({
           ...submittedSdkConfig,
-          specId: parseInt(this.props.match.params.specId, 10),
+          specId: parseInt(this.props.match.params.id, 10),
         });
       }
       this.closeModal();

packages/frontend-dist/src/view/AddSpecModal.tsx

@@ -21,10 +21,7 @@ import { SpecModal } from './basic/SpecModal';
  * A modal window that allows the user to add a Spec to the dashboard.
  * Currently only supports specifying a name and URL.
  */
-export class AddSpecModal extends Component<
-  RouteComponentProps<{ specId?: string }>,
-  {}
-> {
+export class AddSpecModal extends Component<RouteComponentProps<{ id?: string }>, {}> {
   /**
    * Whether or not a progress indicator should be shown
    */
@@ -53,9 +50,9 @@ export class AddSpecModal extends Component<
   private onSubmitSpec = async (submittedSpec: Spec) => {
     this.showProgressIndicator = true;
     try {
-      if (this.props.match.params.specId) {
+      if (this.props.match.params.id) {
         await specState.updateSpec(
-          parseInt(this.props.match.params.specId, 10),
+          parseInt(this.props.match.params.id, 10),
           submittedSpec,
         );
       } else {
@@ -73,20 +70,20 @@ export class AddSpecModal extends Component<
   public render() {
     const {
       match: {
-        params: { specId },
+        params: { id },
       },
     } = this.props;
     return (
       <Observer>
         {() => (
           <>
             <SpecModal
-              initialSpec={specId ? specState.specs.get(parseInt(specId, 10)) : undefined}
+              initialSpec={id ? specState.specs.get(parseInt(id, 10)) : undefined}
               titleProps={{
-                children: specId ? 'Update Specification' : 'Add Specification',
+                children: id ? 'Update Specification' : 'Add Specification',
               }}
               submitButtonProps={{
-                children: specId ? 'Update' : 'Add',
+                children: id ? 'Update' : 'Add',
               }}
               onSubmitSpec={this.onSubmitSpec}
               onCloseModal={this.closeModal}
@@ -100,7 +97,7 @@ export class AddSpecModal extends Component<
               <DialogTitle>Error</DialogTitle>
               <DialogContent>
                 <DialogContentText>
-                  An error occurred {specId ? 'updating' : 'adding'} the specification.
+                  An error occurred {id ? 'updating' : 'adding'} the specification.
                 </DialogContentText>
               </DialogContent>
               <DialogActions>

packages/frontend-dist/src/view/DeleteSpecModal.tsx

@@ -22,7 +22,7 @@ const Styled: any = createStyled(theme => ({
   },
 }));
 
-export class DeleteSpecModal extends Component<RouteComponentProps<{ specId: string }>> {
+export class DeleteSpecModal extends Component<RouteComponentProps<{ id: string }>> {
   /**
    * Whether or not a progress indicator should be shown
    */
@@ -40,7 +40,9 @@ export class DeleteSpecModal extends Component<RouteComponentProps<{ specId: str
   };
 
   private closeModalOnDelete = () => {
-    this.props.history.push(goUpUrl(this.props.match.url, 2));
+    this.props.history.push(
+      goUpUrl(this.props.match.url.replace('specs', 'overview'), 2),
+    );
   };
 
   private closeErrorModal = () => {
@@ -54,7 +56,7 @@ export class DeleteSpecModal extends Component<RouteComponentProps<{ specId: str
   private onDeleteSpec = async () => {
     this.showProgressIndicator = true;
     try {
-      await specState.deleteSpec(parseInt(this.props.match.params.specId, 10));
+      await specState.deleteSpec(parseInt(this.props.match.params.id, 10));
       this.closeModalOnDelete();
     } catch (e) {
       console.error(e);
@@ -67,7 +69,7 @@ export class DeleteSpecModal extends Component<RouteComponentProps<{ specId: str
   public render() {
     const {
       match: {
-        params: { specId },
+        params: { id },
       },
     } = this.props;
     return (
@@ -81,8 +83,8 @@ export class DeleteSpecModal extends Component<RouteComponentProps<{ specId: str
                   <DialogContent>
                     <DialogContentText>
                       Are you sure you want to delete the{' '}
-                      {specId && specState.specs.has(parseInt(specId, 10))
-                        ? specState.specs.get(parseInt(specId, 10))!.title
+                      {id && specState.specs.has(parseInt(id, 10))
+                        ? specState.specs.get(parseInt(id, 10))!.title
                         : ''}{' '}
                       specification?
                     </DialogContentText>

packages/frontend-dist/src/view/Overview.tsx

@@ -5,14 +5,12 @@ import React, { Component, ReactNode } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Route } from 'react-router-dom';
 
-import { Id, HasId, Spec, SdkConfig } from '@openapi-platform/model';
+import { Id } from '@openapi-platform/model';
 import { state } from '../state/SpecState';
-import { AddSdkConfigModal } from './AddSdkConfigModal';
 import { AddSpecModal } from './AddSpecModal';
 import { ContentContainer } from './basic/ContentContainer';
 import { SimpleToolbar } from './basic/SimpleToolbar';
 import { SpecList } from './basic/SpecList';
-import { DeleteSpecModal } from './DeleteSpecModal';
 
 /**
  * An overview of the current state of Swagger Platform.
@@ -21,18 +19,9 @@ import { DeleteSpecModal } from './DeleteSpecModal';
 export class Overview extends Component<RouteComponentProps<{}>, {}> {
   private onSearch = event => {};
   private openAddSpecModal = () => this.props.history.push(`${this.props.match.url}/add`);
-  private openEditSpecModal = (spec: HasId<Spec>) =>
-    this.props.history.push(`${this.props.match.url}/${spec.id}/edit`);
-  private openDeleteSpecModal = (spec: HasId<Spec>) =>
-    this.props.history.push(`${this.props.match.url}/${spec.id}/delete`);
-  private openAddSdkConfigModal = (spec: HasId<Spec>) =>
-    this.props.history.push(`${this.props.match.url}/${spec.id}/sdk-configs/add`);
-  private onEditSdkConfigModal = (sdkConfig: HasId<SdkConfig>) =>
-    this.props.history.push(
-      `${this.props.match.url}/${sdkConfig.specId}/sdk-configs/${sdkConfig.id}/edit`,
-    );
   private expandSpec = (id: Id | null) =>
     this.props.history.push(`${this.props.match.url}${id === null ? '' : '/' + id}`);
+  private onSpecOpen = (id: Id) => this.props.history.push(`/specs/${id}`);
 
   private renderSpecList: (
     props: RouteComponentProps<{ specId?: string }>,
@@ -46,14 +35,7 @@ export class Overview extends Component<RouteComponentProps<{}>, {}> {
           }
           // Expands/collapses a Spec
           onSpecExpanded={this.expandSpec}
-          // Open a modal to edit the current spec
-          onEditSpec={this.openEditSpecModal}
-          // Open a model to delete the current spec
-          onDeleteSpec={this.openDeleteSpecModal}
-          // Open a modal to add an SDK configuration when the 'Add SDK Configuration' button is
-          // clicked
-          onAddSdkConfig={this.openAddSdkConfigModal}
-          onEditSdkConfig={this.onEditSdkConfigModal}
+          onSpecOpen={this.onSpecOpen}
         />
       )}
     </Observer>
@@ -84,28 +66,6 @@ export class Overview extends Component<RouteComponentProps<{}>, {}> {
                 path={`${this.props.match.url}/add`}
                 component={AddSpecModal}
               />
-              <Route
-                exact
-                path={`${this.props.match.url}/:specId(\\d+)/edit`}
-                component={AddSpecModal}
-              />
-              <Route
-                exact
-                path={`${this.props.match.url}/:specId(\\d+)/delete`}
-                component={DeleteSpecModal}
-              />
-              <Route
-                exact
-                path={`${this.props.match.url}/:specId(\\d+)/sdk-configs/add`}
-                component={AddSdkConfigModal}
-              />
-              <Route
-                exact
-                path={`${
-                  this.props.match.url
-                }/:specId(\\d+)/sdk-configs/:sdkConfigId(\\d+)/edit`}
-                component={AddSdkConfigModal}
-              />
             </ContentContainer>
           </>
         )}

packages/frontend-dist/src/view/SpecViewer.tsx

@@ -1,12 +1,55 @@
 import { observer } from 'mobx-react';
 import React, { SFC } from 'react';
-import { RouteComponentProps } from 'react-router';
+import { Route, RouteComponentProps } from 'react-router';
 
-import { state } from '../state/SpecState';
+import { Spec, SdkConfig, HasId } from '@openapi-platform/model';
+import { state as sdkConfigState } from '../state/SdkConfigState';
+import { state as specState } from '../state/SpecState';
+import { AddSdkConfigModal } from './AddSdkConfigModal';
+import { AddSpecModal } from './AddSpecModal';
 import { NotFound } from './basic/NotFound';
 import { SpecInformation } from './basic/SpecInformation';
+import { DeleteSpecModal } from './DeleteSpecModal';
 
-export const SpecViewer: SFC<RouteComponentProps<{}>> = observer(({ match }) => {
-  const spec = state.specs.get(Number.parseInt(match.params.id, 10));
-  return spec ? <SpecInformation spec={spec} /> : <NotFound item="specification" />;
+export const SpecViewer: SFC<RouteComponentProps<{}>> = observer(({ history, match }) => {
+  const specId = Number.parseInt(match.params.id, 10);
+  const specification = specState.specs.get(specId);
+  const sdkConfigs = sdkConfigState.specSdkConfigs.get(specId);
+
+  const onNavigateBack = () => history.push(match.url.replace('specs', 'overview'));
+
+  const onEditSdkConfigModal = (sdkConfig: HasId<SdkConfig>) =>
+    history.push(`${match.url}/sdk-configs/${sdkConfig.id}/edit`);
+  const openEditSpecModal = (spec: HasId<Spec>) => history.push(`${match.url}/edit`);
+  const openDeleteSpecModal = (spec: HasId<Spec>) => history.push(`${match.url}/delete`);
+  const openAddSdkConfigModal = (spec: HasId<Spec>) =>
+    history.push(`${match.url}/sdk-configs/add`);
+
+  return specification ? (
+    <>
+      <SpecInformation
+        spec={specification}
+        sdkConfigs={sdkConfigs}
+        onEditSdkConfig={onEditSdkConfigModal}
+        onNavigateBack={onNavigateBack}
+        // Open a modal to edit the current spec
+        onEditSpec={openEditSpecModal}
+        // Open a model to delete the current spec
+        onDeleteSpec={openDeleteSpecModal}
+        // Open a modal to add an SDK configuration when the 'Add SDK Configuration' button is
+        // clicked
+        onAddSdkConfig={openAddSdkConfigModal}
+      />
+      <Route exact path={`${match.path}/edit`} component={AddSpecModal} />
+      <Route exact path={`${match.path}/delete`} component={DeleteSpecModal} />
+      <Route exact path={`${match.path}/sdk-configs/add`} component={AddSdkConfigModal} />
+      <Route
+        exact
+        path={`${match.path}/sdk-configs/:sdkConfigId/edit`}
+        component={AddSdkConfigModal}
+      />
+    </>
+  ) : (
+    <NotFound item="specification" />
+  );
 });

packages/frontend-dist/src/view/basic/SdkConfigItem.tsx

@@ -5,8 +5,7 @@ import * as Icons from '@material-ui/icons';
 import { observable, action } from 'mobx';
 import { Observer } from 'mobx-react';
 
-import { HasId } from '@openapi-platform/model';
-import { SdkConfig, BuildStatus, isRunning } from '@openapi-platform/model';
+import { SdkConfig, BuildStatus, isRunning, HasId } from '@openapi-platform/model';
 import { Sdk } from '@openapi-platform/model';
 import { client } from '../../client';
 import { createStyled } from '../createStyled';
@@ -37,7 +36,7 @@ const Styled: any = createStyled(theme => ({
 
 export interface SdkConfigItemProps extends React.DOMAttributes<HTMLDivElement> {
   sdkConfig: HasId<SdkConfig>;
-  onEditSdkConfig: (sdkConfig: HasId<SdkConfig>) => void;
+  onEditSdkConfig?: (sdkConfig: HasId<SdkConfig>) => void;
 }
 
 /**
@@ -63,9 +62,8 @@ export class SdkConfigItem extends Component<SdkConfigItemProps> {
     this.latestSdkUrl = sdk.path;
   };
 
-  private onEditSdkConfig = () => {
-    this.props.onEditSdkConfig(this.props.sdkConfig);
-  };
+  private onEditSdkConfig = () =>
+    this.props.onEditSdkConfig && this.props.onEditSdkConfig(this.props.sdkConfig);
 
   public render() {
     const { sdkConfig } = this.props;
@@ -96,21 +94,23 @@ export class SdkConfigItem extends Component<SdkConfigItemProps> {
                 </TableCell>
                 <TableCell numeric>
                   <div className={classes.sdkConfigActions}>
-                    {this.latestSdkUrl ? (
-                      <IconButton href={this.latestSdkUrl}>
-                        <Icons.CloudDownload />
-                      </IconButton>
-                    ) : null}
-                    <IconButton aria-label="Edit" onClick={this.onEditSdkConfig}>
-                      <Icons.Edit />
-                    </IconButton>
                     <Button
                       size="small"
                       disabled={isRunning(sdkConfig.buildStatus)}
                       onClick={this.createSdk}
                     >
                       {isRunning(sdkConfig.buildStatus) ? 'Running...' : 'Run'}
                     </Button>
+                    {this.latestSdkUrl ? (
+                      <IconButton href={this.latestSdkUrl}>
+                        <Icons.CloudDownload />
+                      </IconButton>
+                    ) : null}
+                    {this.props.onEditSdkConfig ? (
+                      <IconButton aria-label="Edit" onClick={this.onEditSdkConfig}>
+                        <Icons.Edit />
+                      </IconButton>
+                    ) : null}
                   </div>
                 </TableCell>
               </TableRow>

packages/frontend-dist/src/view/basic/SimpleToolbar.tsx

@@ -1,6 +1,6 @@
 import React, { SFC } from 'react';
 
-import { TextField, Toolbar, Typography } from '@material-ui/core';
+import { IconButton, TextField, Toolbar, Typography } from '@material-ui/core';
 import * as Icons from '@material-ui/icons';
 
 import { Category } from '../../Storybook';
@@ -11,10 +11,12 @@ export interface SimpleToolbarProps extends React.DOMAttributes<HTMLDivElement>
   searchPrompt: string;
   onSearchInputChange: (event: { target: { value: string } }) => void;
   actions: any[];
+  showBack?: boolean;
+  onNavigateBack?: () => void;
 }
 
 const Styled = createStyled(theme => ({
-  title: {
+  leftArea: {
     flex: 1,
     color: theme.palette.text.secondary,
     marginRight: theme.spacing.unit,
@@ -57,13 +59,23 @@ export const SimpleToolbar: SFC<SimpleToolbarProps> = ({
   searchPrompt,
   onSearchInputChange,
   actions,
+  showBack,
+  onNavigateBack,
 }) => (
   <Styled>
     {({ classes }) => (
       <Toolbar className={classes.toolbar}>
-        <Typography variant="title" className={classes.title}>
-          {title}
-        </Typography>
+        <div className={classes.leftArea}>
+          {showBack ? (
+            <IconButton className={classes.title} onClick={onNavigateBack}>
+              <Icons.ArrowBack />
+            </IconButton>
+          ) : (
+            <Typography variant="title" className={classes.title}>
+              {title}
+            </Typography>
+          )}
+        </div>
         <TextField
           placeholder={searchPrompt}
           className={classes.searchArea}