Fennec/fennec-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 改用路由处理多页面。

Browse Source
This commit is contained in:
Ivan Li 2021-03-06 15:25:08 +08:00
parent 61dad695fb
commit 12621fae55
10 changed files with 831 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

623
graphql.schema.json
View File

@ -552,6 +552,354 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "WorkUnit",
"description": null,
"fields": [
{
"name": "type",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "PipelineUnits",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "scripts",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "ENUM",
"name": "PipelineUnits",
"description": "流水线单元",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": [
{
"name": "checkout",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "installDependencies",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "test",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "deploy",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "cleanUp",
"description": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"description": null,
"fields": [
{
"name": "version",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Float",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "units",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnit",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Pipeline",
"description": null,
"fields": [
{
"name": "id",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "ID",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "project",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Project",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "workUnitMetadata",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "WorkUnitInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "type",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "PipelineUnits",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "scripts",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "WorkUnitMetadataInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "version",
"description": null,
"type": {
"kind": "SCALAR",
"name": "Float",
"ofType": null
},
"defaultValue": "1",
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "units",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "WorkUnitInput",
"ofType": null
}
}
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Query",
@ -695,6 +1043,76 @@
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "findPipelines",
"description": null,
"args": [
{
"name": "projectId",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "findPipeline",
"description": null,
"args": [
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
@ -889,18 +1307,100 @@
"deprecationReason": null
},
{
"name": "checkout",
"name": "createPipeline",
"description": null,
"args": [
{
"name": "checkoutInput",
"name": "Pipeline",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "CheckoutInput",
"name": "CreatePipelineInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "modifyPipeline",
"description": null,
"args": [
{
"name": "Pipeline",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "UpdatePipelineInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "deletePipeline",
"description": null,
"args": [
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
@ -914,7 +1414,7 @@
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Boolean",
"name": "Float",
"ofType": null
}
},
@ -1095,7 +1595,7 @@
},
{
"kind": "INPUT_OBJECT",
"name": "CheckoutInput",
"name": "CreatePipelineInput",
"description": null,
"fields": null,
"inputFields": [
@ -1119,21 +1619,120 @@
"name": "branch",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "commitNumber",
"name": "name",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "workUnitMetadata",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "WorkUnitMetadataInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "UpdatePipelineInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "workUnitMetadata",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "WorkUnitMetadataInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,

8
src/components/app.tsx
View File

@ -5,6 +5,8 @@ import styles from './app.scss';
import { OverlayContainer } from './commons/overlay/overlay';
import { useObserver } from 'mobx-react';
import { appStore } from '../app.store';
import Router, { Route } from 'preact-router';
import { ProjectDetails } from '../routes/projects/project-details';
const client = new ApolloClient({
uri: '/api/graphql',
@ -29,7 +31,11 @@ const Board = () => {
return useObserver(() => {
return (
<Fragment>
<main>{appStore.main}</main>
<main>
<Router>
<Route path="/projects/:id" component={ProjectDetails} />
</Router>
</main>
<aside>
<ProjectPanel />
</aside>

10
src/components/commit-actions/commit-actions.tsx
View File

@ -1,10 +1,10 @@
import { h } from 'preact';
import styles from './commit-actions.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { autorun, makeAutoObservable } from 'mobx';
import { makeAutoObservable } from 'mobx';
import { ActionButton } from './action-button';
import { gql, useMutation } from '@apollo/client';
import { CheckoutInput, Project } from '../../generated/graphql';
import { Project } from '../../generated/graphql';
import {
CommitActionsStoreProvider,
CommitActionsStore
@ -17,11 +17,7 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import { useLocalObservable } from 'mobx-react';
const CHECKOUT = gql`
mutation Checkout($input: CheckoutInput!) {
checkout(checkoutInput: $input)
}
`;
const CHECKOUT = '';
interface Props {
project: Project;

2
src/components/commons/button/button.tsx
View File

@ -1,5 +1,5 @@
import { FC } from 'preact/compat';
import { h } from 'preact';
import { h, RenderableProps } from 'preact';
interface Props {
loading?: boolean;

65
src/components/projects/project-details.tsx
View File

@ -1,65 +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 '../commons/overlay/overlay';
import { ProjectEditor } from './project-editor';
import { CommitLogList } from '../commit-logs/commit-log-list';
import { BranchesList } from '../branches-list/branches-list';
import { makeAutoObservable } from 'mobx';
import { Observer, useLocalObservable } from 'mobx-react';
interface Props {
project: Project;
}
class Store {
setBranch(branch?: string) {
this.branch = branch;
}
constructor() {
makeAutoObservable(this);
}
branch?: string;
}
export const ProjectDetails = ({ project }: Props) => {
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>
<div className={styles.body}>
<BranchesList project={project} onSelect={onSelectBranch} />
<Observer>
{(): any => <CommitLogList project={project} branch={store.branch} />}
</Observer>
</div>
</section>
);
};

59
src/components/projects/project-panel.tsx
View File

@ -1,13 +1,20 @@
import { gql, useQuery } from '@apollo/client';
import { action, computed, makeObservable, observable, reaction } from 'mobx';
import {
action,
autorun,
computed,
makeObservable,
observable,
reaction
} from 'mobx';
import { useLocalObservable, useObserver } from 'mobx-react';
import { h } from 'preact';
import { route } from 'preact-router';
import { forwardRef } from 'preact/compat';
import { useImperativeHandle, useMemo, useRef } from 'preact/hooks';
import { appStore } from '../../app.store';
import { Project } from '../../generated/graphql';
import { createOverlay } from '../commons/overlay/overlay';
import { ProjectDetails } from './project-details';
import { ProjectEditor } from './project-editor';
import styles from './project-panel.scss';
@ -33,29 +40,32 @@ class Store {
@observable projects?: Project[];
constructor() {
makeObservable(this);
reaction(
() => this.details,
() => {
if (this.currentProject) {
appStore.setMain(this.details);
}
}
);
}
@computed
get currentProject() {
return this.projects?.find(it => it.id === this.currentProjectId);
}
@computed
get details() {
return this.currentProject ? (
<ProjectDetails project={this.currentProject} />
) : null;
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
@ -94,28 +104,15 @@ const List = forwardRef<ListRef>((_, ref) => {
const { data, refetch } = useQuery<{
projects: Project[];
}>(FIND_PROJECTS);
const projects = data?.projects;
const store = useLocalObservable(() => new Store());
useMemo(() => {
store.setProjects(data?.projects);
}, [data?.projects]);
store.setProjects(projects);
}, [projects, store]);
useImperativeHandle(ref, () => ({
refetch
}));
const list = store.projects?.map(item => (
<li
class={`${styles.item} ${
item.id === store.currentProject?.id ? styles.itemActive : ''
}`}
key={item.id}
onClick={() => store.setCurrentProjectId(item.id)}
>
<h3>{item.name}</h3>
<small>{item.comment}</small>
</li>
));
return useObserver(() => <ol class={styles.list}>{list}</ol>);
return useObserver(() => <ol class={styles.list}>{store.list}</ol>);
});

86
src/generated/graphql.tsx
View File

@ -65,6 +65,47 @@ export type BranchList = {
all: Array<Scalars['String']>;
};
export type WorkUnit = {
__typename?: 'WorkUnit';
type: PipelineUnits;
scripts: Array<Scalars['String']>;
};
/** 流水线单元 */
export enum PipelineUnits {
Checkout = 'checkout',
InstallDependencies = 'installDependencies',
Test = 'test',
Deploy = 'deploy',
CleanUp = 'cleanUp'
}
export type WorkUnitMetadata = {
__typename?: 'WorkUnitMetadata';
version: Scalars['Float'];
units: Array<WorkUnit>;
};
export type Pipeline = {
__typename?: 'Pipeline';
id: Scalars['ID'];
project: Project;
projectId: Scalars['String'];
branch: Scalars['String'];
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadata;
};
export type WorkUnitInput = {
type: PipelineUnits;
scripts: Array<Scalars['String']>;
};
export type WorkUnitMetadataInput = {
version?: Maybe<Scalars['Float']>;
units: Array<WorkUnitInput>;
};
export type Query = {
__typename?: 'Query';
hello: Hello;
@ -72,6 +113,8 @@ export type Query = {
findProject: Project;
listLogs: LogList;
listBranches: BranchList;
findPipelines: Array<Pipeline>;
findPipeline: Pipeline;
};
@ -89,6 +132,16 @@ export type QueryListBranchesArgs = {
listBranchesArgs: ListBranchesArgs;
};
export type QueryFindPipelinesArgs = {
projectId?: Maybe<Scalars['String']>;
};
export type QueryFindPipelineArgs = {
id: Scalars['String'];
};
export type ListLogsArgs = {
projectId: Scalars['String'];
branch?: Maybe<Scalars['String']>;
@ -103,7 +156,9 @@ export type Mutation = {
createProject: Project;
modifyProject: Project;
deleteProject: Scalars['Float'];
checkout: Scalars['Boolean'];
createPipeline: Pipeline;
modifyPipeline: Pipeline;
deletePipeline: Scalars['Float'];
};
@ -123,8 +178,19 @@ export type MutationDeleteProjectArgs = {
};
export type MutationCheckoutArgs = {
checkoutInput: CheckoutInput;
export type MutationCreatePipelineArgs = {
Pipeline: CreatePipelineInput;
};
export type MutationModifyPipelineArgs = {
Pipeline: UpdatePipelineInput;
id: Scalars['String'];
};
export type MutationDeletePipelineArgs = {
id: Scalars['String'];
};
export type CreateProjectInput = {
@ -143,8 +209,16 @@ export type UpdateProjectInput = {
webHookSecret?: Maybe<Scalars['String']>;
};
export type CheckoutInput = {
export type CreatePipelineInput = {
projectId: Scalars['String'];
branch?: Maybe<Scalars['String']>;
commitNumber?: Maybe<Scalars['String']>;
branch: Scalars['String'];
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadataInput;
};
export type UpdatePipelineInput = {
projectId: Scalars['String'];
branch: Scalars['String'];
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadataInput;
};

0
src/components/projects/project-details.scss → src/routes/projects/project-details.scss
View File

0
src/components/projects/project-details.scss.d.ts → src/routes/projects/project-details.scss.d.ts vendored
View File

101
src/routes/projects/project-details.tsx Normal file
View File

@ -0,0 +1,101 @@
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 { BranchesList } from '../../components/branches-list/branches-list';
import { makeAutoObservable } from 'mobx';
import { Observer, useLocalObservable } from 'mobx-react';
import { RoutableProps } from 'preact-router';
import { gql, useQuery } from '@apollo/client';
import { useMemo } from 'preact/hooks';
const FIND_PROJECT = gql`
query FindProject($id: String!) {
project: findProject(id: $id) {
id
name
comment
sshUrl
webUrl
webHookSecret
deletedAt
}
}
`;
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;
// useMemo(() => {
// store.project = data?.findProject;
// });
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}>
<BranchesList project={project} onSelect={onSelectBranch} />
<Observer>
{(): any => (
<CommitLogList project={project} branch={store.branch} />
)}
</Observer>
</div>
) : null}
</section>
);
};