Merge pull request #4200 from Mxchaeltrxn/copyBugReportBtn

Copy bug report btn

packages/app/resource/locales/en_US/admin/admin.json

@@ -11,7 +11,13 @@
     "installed_version": "Installed version",
     "list_of_env_vars":"List of environment variables",
     "env_var_priority": "For environment variables other than security, the value of the database is obtained preferentially.",
-    "about_security": "Check <a href='/admin/security'>Securtiy Settings</a> for security environment variables."
+    "about_security": "Check <a href='/admin/security'>Security Settings</a> for security environment variables.",
+    "copy_prefilled_host_information": {
+      "default": "Copy prefilled host information",
+      "done": "Copied to clipboard!"
+    },
+    "bug_report": "Submitting a bug report",
+    "submit_bug_report": "<a href='https://github.com/weseek/growi/issues/new?assignees=&labels=bug&template=bug-report.md&title=Bug%3A' target='_blank' rel='noreferrer'>then submit your issue to GitHub.</a>"
   },
   "app_setting": {
     "site_name": "Site name",

packages/app/src/client/services/AdminHomeContainer.js

@@ -18,12 +18,19 @@ export default class AdminHomeContainer extends Container {
 
     this.appContainer = appContainer;
 
+    this.copyStateValues = {
+      DEFAULT: 'default',
+      DONE: 'done',
+    };
+    this.timer = null;
+
     this.state = {
       retrieveError: null,
       growiVersion: '',
       nodeVersion: '',
       npmVersion: '',
       yarnVersion: '',
+      copyState: this.copyStateValues.DEFAULT,
       installedPlugins: [],
     };
 
@@ -36,6 +43,10 @@ export default class AdminHomeContainer extends Container {
     return 'AdminHomeContainer';
   }
 
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
   /**
    * retrieve admin home data
    */
@@ -44,14 +55,15 @@ export default class AdminHomeContainer extends Container {
       const response = await this.appContainer.apiv3.get('/admin-home/');
       const { adminHomeParams } = response.data;
 
-      this.setState({
+      this.setState(prevState => ({
+        ...prevState,
         growiVersion: adminHomeParams.growiVersion,
         nodeVersion: adminHomeParams.nodeVersion,
         npmVersion: adminHomeParams.npmVersion,
         yarnVersion: adminHomeParams.yarnVersion,
         installedPlugins: adminHomeParams.installedPlugins,
         envVars: adminHomeParams.envVars,
-      });
+      }));
     }
     catch (err) {
       logger.error(err);
@@ -59,4 +71,40 @@ export default class AdminHomeContainer extends Container {
     }
   }
 
+  /**
+   * sets button text when copying system information
+   */
+  onCopyPrefilledHostInformation() {
+    this.setState(prevState => ({
+      ...prevState,
+      copyState: this.copyStateValues.DONE,
+    }));
+
+    this.timer = setTimeout(() => {
+      this.setState(prevState => ({
+        ...prevState,
+        copyState: this.copyStateValues.DEFAULT,
+      }));
+    }, 500);
+  }
+
+  /**
+   * generates prefilled host information as markdown
+   */
+  generatePrefilledHostInformationMarkdown() {
+    return `| item     | version |
+| ---      | --- |
+|OS        ||
+|GROWI     |${this.state.growiVersion}|
+|node.js   |${this.state.nodeVersion}|
+|npm       |${this.state.npmVersion}|
+|yarn      |${this.state.yarnVersion}|
+|Using Docker|yes/no|
+|Using [growi-docker-compose][growi-docker-compose]|yes/no|
+
+[growi-docker-compose]: https://github.com/weseek/growi-docker-compose
+
+*(Accessing https://{GROWI_HOST}/admin helps you to fill in above versions)*`;
+  }
+
 }

packages/app/src/components/Admin/AdminHome/AdminHome.jsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import loggerFactory from '~/utils/logger';
 
 import { toastError } from '~/client/util/apiNotification';
@@ -63,6 +64,26 @@ class AdminHome extends React.Component {
             {adminHomeContainer.state.envVars && <EnvVarsTable envVars={adminHomeContainer.state.envVars} />}
           </div>
         </div>
+
+        <div className="row mb-5">
+          <div className="col-md-12">
+            <h2 className="admin-setting-header">{t('admin:admin_top.bug_report')}</h2>
+            <p>
+              <CopyToClipboard
+                text={adminHomeContainer.generatePrefilledHostInformationMarkdown()}
+                onCopy={() => adminHomeContainer.onCopyPrefilledHostInformation()}
+              >
+                <button type="button" className="btn btn-primary">
+                  {adminHomeContainer.state.copyState === adminHomeContainer.copyStateValues.DEFAULT
+                    ? t('admin:admin_top:copy_prefilled_host_information:default')
+                    : t('admin:admin_top:copy_prefilled_host_information:done')}
+                </button>
+              </CopyToClipboard>{' '}
+              {/* eslint-disable-next-line react/no-danger */}
+              <span dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
+            </p>
+          </div>
+        </div>
       </Fragment>
     );
   }