.vscode/settings.json

@@ -2,8 +2,6 @@
   "css.validate": false,
   "scss.validate": false,
   "cSpell.words": [
-    "Formik",
-    "autorun",
-    "wouter"
+    "Formik"
   ]
 }

package-lock.json

@@ -15492,6 +15492,11 @@
         "pretty-format": "^3.8.0"
       }
     },
+    "preact-router": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-3.2.1.tgz",
+      "integrity": "sha512-KEN2VN1DxUlTwzW5IFkF13YIA2OdQ2OvgJTkQREF+AA2NrHRLaGbB68EjS4IeZOa1shvQ1FvEm3bSLta4sXBhg=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -21139,11 +21144,6 @@
         "microevent.ts": "~0.1.1"
       }
     },
-    "wouter-preact": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/wouter-preact/-/wouter-preact-2.7.4.tgz",
-      "integrity": "sha512-lYYO3JozPcHB9VP3FrjliADVD04p0TDFRP28wVFWfIGN8l8RxCTWXQxvm9uQ0vFU7CBUA2nOFeCveBPXdZiGLQ=="
-    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -41,10 +41,10 @@
     "preact-jsx-chai": "^3.0.0",
     "preact-markup": "^2.1.1",
     "preact-render-to-string": "^5.1.18",
+    "preact-router": "^3.2.1",
     "ramda": "^0.27.1",
     "subscriptions-transport-ws": "^0.9.18",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
-    "wouter-preact": "^2.7.4"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.21.3",

src/components/app.tsx

@@ -4,10 +4,10 @@ import { ProjectPanel } from './projects/project-panel';
 import styles from './app.scss';
 import { OverlayContainer } from './commons/overlay/overlay';
 import { useObserver } from 'mobx-react';
-import { Router, Route } from 'wouter-preact';
+import Router, { Route } from 'preact-router';
+import { ProjectDetails } from '../routes/projects/project-details';
 import { createApolloClient } from '../units/apollo-client';
-import { ProjectDetails } from './pipeline-tasks/project-details';
-import { PipelineEditor } from './pipelines/pipeline-editor';
+import { PipelineEditor } from '../routes/pipelines/pipeline-editor';
 
 const client = createApolloClient();
 
@@ -25,16 +25,13 @@ const App: FunctionalComponent = () => {
 const Content = () => {
   return <Board />;
 };
-
 const Board = () => {
   return useObserver(() => {
     return (
       <Fragment>
         <main>
           <Router>
-            <Route path="/projects/:projectId/:rest*">
-              {params => <ProjectDetails projectId={params.projectId} />}
-            </Route>
+            <Route path="/projects/:id/:rest*" component={ProjectDetails} />
             <Route
               path="/dev"
               component={() => <PipelineEditor projectId="test" />}

src/components/commit-actions/commit-actions.tsx

@@ -21,7 +21,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { useLocalObservable } from 'mobx-react';
 import { PipelineTask, PipelineUnits } from '../../generated/graphql';
-import { useLocation } from 'wouter-preact';
+import { route } from 'preact-router';
 
 const CREATE_PIPELINE_TASK = gql`
   mutation CreatePipelineTask($task: CreatePipelineTaskInput!) {
@@ -42,12 +42,18 @@ interface Props {
   branch?: string;
 }
 
+class Store {
+  constructor() {
+    makeAutoObservable(this);
+  }
+  isTasksWorking = [false, false, false, false];
+}
+
 export const CommitActions = ({ pipeline, commit }: Props) => {
   const [createTask] = useMutation<
     { task: PipelineTask },
     { task: CreatePipelineTaskInput }
   >(CREATE_PIPELINE_TASK);
-  const setLocation = useLocation()[1];
 
   const doWork = async (units: PipelineUnits[]) => {
     const { data } = await createTask({
@@ -55,7 +61,9 @@ export const CommitActions = ({ pipeline, commit }: Props) => {
         task: { pipelineId: pipeline.id, commit, units }
       }
     });
-    setLocation(`/tasks/${data?.task.id}`);
+    route(
+      `/projects/${pipeline.projectId}/pipelines/${pipeline.id}/tasks/${data?.task.id}`
+    );
   };
 
   const commitActionsStore = useLocalObservable(() => new CommitActionsStore());

src/components/commit-logs/commit-log-list.scss

@@ -21,11 +21,3 @@
     @apply justify-self-end self-center;
   }
 }
-
-.taskList {
-  @apply text-sm bg-gray-100;
-  li {
-    @apply px-2 py-1 cursor-pointer;
-    @apply hover:bg-gray-200;
-  }
-}

src/components/commit-logs/commit-log-list.scss.d.ts

@@ -4,7 +4,6 @@ declare namespace CommitLogListScssNamespace {
     component: string;
     item: string;
     list: string;
-    taskList: string;
   }
 }
 

src/components/commit-logs/commit-log-list.tsx

@@ -4,8 +4,8 @@ import { gql, useQuery, useSubscription } from '@apollo/client';
 import styles from './commit-log-list.scss';
 import { CommitActions } from '../commit-actions/commit-actions';
 import { FIND_PIPELINE } from '../pipelines/pipeline-list.constants';
+import { route } from 'preact-router';
 import { PipelineTaskStatus } from '../pipeline-tasks/pipeline-task-status';
-import { useLocation } from 'wouter-preact';
 
 const LIST_LOGS = gql`
   subscription listLogsForPipeline($id: String!) {
@@ -41,7 +41,6 @@ export const CommitLogList = ({ pipelineId }: Props) => {
       id: pipelineId!
     }
   });
-  const setLocation = useLocation()[1];
   const queryResult = useQuery<{ pipeline: Pipeline }>(FIND_PIPELINE, {
     variables: { id: pipelineId }
   });
@@ -55,9 +54,16 @@ export const CommitLogList = ({ pipelineId }: Props) => {
           <CommitActions pipeline={pipeline} commit={log.hash} />
         ) : null}
       </header>
-      <ol className={styles.taskList}>
+      <ol>
         {log.tasks.map(task => (
-          <li key={task.id} onClick={() => setLocation(`/tasks/${task.id}`)}>
+          <li
+            key={task.id}
+            onClick={() =>
+              route(
+                `/projects/${pipeline?.projectId}/pipelines/${pipeline?.id}/tasks/${task.id}`
+              )
+            }
+          >
             <PipelineTaskStatus status={task.status} /> {task.startedAt}
           </li>
         ))}

src/components/pipeline-tasks/pipeline-task-details.scss

@@ -11,9 +11,6 @@
   &:not(:first-child) {
     @apply border-l border-gray-200;
   }
-  & > svg {
-    @apply ml-2 text-sm;
-  }
 }
 .LogListOfUnit {
   @apply overflow-scroll;
@@ -22,7 +19,7 @@
   @apply bg-gray-200;
 }
 .unitLogs {
-  @apply whitespace-pre-line font-mono text-xs;
+  @apply whitespace-pre-line font-mono text-sm;
   @apply p-1 my-px;
   @apply bg-gray-100;
 }

src/components/pipeline-tasks/pipeline-task-details.tsx

@@ -1,7 +1,7 @@
 import { gql, useSubscription, useQuery } from '@apollo/client';
 import { h } from 'preact';
 import { useMemo } from 'preact/hooks';
-import { find, findIndex, last, propEq } from 'ramda';
+import { find, last, propEq } from 'ramda';
 import { observer, useLocalObservable, useObserver } from 'mobx-react';
 import { autorun, makeAutoObservable } from 'mobx';
 import styles from './pipeline-task-details.scss';
@@ -12,7 +12,13 @@ import {
   PipelineTask,
   PipelineTaskLogMessage
 } from '../../generated/graphql';
-import { PipelineTaskStatus } from './pipeline-task-status';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faExclamationCircle,
+  faPauseCircle,
+  faSpinner
+} from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 interface Props {
   taskId: string;
 }
@@ -38,26 +44,12 @@ class Store {
   }
 
   addLogsFromTask(task: PipelineTask) {
-    if (task.status !== TaskStatuses.Pending) {
-      const unit = (task.logs[0]?.unit as unknown) as PipelineUnits;
-      if (unit) {
-        const log = find(propEq('unit', unit), this.logs);
-        if (!log) {
-          this.logs.push({
-            unit: unit,
-            status: TaskStatuses.Working,
-            startedAt: task.startedAt,
-            logs: ''
-          });
-        }
-      }
-    }
     for (const log of task.logs) {
-      const index = findIndex(propEq('unit', log.unit), this.logs);
-      if (index === -1) {
+      const taskLog = find(propEq('unit', log.unit), this.logs);
+      if (!taskLog) {
         this.logs.push(log);
       } else {
-        this.logs[index] = log;
+        taskLog.logs = log.logs + taskLog.logs;
       }
     }
   }
@@ -74,6 +66,7 @@ class Store {
       taskLog.logs += log.message;
     }
   }
+
   setTask(task: PipelineTask) {
     this.task = task;
   }
@@ -91,16 +84,13 @@ const FIND_PIPELINE_TASK = gql`
       logs {
         unit
         logs
-        status
-        startedAt
-        endedAt
       }
     }
   }
 `;
 
 const PIPELINE_TASK_CHANGED = gql`
-  subscription PipelineTaskChanged($taskId: String!) {
+  subscription Pipelinetaskchanged($taskId: String!) {
     task: pipelineTaskChanged(id: $taskId) {
       id
       units
@@ -108,13 +98,6 @@ const PIPELINE_TASK_CHANGED = gql`
       status
       startedAt
       endedAt
-      logs {
-        unit
-        status
-        logs
-        startedAt
-        endedAt
-      }
     }
   }
 `;
@@ -184,15 +167,11 @@ const UnitList = observer(({ store }: { store: Store }) => {
     return <div>Loading...</div>;
   }
 
-  const tabs = store.task.units.map(unit => {
-    const log = find(propEq('unit', unit), store.logs);
-    return (
-      <li key={unit} className={styles.navItem}>
-        <span>{unit}</span>
-        <PipelineTaskStatus status={log?.status || TaskStatuses.Pending} />
-      </li>
-    );
-  });
+  const tabs = store.task.units.map(unit => (
+    <li key={unit} className={styles.navItem}>
+      {unit}
+    </li>
+  ));
 
   return <ol className={styles.navContainer}>{tabs}</ol>;
 });
@@ -218,9 +197,48 @@ const TaskInfo = observer(({ store }: { store: Store }) => {
   }
   return (
     <header className={styles.taskInfo}>
-      <PipelineTaskStatus status={task.status} />
+      <StatusIcon status={task.status} />
       <p>{task.startedAt}</p>
       <p>{task.status}</p>
     </header>
   );
 });
+
+const StatusIcon = ({ status }: { status: TaskStatuses }) => {
+  switch (status) {
+    case TaskStatuses.Working:
+      return (
+        <FontAwesomeIcon
+          icon={faSpinner}
+          className={classNames([
+            'animate-spin',
+            styles.taskStatusIcon,
+            'text-purple-500'
+          ])}
+        />
+      );
+    case TaskStatuses.Failed:
+      return (
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className={classNames([styles.taskStatusIcon, 'text-red-700'])}
+        />
+      );
+    case TaskStatuses.Success:
+      return (
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className={classNames([styles.taskStatusIcon, 'text-green-500'])}
+        />
+      );
+    case TaskStatuses.Pending:
+      return (
+        <FontAwesomeIcon
+          icon={faPauseCircle}
+          className={classNames([styles.taskStatusIcon, 'text-yellow-500'])}
+        />
+      );
+    default:
+      return null;
+  }
+};

src/components/pipeline-tasks/project-details.tsx

@@ -1,82 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEdit, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
-import { h } from 'preact';
-import { Project } from '../../generated/graphql';
-import styles from './project-details.scss';
-import { createOverlay } from '../../components/commons/overlay/overlay';
-import { ProjectEditor } from '../../components/projects/project-editor';
-import { CommitLogList } from '../../components/commit-logs/commit-log-list';
-import { Router, Route } from 'wouter-preact';
-import { gql, useQuery } from '@apollo/client';
-import { PipelineList } from '../../components/pipelines/pipeline-list';
-import { PipelineTaskDetails } from '../../components/pipeline-tasks/pipeline-task-details';
-
-const FIND_PROJECT = gql`
-  query FindProject($id: String!) {
-    project: findProject(id: $id) {
-      id
-      name
-      comment
-      sshUrl
-      webUrl
-      webHookSecret
-    }
-  }
-`;
-
-interface Props {
-  projectId: string;
-}
-
-export const ProjectDetails = ({ projectId: id }: Props) => {
-  const { data } = useQuery<{ project: Project }, { id: string }>(
-    FIND_PROJECT,
-    {
-      variables: {
-        id
-      }
-    }
-  );
-
-  const project: Project | undefined = data?.project;
-
-  const editProject = () => {
-    createOverlay({
-      content: <ProjectEditor project={project} />
-    });
-  };
-
-  return (
-    <Router base={`/projects/${id}`} key={id}>
-      <section className={styles.projectDetails}>
-        <header>
-          <h2>
-            {project?.name}
-            {project?.webUrl ? (
-              <a target="blank" href={project?.webUrl}>
-                <FontAwesomeIcon icon={faExternalLinkAlt} />
-              </a>
-            ) : null}
-          </h2>
-          <small>{project?.comment}</small>
-          <div className={styles.operations}>
-            <button onClick={editProject}>
-              <FontAwesomeIcon icon={faEdit} />
-            </button>
-          </div>
-        </header>
-        {project ? (
-          <div className={styles.body}>
-            <PipelineList projectId={id} />
-            <Route path="/tasks/:taskId">
-              {({ taskId }) => <PipelineTaskDetails taskId={taskId} />}
-            </Route>
-            <Route path="/pipelines/:pipelineId">
-              {({ pipelineId }) => <CommitLogList pipelineId={pipelineId} />}
-            </Route>
-          </div>
-        ) : null}
-      </section>
-    </Router>
-  );
-};

src/components/pipelines/pipeline-list.tsx

@@ -1,7 +1,7 @@
 import { gql, useQuery, useMutation } from '@apollo/client';
-import { makeAutoObservable } from 'mobx';
+import { autorun, makeAutoObservable, reaction } from 'mobx';
 import { useLocalObservable } from 'mobx-react-lite';
-import { useMemo, useState } from 'preact/hooks';
+import { useCallback, useMemo } from 'preact/hooks';
 import { h } from 'preact';
 import { Pipeline } from '../../generated/graphql';
 import styles from './pipeline-list.scss';
@@ -15,10 +15,10 @@ import {
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import { createOverlay } from '../commons/overlay/overlay';
-import { PipelineEditor } from './pipeline-editor';
+import { PipelineEditor } from '../../routes/pipelines/pipeline-editor';
 import { LIST_PIPELINES } from './pipeline-list.constants';
 import { Observer, observer } from 'mobx-react';
-import { useLocation, useRoute } from 'wouter-preact';
+import { getCurrentUrl, route } from 'preact-router';
 
 const DELETE_PIPELINE = gql`
   mutation DeletePipeline($id: String!) {
@@ -32,25 +32,29 @@ interface Props {
 
 class Store {
   pipelines?: Pipeline[];
+  currPipelineId?: string;
   editMode = false;
   constructor() {
     makeAutoObservable(this);
   }
   refetching = false;
 
-  setPipelines(pipelines: Pipeline[] | undefined) {
+  setPipelines(pipelines: any[] | undefined) {
     this.pipelines = pipelines;
   }
   setRefetching(val: boolean) {
     this.refetching = val;
   }
+  setCurrPipelineId(id: string) {
+    this.currPipelineId = id;
+  }
   toggleEditMode() {
     this.editMode = !this.editMode;
   }
 }
 
 export const PipelineList = ({ projectId }: Props) => {
-  const { data, refetch } = useQuery<{ pipelines: Pipeline[] }>(
+  const { data, refetch, loading } = useQuery<{ pipelines: Pipeline[] }>(
     LIST_PIPELINES,
     {
       variables: {
@@ -63,25 +67,14 @@ export const PipelineList = ({ projectId }: Props) => {
 
   const store = useLocalObservable(() => new Store());
 
-  const [currentPipeline, setCurrentPipeline] = useState<Pipeline | undefined>(
-    undefined
-  );
-
   useMemo(() => store.setPipelines(pipelines), [store, pipelines]);
-  const params = useRoute('/pipelines/:pipelineId')[1];
 
-  useMemo(() => {
-    let pipeline = pipelines?.find(
-      pipeline => pipeline.id === params?.pipelineId
-    );
-    if (!pipeline) {
-      pipeline = pipelines?.[0];
+  reaction(
+    () => store.currPipelineId,
+    () => {
+      route(`/projects/${projectId}/pipelines/${store.currPipelineId}`);
     }
-    if (pipeline === currentPipeline) {
-      return;
-    }
-    setCurrentPipeline(pipeline);
-  }, [params, pipelines]);
+  );
 
   const Header = observer(() => {
     const addPipeline = () => {
@@ -117,13 +110,7 @@ export const PipelineList = ({ projectId }: Props) => {
   });
   const items = pipelines?.map(pipeline => (
     <Observer key={pipeline.id}>
-      {(): any => (
-        <Item
-          pipeline={pipeline}
-          store={store}
-          currentPipeline={currentPipeline}
-        />
-      )}
+      {(): any => <Item pipeline={pipeline} store={store} />}
     </Observer>
   ));
 
@@ -136,16 +123,7 @@ export const PipelineList = ({ projectId }: Props) => {
 };
 
 const Item = observer(
-  ({
-    pipeline,
-    store,
-    currentPipeline
-  }: {
-    pipeline: Pipeline;
-    store: Store;
-    currentPipeline?: Pipeline;
-  }) => {
-    const setLocation = useLocation()[1];
+  ({ pipeline, store }: { pipeline: Pipeline; store: Store }) => {
     const [remove] = useMutation(DELETE_PIPELINE, {
       variables: { id: pipeline.id },
       update(cache) {
@@ -174,7 +152,7 @@ const Item = observer(
       }
     });
 
-    const isActive = currentPipeline?.id === pipeline.id;
+    const isActive = store.currPipelineId === pipeline.id;
     const openModifyPanel = () => {
       createOverlay({
         content: (
@@ -206,7 +184,7 @@ const Item = observer(
           },
           styles.item
         )}
-        onClick={() => setLocation(`/pipelines/${pipeline.id}`)}
+        onClick={() => store.setCurrPipelineId(pipeline.id)}
       >
         <h3>{pipeline.name}</h3>
         <small>

src/components/projects/project-panel.tsx

@@ -1,8 +1,18 @@
 import { gql, useQuery } from '@apollo/client';
+import {
+  action,
+  autorun,
+  computed,
+  makeObservable,
+  observable,
+  reaction
+} from 'mobx';
+import { useLocalObservable, useObserver } from 'mobx-react';
 import { h } from 'preact';
-import { forwardRef, useState } from 'preact/compat';
+import { route } from 'preact-router';
+import { forwardRef } from 'preact/compat';
 import { useImperativeHandle, useMemo, useRef } from 'preact/hooks';
-import { useLocation, useRoute } from 'wouter-preact';
+import { appStore } from '../../app.store';
 import { Project } from '../../generated/graphql';
 import { createOverlay } from '../commons/overlay/overlay';
 import { ProjectEditor } from './project-editor';
@@ -23,6 +33,45 @@ const FIND_PROJECTS = gql`
 interface ListRef {
   refetch: () => void;
 }
+
+class Store {
+  @observable currentProjectId?: string;
+  @observable projects?: Project[];
+  constructor() {
+    makeObservable(this);
+  }
+  @computed
+  get currentProject() {
+    return this.projects?.find(it => it.id === this.currentProjectId);
+  }
+
+  @computed
+  get list() {
+    return this.projects?.map(item => (
+      <li
+        class={`${styles.item} ${
+          item.id === this.currentProject?.id ? styles.itemActive : ''
+        }`}
+        key={item.id}
+        onClick={() => this.setCurrentProjectId(item.id)}
+      >
+        <h3>{item.name}</h3>
+        <small>{item.comment}</small>
+      </li>
+    ));
+  }
+
+  @action
+  setCurrentProjectId = (id: string) => {
+    this.currentProjectId = id;
+    route(`/projects/${id}`);
+  };
+
+  @action
+  setProjects = (projects?: Project[]) => {
+    this.projects = projects;
+  };
+}
 export function ProjectPanel() {
   const listRef = useRef<ListRef>();
   const addProject = () => {
@@ -55,36 +104,14 @@ const List = forwardRef<ListRef>((_, ref) => {
     projects: Project[];
   }>(FIND_PROJECTS);
   const projects = data?.projects;
-  const setLocation = useLocation()[1];
-  const params = useRoute('/projects/:projectId/:rest*')[1];
-  const [currentProject, setCurrentProject] = useState<Project | undefined>(
-    undefined
-  );
+
+  const store = useLocalObservable(() => new Store());
   useMemo(() => {
-    let project = projects?.find(project => params?.projectId === project.id);
-    if (!project) {
-      project = projects?.[0];
-    }
-    if (project === currentProject) {
-      return;
-    }
-    setCurrentProject(project);
-  }, [params, projects]);
-  const items = projects?.map(item => (
-    <li
-      class={`${styles.item} ${
-        item.id === currentProject?.id ? styles.itemActive : ''
-      }`}
-      key={item.id}
-      onClick={() => setLocation(`/projects/${item.id}`)}
-    >
-      <h3>{item.name}</h3>
-      <small>{item.comment}</small>
-    </li>
-  ));
+    store.setProjects(projects);
+  }, [projects, store]);
 
   useImperativeHandle(ref, () => ({
     refetch
   }));
-  return <ol class={styles.list}>{items}</ol>;
+  return useObserver(() => <ol class={styles.list}>{store.list}</ol>);
 });

src/routes/pipelines/pipeline-editor.scss

@@ -3,4 +3,4 @@
 .workUnitMetadata {
   min-height: 16rem;
   @apply max-h-64;
-}
+}

src/routes/pipelines/pipeline-editor.tsx

@@ -1,5 +1,6 @@
-import { Field, Form, Formik } from 'formik';
+import { Field, Form, Formik, useFormik } from 'formik';
 import { h } from 'preact';
+import { RoutableProps } from 'preact-router';
 import styles from './pipeline-editor.scss';
 import { useOverlay } from '../../components/commons/overlay/overlay';
 import { gql, useLazyQuery, useMutation } from '@apollo/client';
@@ -74,7 +75,7 @@ const MODIFY_PIPELINE = gql`
   }
 `;
 
-interface Props {
+interface Props extends RoutableProps {
   projectId: string;
   id?: string;
 }

src/routes/projects/project-details.tsx

@@ -0,0 +1,106 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { h } from 'preact';
+import { Project } from '../../generated/graphql';
+import styles from './project-details.scss';
+import { createOverlay } from '../../components/commons/overlay/overlay';
+import { ProjectEditor } from '../../components/projects/project-editor';
+import { CommitLogList } from '../../components/commit-logs/commit-log-list';
+import { makeAutoObservable } from 'mobx';
+import { Observer, useLocalObservable } from 'mobx-react';
+import Router, { RoutableProps, Route } from 'preact-router';
+import { gql, useQuery } from '@apollo/client';
+import { PipelineList } from '../../components/pipelines/pipeline-list';
+import { PipelineTaskList } from '../../components/pipeline-tasks/pipeline-task-list';
+import { PipelineTaskDetails } from '../../components/pipeline-tasks/pipeline-task-details';
+
+const FIND_PROJECT = gql`
+  query FindProject($id: String!) {
+    project: findProject(id: $id) {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+    }
+  }
+`;
+
+interface Props extends RoutableProps {
+  id: string;
+}
+
+class Store {
+  setBranch(branch?: string) {
+    this.branch = branch;
+  }
+  constructor() {
+    makeAutoObservable(this);
+  }
+  branch?: string;
+}
+
+export const ProjectDetails = ({ id, path }: Props) => {
+  const { data } = useQuery<{ project: Project }, { id: string }>(
+    FIND_PROJECT,
+    {
+      variables: {
+        id
+      }
+    }
+  );
+
+  const project: Project | undefined = data?.project;
+
+  const store = useLocalObservable(() => new Store());
+  const editProject = () => {
+    createOverlay({
+      content: <ProjectEditor project={project} />
+    });
+  };
+
+  const onSelectBranch = (branch?: string) => {
+    store.setBranch(branch);
+  };
+
+  return (
+    <section className={styles.projectDetails}>
+      <header>
+        <h2>
+          {project?.name}
+          {project?.webUrl ? (
+            <a target="blank" href={project?.webUrl}>
+              <FontAwesomeIcon icon={faExternalLinkAlt} />
+            </a>
+          ) : null}
+        </h2>
+        <small>{project?.comment}</small>
+        <div className={styles.operations}>
+          <button onClick={editProject}>
+            <FontAwesomeIcon icon={faEdit} />
+          </button>
+        </div>
+      </header>
+      {project ? (
+        <div className={styles.body}>
+          <PipelineList projectId={id} />
+          <Observer>
+            {(): any => (
+              <Router>
+                <Route
+                  path="/projects/:projectId/pipelines/:pipelineId/tasks/:taskId"
+                  component={PipelineTaskDetails}
+                />
+                <Route
+                  path="/projects/:projectId/pipelines/:pipelineId"
+                  component={CommitLogList}
+                />
+              </Router>
+            )}
+          </Observer>
+        </div>
+      ) : null}
+    </section>
+  );
+};

tsconfig.json

@@ -3,7 +3,7 @@
     /* Basic Options */
     "target": "ES6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    "lib": ["ESNext"],                             /* Specify library files to be included in the compilation:  */
+    // "lib": [],                             /* Specify library files to be included in the compilation:  */
     "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,