Implement some flow and cleanup API call for file manager

.eslintrc

@@ -6,6 +6,7 @@
     "flowtype-errors/show-errors": 2,
     "semi": "off",
     "indent": ["error", 4],
-    "comma-dangle": ["error", "always-multiline"]
+    "comma-dangle": ["error", "always-multiline"],
+    "no-unused-vars": "warn"
   }
 }

.flowconfig

@@ -1,5 +1,5 @@
 [ignore]
-<PROJECT_ROOT>/vendor/.*
+<PROJECT_ROOT>/vendor/symfony/.*
 <PROJECT_ROOT>/tests/.*
 <PROJECT_ROOT>/storage/.*
 <PROJECT_ROOT>/app/.*

resources/assets/scripts/api/http.js

@@ -0,0 +1,25 @@
+// @flow
+import axios from 'axios';
+import type { AxiosInstance } from 'axios';
+
+// This token is set in the bootstrap.js file at the beginning of the request
+// and is carried through from there.
+// const token: string = '';
+
+const http: AxiosInstance = axios.create({
+    'X-Requested-With': 'XMLHttpRequest',
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+});
+
+// If we have a phpdebugbar instance registered at this point in time go
+// ahead and route the response data through to it so things show up.
+if (typeof window.phpdebugbar !== 'undefined') {
+    http.interceptors.response.use(response => {
+        window.phpdebugbar.ajaxHandler.handle(response.request);
+
+        return response;
+    });
+}
+
+export default http;

resources/assets/scripts/api/server/getDirectoryContents.js

@@ -0,0 +1,50 @@
+// @flow
+import http from './../http';
+import filter from 'lodash/filter';
+import isObject from 'lodash/isObject';
+import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+
+export interface DirectoryContentsResponse {
+    files: Object,
+    directories: Object,
+    editable: Array<string>,
+}
+
+/**
+ * Get the contents of a specific directory for a given server.
+ *
+ * @param {String} server
+ * @param {String} directory
+ * @return {Promise<DirectoryContentsResponse>}
+ */
+export function getDirectoryContents(server: string, directory: string): Promise<DirectoryContentsResponse> {
+    return new Promise((resolve, reject) => {
+        http.get(route('server.files', { server, directory }))
+            .then((response) => {
+                return resolve({
+                    files: filter(response.data.contents, function (o) {
+                        return o.file;
+                    }),
+                    directories: filter(response.data.contents, function (o) {
+                        return o.directory;
+                    }),
+                    editable: response.data.editable,
+                });
+            })
+            .catch(err => {
+                if (err.response && err.response.status === 404) {
+                    return reject('The directory you requested could not be located on the server');
+                }
+
+                if (err.response.data && isObject(err.response.data.errors)) {
+                    err.response.data.errors.forEach(error => {
+                        return reject(error.detail);
+                    });
+                }
+
+                return reject(err);
+            });
+    });
+}
+
+export default getDirectoryContents;

resources/assets/scripts/app.js

@@ -1,3 +1,4 @@
+// @flow
 import Vue from 'vue';
 import Vuex from 'vuex';
 import vuexI18n from 'vuex-i18n';
@@ -14,7 +15,7 @@ import { flash } from './mixins/flash';
 import store from './store/index.js';
 import router from './router';
 
-window.events = new Vue;
+window.events = new Vue();
 window.Ziggy = Ziggy;
 
 Vue.use(Vuex);
@@ -22,6 +23,7 @@ Vue.use(VueRouter);
 Vue.use(vuexI18n.plugin, store);
 Vue.use(VeeValidate);
 
+// $FlowFixMe: this is always going to be unhappy because we ignore the vendor dir.
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.mixin({ methods: { route }});
@@ -30,8 +32,9 @@ Vue.mixin(flash);
 Vue.i18n.add('en', Locales.en);
 Vue.i18n.set('en');
 
+// $FlowFixMe
 if (module.hot) {
     module.hot.accept();
 }
 
-const app = new Vue({ store, router }).$mount('#pterodactyl');
+new Vue({ store, router }).$mount('#pterodactyl');

resources/assets/scripts/components/server/subpages/FileManager.vue

@@ -42,12 +42,13 @@
 </template>
 
 <script>
+// @flow
 import map from 'lodash/map';
-    import filter from 'lodash/filter';
-    import isObject from 'lodash/isObject';
 import { mapState } from 'vuex';
+import type { Route } from 'vue-router';
 import FileManagerFileRow from '../components/filemanager/FileManagerFileRow';
 import FileManagerFolderRow from '../components/filemanager/FileManagerFolderRow';
+import { getDirectoryContents, DirectoryContentsResponse } from '../../../api/server/getDirectoryContents';
 
 export default {
     name: 'file-manager-page',
@@ -61,13 +62,13 @@
          * Configure the breadcrumbs that display on the filemanager based on the directory that the
          * user is currently in.
          */
-            breadcrumbs: function () {
+        breadcrumbs: function (): Array<Object> {
-                const directories = this.currentDirectory.replace(/^\/|\/$/, '').split('/');
+            const directories: Array<string> = this.currentDirectory.replace(/^\/|\/$/, '').split('/');
             if (directories.length < 1 || !directories[0]) {
                 return [];
             }
 
-                return map(directories, function (value, key) {
+            return map(directories, function (value: string, key: number) {
                 if (key === directories.length - 1) {
                     return { directoryName: value };
                 }
@@ -77,21 +78,21 @@
                     path: directories.slice(0, key + 1).join('/'),
                 };
             });
-            }
+        },
     },
 
     watch: {
         /**
          * When the route changes reload the directory.
          */
-            '$route': function (to) {
+        '$route': function (to: Route) {
             this.currentDirectory = to.params.path || '/';
         },
 
         /**
          * Watch the current directory setting and when it changes update the file listing.
          */
-            currentDirectory: function () {
+        currentDirectory: function (): void {
             this.listDirectory();
         },
 
@@ -99,11 +100,11 @@
          * When we reconnect to the Daemon make sure we grab a listing of all of the files
          * so that the error message disappears and we then load in a fresh listing.
          */
-            connected: function () {
+        connected: function (): void {
             if (this.connected) {
                 this.listDirectory();
             }
-            }
+        },
     },
 
     data: function () {
@@ -126,42 +127,29 @@
         /**
          * List the contents of a directory.
          */
-            listDirectory: function () {
+        listDirectory: function (): void {
             this.loading = true;
 
-                window.axios.get(this.route('server.files', {
+            const directory: string = encodeURI(this.currentDirectory.replace(/^\/|\/$/, ''));
-                    server: this.$route.params.id,
+            getDirectoryContents(this.$route.params.id, directory)
-                    directory: encodeURI(this.currentDirectory.replace(/^\/|\/$/, '')),
+                .then((response: DirectoryContentsResponse) => {
-                }))
+                    this.files = response.files;
-                    .then((response) => {
+                    this.directories = response.directories;
-                        this.files = filter(response.data.contents, function (o) {
+                    this.editableFiles = response.editable;
-                            return o.file;
-                        });
-
-                        this.directories = filter(response.data.contents, function (o) {
-                            return o.directory;
-                        });
-
-                        this.editableFiles = response.data.editable;
                     this.errorMessage = null;
                 })
-                    .catch(err => {
+                .catch((err: string|Object) => {
-                        console.error({err});
+                    if (err instanceof String) {
-                        if (err.response.status === 404) {
+                        this.errorMessage = err;
-                            this.errorMessage = 'The directory you requested could not be located on the server.';
                         return;
                     }
 
-                        if (err.response.data && isObject(err.response.data.errors)) {
+                    console.error('An error was encountered while processing this request.', { err });
-                            err.response.data.errors.forEach(error => {
-                                this.errorMessage = error.detail;
-                            });
-                        }
                 })
-                    .finally(() => {
+                .then(() => {
                     this.loading = false;
                 });
         },
-        }
+    },
 };
 </script>

resources/assets/scripts/helpers/index.js

@@ -1,3 +1,4 @@
+// @flow
 import format from 'date-fns/format';
 
 /**
@@ -7,13 +8,13 @@ import format from 'date-fns/format';
  * @param {Number} bytes
  * @return {String}
  */
-export function readableSize (bytes) {
+export function readableSize (bytes: number): string {
     if (Math.abs(bytes) < 1024) {
         return `${bytes} Bytes`;
     }
 
-    let u = -1;
+    let u: number = -1;
-    const units = ['KiB', 'MiB', 'GiB', 'TiB'];
+    const units: Array<string> = ['KiB', 'MiB', 'GiB', 'TiB'];
 
     do {
         bytes /= 1024;
@@ -29,6 +30,6 @@ export function readableSize (bytes) {
  * @param {String} date
  * @return {String}
  */
-export function formatDate (date) {
+export function formatDate (date: string): string {
     return format(date, 'MMM D, YYYY [at] HH:MM');
 }

resources/assets/styles/components/filemanager.css

@@ -15,7 +15,7 @@
     }
 
     &.clickable {
-      @apply .cursor-pointer .no-underline;
+      @apply .no-underline;
     }
 
     &.active-selection, &.clickable:hover {