Push style tweaks, get rid of unkeyed list item warnings

Author: e-halinen

src/renderer/components/HelmetProject/Runtime/Runtime.jsx

@@ -143,27 +143,27 @@ const Runtime = ({
       <div className="Runtime__scenarios-heading">Ladatut skenaariot</div>
       <div className="Runtime__scenarios">
         {/* Create table of all scenarios "<Button-To-Add-As-Runnable> <Button-To-Open-Configuration>" */}
-        {scenarios.map((s) => {
+        {scenarios.map((s, index) => {
           // Component for the tooltip showing scenario settings
           const tooltipContent = (scenario) => {
             const filteredScenarioSettings = _.pickBy(scenario, (settingValue, settingKey) => {
               return visibleTooltipProperties.includes(settingKey);
             })
             return (
-              <div>
+              <div key={index}>
                 {
-                  Object.entries(filteredScenarioSettings).map((property) => {
+                  Object.entries(filteredScenarioSettings).map((property, index) => {
 
                     if(property[0] === 'overriddenProjectSettings') {
 
                       return areGlobalSettingsOverridden(property[1]) 
                        ?
-                        <div>
+                        <div key={index}>
                           <h3>Overridden settings:</h3>
                           { 
-                            Object.entries(property[1]).map(overrideSetting => {
+                            Object.entries(property[1]).map((overrideSetting, index) => {
                               return overrideSetting[1] != null 
-                              ? <p style={{ marginLeft: "1rem", overflow: "hidden" }}>{getPropertyForDisplayString(overrideSetting)}</p>
+                              ? <p key={index} style={{ marginLeft: "1rem", overflow: "hidden" }}>{getPropertyForDisplayString(overrideSetting)}</p>
                               : ""
                             })
                           }
@@ -172,7 +172,7 @@ const Runtime = ({
                     }
 
                     return(
-                      <p>{getPropertyForDisplayString(property)}</p>
+                      <p key={index}>{getPropertyForDisplayString(property)}</p>
                     )})}
               </div>
             )

src/renderer/components/Settings/Settings.css

@@ -131,7 +131,11 @@
 }
 
 .Settings__env_option_text {
-    width: 100%;
+    width: 80%;
+    font-weight: 500;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
 }
 
 .Settings__emme_version_group {
@@ -163,16 +167,16 @@
 }
 
 .Settings__env_option_btn {
-    width: 4rem;
+    width: 1rem;
     height: 1rem;
     margin-left: 1.5rem;
-    margin-bottom: 5px;
     font-size: 12px;
     border: none;
 }
 
-.Settings__btn_disabled {
+.Settings__env_unselected {
     color: #888888;
+    font-weight: 100;
 }
 
 .Settings__btn_disabled:hover {

src/renderer/components/Settings/Settings.jsx

@@ -8,11 +8,14 @@ import classNames from 'classnames';
 const EnvironmentOption = ({
   envPath, isSelected, setPath, removePath,
 }) => {
+
+  //Splits the env using OS-spesific delimiter / or \ and then filters out every other substring except the Emme version folder name.
+  const emmeVersionName = envPath.split(path.sep).filter((subStr) => subStr.startsWith('Emme-'));
+
   return (
-    <div className="Settings__environment_option">
-      <p className='Settings__env_option_text'>{envPath}</p>
-      <button className={classNames('Settings__env_option_btn', { 'Settings__btn_disabled': isSelected})} disabled={isSelected} onClick={() => setPath(envPath)}>{isSelected ? 'Käytössä' : 'Valitse'}</button>
-      <button className={classNames('Settings__env_option_btn', 'Settings__env_option_remove')} onClick={() => removePath(envPath)}>Poista</button>
+    <div className="Settings__environment_option" key={envPath}>
+      <p className={classNames('Settings__env_option_text', { 'Settings__env_unselected': !isSelected})} onClick={() => setPath(envPath)}>{Array.isArray(emmeVersionName) ? emmeVersionName.toString() : envPath}</p>
+      <button className={classNames('Settings__env_option_btn', 'Settings__env_option_remove')} onClick={() => removePath(envPath)}>x</button>
     </div>
   )
 }
@@ -43,7 +46,7 @@ const Settings = ({
         <div className="Settings__dialog-input-group">
           <span className="Settings__pseudo-label">Käytettävät Python-ympäristöt:</span>
           { Array.isArray(emmePythonEnvs) && emmePythonEnvs.length > 0 && (emmePythonEnvs.map((env, index) => { return (
-            <div>
+            <div key={index}>
               <EnvironmentOption envPath={env} isSelected={emmePythonPath === env}
              setPath={setEMMEPythonPath} 
              removePath={removeFromEMMEPythonEnvs}/>