Improving appearance of simple environment edit form (adding environm…

…ent info).
ReCodEx · Apr 13, 2019 · ca1231e · ca1231e
1 parent 5184625
commit ca1231e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/src/components/forms/EditEnvironmentSimpleForm/EditEnvironmentSimpleForm.js b/src/components/forms/EditEnvironmentSimpleForm/EditEnvironmentSimpleForm.js
@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, Field } from 'redux-form';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
-import { Alert, Grid, Row, Col } from 'react-bootstrap';
+import { Alert, Grid, Row, Col, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import { CheckboxField } from '../Fields';
 import SubmitButton from '../SubmitButton';
 import Button from '../../widgets/FlatButton';
-import { RefreshIcon } from '../../icons';
+import Icon, { RefreshIcon, InfoIcon } from '../../icons';
 import { STANDALONE_ENVIRONMENTS } from '../../../helpers/exercise/environments';
 
 class EditEnvironmentSimpleForm extends Component {
@@ -33,7 +33,41 @@ class EditEnvironmentSimpleForm extends Component {
               .sort((a, b) => a.longName.localeCompare(b.longName, locale))
               .map((environment, i) => (
                 <Col key={i} xs={12} sm={6}>
-                  <Field name={`${environment.id}`} component={CheckboxField} onOff label={environment.longName} />
+                  <Field
+                    name={`${environment.id}`}
+                    component={CheckboxField}
+                    onOff
+                    label={
+                      <span>
+                        {environment.longName}
+
+                        <OverlayTrigger
+                          placement="bottom"
+                          overlay={
+                            <Tooltip id={`environment-${environment.id}`}>
+                              {environment.description} {environment.extensions}
+                            </Tooltip>
+                          }>
+                          <InfoIcon gapLeft className="text-primary" timid />
+                        </OverlayTrigger>
+
+                        {STANDALONE_ENVIRONMENTS.includes(environment.id) && (
+                          <OverlayTrigger
+                            placement="bottom"
+                            overlay={
+                              <Tooltip id={`environment-standalone-${environment.id}`}>
+                                <FormattedMessage
+                                  id="app.editEnvironmentSimpleForm.standaloneEnvironment"
+                                  defaultMessage="Separated runtime environment"
+                                />
+                              </Tooltip>
+                            }>
+                            <Icon icon={['far', 'star']} smallGapLeft className="text-warning half-opaque" />
+                          </OverlayTrigger>
+                        )}
+                      </span>
+                    }
+                  />
                 </Col>
               ))}
           </Row>

diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -220,6 +220,7 @@
   "app.editEnvironmentConfig.warnings.ambiguousVariable": "Tato proměnná je definovaná ve více pipelines. Nastavená hodnota bude použita ve všech.",
   "app.editEnvironmentConfig.warnings.noPipelinesVariables": "Zatím nejsou vybrané žádné pipelines. Jména proměnných proto není možné verifikovat.",
   "app.editEnvironmentConfig.warnings.unknownVariable": "Tato proměnná není definována v žádné pipeline.",
+  "app.editEnvironmentSimpleForm.standaloneEnvironment": "Separované běhové prostředí",
   "app.editEnvironmentSimpleForm.submit": "Uložit prostředí",
   "app.editEnvironmentSimpleForm.submitting": "Ukládám...",
   "app.editEnvironmentSimpleForm.success": "Konfigurace byla změněna.",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -220,6 +220,7 @@
   "app.editEnvironmentConfig.warnings.ambiguousVariable": "This variable is defined in multiple pipelines. The value will be used in all of them.",
   "app.editEnvironmentConfig.warnings.noPipelinesVariables": "There are no pipelines set. Name of the variables may not be verified.",
   "app.editEnvironmentConfig.warnings.unknownVariable": "This variable is not defined in any pipeline.",
+  "app.editEnvironmentSimpleForm.standaloneEnvironment": "Separated runtime environment",
   "app.editEnvironmentSimpleForm.submit": "Save Environments",
   "app.editEnvironmentSimpleForm.submitting": "Saving Environments...",
   "app.editEnvironmentSimpleForm.success": "Environments Saved.",

diff --git a/src/locales/whitelist_en.json b/src/locales/whitelist_en.json
@@ -220,6 +220,7 @@
   "app.editEnvironmentConfig.warnings.ambiguousVariable",
   "app.editEnvironmentConfig.warnings.noPipelinesVariables",
   "app.editEnvironmentConfig.warnings.unknownVariable",
+  "app.editEnvironmentSimpleForm.standaloneEnvironment",
   "app.editEnvironmentSimpleForm.submit",
   "app.editEnvironmentSimpleForm.submitting",
   "app.editEnvironmentSimpleForm.success",