t3-innovation-network · excelsior · Feb 13, 2023
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -282,11 +282,6 @@ a:hover {
   border-top: 3px solid $dashboard-background-color-highlight !important;
 }
 
-.cp-container {
-  margin-left: 10% !important;
-  margin-right: 10% !important;
-}
-
 .cp-step-row {
   margin-bottom: 60%;
 }

diff --git a/app/controllers/api/v1/configuration_profile_actions_controller.rb b/app/controllers/api/v1/configuration_profile_actions_controller.rb
@@ -15,6 +15,15 @@ def call_action
 
     @instance.send(action)
     render json: @instance.reload, include: [standards_organizations: {include: :users}]
+  rescue CpState::NotYetReadyForTransition => e
+    message =
+      if @instance.incomplete?
+        ConfigurationProfile.validate_structure(@instance.structure, "complete")
+      else
+        e.message
+      end
+
+    render json: {message: message}, status: :internal_server_error
   end
 
   private

diff --git a/app/controllers/concerns/recoverable.rb b/app/controllers/concerns/recoverable.rb
@@ -15,6 +15,7 @@ def self.included(this_class)
     this_class.class_eval do
       errors_and_messages.each do |error, config|
         rescue_from error.to_s.constantize do |e|
+          byebug
           error_message =
             if config[:include_original_error_message]
               t(config[:message_key], message: e.message)

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/AbstractClasses.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/AbstractClasses.jsx
@@ -87,6 +87,16 @@ const AbstractClasses = () => {
     );
   };
 
+  const handleNameBlur = () => {
+    if (!name) {
+      dispatch(setEditCPErrors("File Name can't be blank"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    saveChanges();
+  };
+
   const saveChanges = async (data = null) => {
     dispatch(setSavingCP(true));
 
@@ -138,8 +148,8 @@ const AbstractClasses = () => {
             className="form-control input-lg"
             placeholder="The name of the skos file."
             value={name}
-            onChange={(e) => setName(event.target.value)}
-            onBlur={() => saveChanges()}
+            onChange={e => setName(e.target.value.trim())}
+            onBlur={handleNameBlur}
             autoFocus
           />
         </div>
@@ -155,7 +165,7 @@ const AbstractClasses = () => {
             placeholder="The version of the skos file"
             maxLength={5}
             value={version}
-            onChange={(e) => setVersion(event.target.value)}
+            onChange={e => setVersion(e.target.value.trim())}
             onBlur={() => saveChanges()}
           />
         </div>
@@ -188,7 +198,7 @@ const AbstractClasses = () => {
               type="url"
               className="form-control input-lg"
               value={origin}
-              onChange={(e) => setOrigin(e.target.value)}
+              onChange={e => setOrigin(e.target.value.trim())}
               pattern="https://.*"
               size="30"
               placeholder="https://example.com"

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/Agents.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/Agents.jsx
@@ -13,6 +13,7 @@ import {
   SmallRemovableTab,
   TabGroup,
 } from "../utils";
+import { EMAIL_REGEX } from "../../../../helpers/Constants";
 
 const Agents = () => {
   const leadMapperRef = useRef(false);
@@ -92,6 +93,31 @@ const Agents = () => {
     updateAgentsData();
   };
 
+  const handleEmailBlur = () => {
+    if (!email) {
+      dispatch(setEditCPErrors("Agent Email can't be blank"));
+      return;
+    }
+
+    if (!email.match(EMAIL_REGEX)) {
+      dispatch(setEditCPErrors("Agent Email is invalid"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    saveChanges();
+  };
+
+  const handleNameBlur = () => {
+    if (!fullname) {
+      dispatch(setEditCPErrors("Agent Full Name can't be blank"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    saveChanges();
+  };
+
   const handleRemoveAgent = () => {
     setConfirmationVisible(false);
     let localCP = currentCP;
@@ -158,10 +184,8 @@ const Agents = () => {
               name="fullname"
               placeholder="The name of this agent"
               value={fullname || ""}
-              onChange={(event) => {
-                setFullname(event.target.value);
-              }}
-              onBlur={saveChanges}
+              onChange={e => setFullname(e.target.value.trim())}
+              onBlur={handleNameBlur}
               autoFocus
             />
           </div>
@@ -174,16 +198,13 @@ const Agents = () => {
           </label>
           <div className="input-group input-group">
             <input
-              id="email"
               type="text"
               className="form-control input-lg"
               name="agentEmail"
               placeholder="The email of this agent"
               value={email || ""}
-              onChange={(event) => {
-                setEmail(event.target.value);
-              }}
-              onBlur={saveChanges}
+              onChange={e => setEmail(e.target.value.trim())}
+              onBlur={handleEmailBlur}
             />
           </div>
         </div>

diff --git a/...pt/components/dashboard/configuration-profiles/edit/CompleteStructureValidationErrors.jsx b/...pt/components/dashboard/configuration-profiles/edit/CompleteStructureValidationErrors.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+const CompleteStructureValidationErrors = () => {
+  const { completeStructureValidationErrors } = useSelector((state) => state.currentCP)
+
+  if (!completeStructureValidationErrors?.length) {
+    return null;
+  }
+
+  return (
+    <div className="alert alert-warning pt-3">
+      <h6>
+        The following issues prevent the configuration profile from being promoted to the "Complete" state:
+      </h6>
+
+      <ol>
+        {completeStructureValidationErrors.map((error, index) => (
+          <li key={index}>{error}</li>
+        ))}
+      </ol>
+    </div>
+  );
+};
+
+export default CompleteStructureValidationErrors;
diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/ConceptSchemeMetadata.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/ConceptSchemeMetadata.jsx
@@ -149,7 +149,7 @@ const ConceptSchemeMetadata = ({ schemaFileIdx, conceptSchemeIdx }) => {
             id="origin"
             value={origin || ""}
             onChange={(event) => {
-              setOrigin(event.target.value);
+              setOrigin(event.target.value.trim());
             }}
             onBlur={() =>
               handleUrlBlur(

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/DSOMetadata.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/DSOMetadata.jsx
@@ -7,6 +7,7 @@ import {
 } from "../../../../actions/configurationProfiles";
 import { validURL } from "../../../../helpers/URL";
 import updateCP from "../../../../services/updateCP";
+import { EMAIL_REGEX } from "../../../../helpers/Constants";
 
 const DSOMetaData = ({ dsoData }) => {
   const [name, setName] = useState("");
@@ -27,6 +28,31 @@ const DSOMetaData = ({ dsoData }) => {
     setStandardsPage(standardsPage);
   }, [dsoData]);
 
+  const handleEmailBlur = () => {
+    if (!email) {
+      dispatch(setEditCPErrors("DSO Email can't be blank"));
+      return;
+    }
+
+    if (!email.match(EMAIL_REGEX)) {
+      dispatch(setEditCPErrors("DSO Email is invalid"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    handleBlur();
+  };
+
+  const handleNameBlur = () => {
+    if (!name) {
+      dispatch(setEditCPErrors("DSO Name can't be blank"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    handleBlur();
+  };
+
   const handleUrlBlur = (url) => {
     if (!validURL(url)) {
       dispatch(
@@ -85,10 +111,8 @@ const DSOMetaData = ({ dsoData }) => {
             id="name"
             placeholder="The name of the organization"
             value={name || ""}
-            onChange={(event) => {
-              setName(event.target.value);
-            }}
-            onBlur={handleBlur}
+            onChange={e => setName(e.target.value.trim())}
+            onBlur={handleNameBlur}
             autoFocus
           />
         </div>
@@ -101,15 +125,12 @@ const DSOMetaData = ({ dsoData }) => {
         </label>
         <div className="input-group input-group">
           <input
-            type="email"
             className="form-control input-lg"
             id="email"
             placeholder="The email of the organization"
             value={email || ""}
-            onChange={(event) => {
-              setEmail(event.target.value);
-            }}
-            onBlur={handleBlur}
+            onChange={e => setEmail(e.target.value.trim())}
+            onBlur={handleEmailBlur}
           />
         </div>
       </div>

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/EditConfigurationProfile.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/EditConfigurationProfile.jsx
@@ -18,6 +18,7 @@ import {
 } from "../../../../actions/configurationProfiles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faHome } from "@fortawesome/free-solid-svg-icons";
+import CompleteStructureValidationErrors from "./CompleteStructureValidationErrors";
 
 const EditConfigurationProfile = (props) => {
   const [loading, setLoading] = useState(true);
@@ -82,15 +83,15 @@ const EditConfigurationProfile = (props) => {
       ) : (
         <div className="col mt-5">
           {errors && <AlertNotice message={errors} />}
-          <div className="row cp-container justify-content-center h-100">
-            <div className="col-3">
+          <div className="row h-100">
+            <div className="col-2">
               <div className="row justify-content-center h-100">
                 <div className="col">
                   <StepsAside />
                 </div>
               </div>
             </div>
-            <div className="col-9">
+            <div className="col-7">
               <div className="card border-top-dashboard-highlight h-100">
                 <div className="card-body d-flex flex-column">
                   <div className="row justify-content-center">
@@ -105,6 +106,9 @@ const EditConfigurationProfile = (props) => {
                 </div>
               </div>
             </div>
+            <div className="col-3">
+              <CompleteStructureValidationErrors />
+            </div>
           </div>
         </div>
       )}

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/MappingPredicates.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/MappingPredicates.jsx
@@ -84,6 +84,16 @@ const MappingPredicates = () => {
     );
   };
 
+  const handleNameBlur = () => {
+    if (!name) {
+      dispatch(setEditCPErrors("File Name can't be blank"));
+      return;
+    }
+
+    dispatch(setEditCPErrors(null));
+    saveChanges();
+  };
+
   const handlePredicateChange = (e) => {
     const { value } = e.target;
     setPredicateStrongestMatch(value);
@@ -144,8 +154,8 @@ const MappingPredicates = () => {
             className="form-control input-lg"
             placeholder="The name of the skos file."
             value={name}
-            onChange={(e) => setName(e.target.value)}
-            onBlur={() => saveChanges()}
+            onChange={e => setName(e.target.value.trim())}
+            onBlur={handleNameBlur}
             autoFocus
           />
         </div>
@@ -194,7 +204,7 @@ const MappingPredicates = () => {
               type="url"
               className="form-control input-lg"
               value={origin}
-              onChange={(e) => setOrigin(e.target.value)}
+              onChange={e => setOrigin(e.target.value.trim())}
               pattern="https://.*"
               size="30"
               placeholder="https://example.com"

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/SchemaFileMetadata.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/SchemaFileMetadata.jsx
@@ -175,7 +175,7 @@ const SchemaFileMetadata = ({ schemaFileIdx }) => {
             id="origin"
             value={origin || ""}
             onChange={(event) => {
-              setOrigin(event.target.value);
+              setOrigin(event.target.value.trim());
             }}
             onBlur={() =>
               handleUrlBlur(

diff --git a/app/javascript/components/dashboard/configuration-profiles/edit/StepsAside.jsx b/app/javascript/components/dashboard/configuration-profiles/edit/StepsAside.jsx
@@ -7,19 +7,19 @@ const StepsAside = () => {
   const steps = [
     {
       number: 1,
-      description: "General data about the configuration profile",
+      description: "General info",
     },
     {
       number: 2,
-      description: "Select the mapping predicates",
+      description: "Mapping predicates",
     },
     {
       number: 3,
-      description: "Select the abstract classes",
+      description: "Abstract classes",
     },
     {
       number: 4,
-      description: "DSO's information",
+      description: "DSOs",
     },
   ];
 
@@ -30,7 +30,7 @@ const StepsAside = () => {
       {steps.map((step) => {
         return (
           <div
-            className="row justify-content-center cp-step-row"
+            className="row cp-step-row"
             key={step.number}
           >
             <div className="col-8">{step.description}</div>
@@ -40,7 +40,7 @@ const StepsAside = () => {
                   ? "bg-dashboard-background-highlight col-background"
                   : "border-color-dashboard col-dashboard-highlight"
               } p-3 text-center`}
-              style={{ maxWidth: "50px", height: "50px" }}
+              style={{ height: "50px", lineHeight: 1, maxWidth: "50px" }}
               onClick={() => dispatch(setStep(step.number))}
             >
               {step.number}

diff --git a/app/javascript/helpers/Constants.js b/app/javascript/helpers/Constants.js
@@ -13,3 +13,5 @@ export const APP_DOMAIN = process.env.APP_DOMAIN;
  * JWT variables to encode/decode secret values
  */
 export const PRIVATE_KEY = process.env.PRIVATE_KEY;
+
+export const EMAIL_REGEX = "^\\S+@\\S+\\.\\S+$";