Add copy prefilled bug report to clipboard functionality (AdminHome)

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'>Securtiy Settings</a> for security environment variables.",
+    "copy_bug_report": {
+      "default": "Copy prefilled bug report",
+      "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

@@ -24,9 +24,12 @@ export default class AdminHomeContainer extends Container {
       nodeVersion: '',
       npmVersion: '',
       yarnVersion: '',
+      copyState: 'default',
       installedPlugins: [],
     };
 
+    this.timer = null;
+
   }
 
   /**
@@ -36,6 +39,10 @@ export default class AdminHomeContainer extends Container {
     return 'AdminHomeContainer';
   }
 
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
   /**
    * retrieve admin home data
    */
@@ -44,14 +51,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 +67,97 @@ export default class AdminHomeContainer extends Container {
     }
   }
 
+  /**
+   * used to set button text when copying bug report
+   */
+  onCopyBugReport() {
+    this.setState(prevState => ({
+      ...prevState,
+      copyState: 'done',
+    }));
+
+    this.timer = setTimeout(() => {
+      this.setState(prevState => ({
+        ...prevState,
+        copyState: 'default',
+      }));
+    }, 500);
+  }
+
+  /**
+   * generates bug report with prefilled system information
+   */
+  generatePrefilledBugReport() {
+    return `Environment
+------------
+
+### Host
+
+| 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)*
+
+
+### Client
+
+| item     | version |
+| ---      | --- |
+|OS        ||
+|browser   |x.y.z|
+
+
+
+How to reproduce? (再現手順)
+---------------------------
+
+1. process 1
+1. process 2
+1. process 3
+    \`\`\`bash
+
+    \`\`\`
+
+1. process 4
+    \`\`\`bash
+
+    \`\`\`
+
+What happens? (症状)
+---------------------
+
+- symptom 1
+- symptom 2
+
+\`\`\`
+Stack Trace
+\`\`\`
+
+
+
+What is the expected result? (期待される動作)
+-------------------------------------------
+
+-
+-
+
+
+
+Note
+----
+
+-
+-
+`;
+  }
+
 }

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,21 @@ 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.generatePrefilledBugReport()} onCopy={() => adminHomeContainer.onCopyBugReport()}>
+                <button type="button" className="btn btn-primary">
+                  {adminHomeContainer.state.copyState === 'default' ? t('admin:admin_top:copy_bug_report:default') : t('admin:admin_top:copy_bug_report:done')}
+                </button>
+              </CopyToClipboard>{' '}
+              {/* eslint-disable-next-line react/no-danger */}
+              <span dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
+            </p>
+          </div>
+        </div>
       </Fragment>
     );
   }