Refactor app details

.eslintignore

@@ -0,0 +1,4 @@
+*.tsx
+*.js
+*.ts
+!/src/containers/apps/appDetails/**/*.tsx

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "extends": ["plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "@typescript-eslint/indent": [2, 2],
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "semi": [2, "always"],
+    "quotes": [2, "double"],
+    "function-call-argument-newline": [2, "consistent"],
+    "eol-last": [2, "always"],
+    "curly": [2, "all"],
+    "object-curly-spacing": ["error", "always"],
+    "space-before-blocks": ["error", "always"],
+    "block-spacing": ["error", "always"],
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "never"
+    }],
+    "react/sort-comp": ["error", {
+      "order": [
+        "static-methods",
+        "instance-variables",
+        "lifecycle",
+        "everything-else",
+        "/^on.+$/",
+        "/^render.+$/",
+        "render"
+      ]
+    }]
+  }
+}

.gitignore

@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /.project
+.vscode/settings.json

config-overrides.js

@@ -14,7 +14,6 @@ module.exports = override(
         javascriptEnabled: true,
         modifyVars: {
             "@primary-color": "#1b8ad3",
-            '@font-family': '"Google Sans", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif',
         },
     })
 );

package.json

@@ -12,10 +12,11 @@
     "@types/react-router": "^5.0.3",
     "@types/react-router-dom": "^4.3.4",
     "@types/utf8": "^2.1.6",
-    "antd": "~3.21.2",
+    "antd": "^3.23.2",
     "axios": "^0.19.0",
     "babel-plugin-import": "^1.12.0",
     "bcryptjs": "^2.4.3",
+    "classnames": "^2.2.6",
     "customize-cra": "^0.5.0",
     "moment": "^2.24.0",
     "query-string": "^6.8.2",
@@ -35,7 +36,8 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint \"**/*.tsx\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,5 +47,13 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@types/classnames": "^2.2.9",
+    "@typescript-eslint/eslint-plugin": "^2.2.0",
+    "@typescript-eslint/parser": "^2.2.0",
+    "babel-eslint": "^10.0.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3"
+  }
 }

src/App.css

@@ -40,4 +40,10 @@ hr {
     border-radius: 5px;
     padding: 10px;
     font-size: 90%;
-}
+}
+
+.disabled {
+    opacity: .4;
+    cursor: hand;
+    pointer-events: none;
+}

src/containers/PageRoot.tsx

@@ -360,7 +360,7 @@ class PageRoot extends ApiComponent<
               <Switch>
                 <Route path="/dashboard/" component={Dashboard} />
                 <Route
-                  path="/apps/details/:appName"
+                  path="/apps/details/:appName/:tab?"
                   render={props => (
                     <AppDetails {...props} mainContainer={self.mainContainer} />
                   )}

src/containers/apps/AppDefinition.ts

@@ -10,13 +10,13 @@ export interface IAppEnvVar {
   value: string;
 }
 
-interface IAppVolume {
+export interface IAppVolume {
   containerPath: string;
   volumeName?: string;
   hostPath?: string;
 }
 
-interface IAppPort {
+export interface IAppPort {
   containerPort: number;
   hostPort: number;
   protocol?: "udp" | "tcp";
@@ -47,23 +47,34 @@ export interface IAppVersion {
   gitHash: string | undefined;
 }
 
-interface IAppCustomDomain {
+export interface IBuildLogs {
+  isAppBuilding: boolean;
+  isBuildFailed: boolean;
+  logs: {
+    firstLineNumber: number;
+    lines: string[];
+  }
+}
+
+export interface IAppCustomDomain {
   publicDomain: string;
   hasSsl: boolean;
 }
 
+export interface IHttpAuth {
+  user: string;
+  password?: string;
+  passwordHashed?: string;
+}
+
 interface IAppDefinitionBase {
   description?: string;
   deployedVersion: number;
   notExposeAsWebApp: boolean;
   hasPersistentData: boolean;
   hasDefaultSubDomainSsl: boolean;
   containerHttpPort: number;
-  httpAuth?: {
-      user: string
-      password?: string
-      passwordHashed?: string
-  }
+  httpAuth?: IHttpAuth;
   captainDefinitionRelativeFilePath: string;
 
   forceSsl: boolean;

src/containers/apps/AppsTable.tsx

@@ -236,7 +236,6 @@ function mapStateToProps(state: any) {
   };
 }
 
-export default connect(
+export default connect<{ isMobile: boolean }>(
   mapStateToProps,
-  undefined
 )(AppsTable);

src/containers/apps/CreateNewApp.tsx

@@ -45,7 +45,7 @@ class CreateNewApp extends Component<
             }
           >
             <Row>
-              {self.props.isMobile ? 
+              {self.props.isMobile ?
                 <Fragment>
                     <Input placeholder="my-amazing-app" onChange={e => self.setState({ appName: e.target.value })} />
                     <Button style={{marginTop: 8}} block onClick={() => self.onCreateNewAppClicked()} type="primary">Create New App</Button>
@@ -107,8 +107,7 @@ function mapStateToProps(state: any) {
   };
 }
 
-export default connect(
-  mapStateToProps,
-  undefined
+export default connect<{ isMobile: boolean }>(
+  mapStateToProps
 )(CreateNewApp);