fix(core/serverGroup): Ensure failsafe SpEL expressions are provided

While creating the deployment payload, it is possible to provide SpEL expressions for stack, detail etc and
if these expressions evaluate to invalid values, then that could lead to deployment failures. This commit
introduces a warning in the server group create/clone wizard when failsafe SpEL expressions are not provided.

app/scripts/modules/core/src/serverGroup/configure/common/ServerGroupNamePreview.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isEmpty } from 'lodash';
 
 export interface IServerGroupNamePreviewProps {
   createsNewCluster: boolean;
@@ -8,13 +9,38 @@ export interface IServerGroupNamePreviewProps {
   navigateToLatestServerGroup: () => void;
 }
 
+const SPEL_EXPRESSION_REGEX = /\${[^}]+}/g;
+const SPEL_WITH_DEFAULT_AND_ALPHANUMERICAL_REGEX = /^\${\s*#alphanumerical\(.*\)\s*\?:\s*[^\s]+\s*}$/;
+
 export const ServerGroupNamePreview = ({
   createsNewCluster,
   latestServerGroupName,
   mode,
   namePreview,
   navigateToLatestServerGroup,
 }: IServerGroupNamePreviewProps) => {
+  const spelMatches = namePreview.match(SPEL_EXPRESSION_REGEX);
+  if (!isEmpty(spelMatches)) {
+    const anyInvalidSpel = [...spelMatches].some((match) => !SPEL_WITH_DEFAULT_AND_ALPHANUMERICAL_REGEX.test(match));
+    return (
+      <div className="form-group">
+        <div className="col-md-12">
+          <div className={`well-compact ${anyInvalidSpel ? 'alert alert-warning' : 'well'}`}>
+            <h5 className="text-center">
+              <p>Your server group cluster will be determined by evaluating the expressions dynamically</p>
+              {anyInvalidSpel && (
+                <div className="text-left">
+                  NOTE: Please wrap your expression with #alphanumerical and provide a default value to make sure only
+                  valid values are used after evaluation. i.e {"${#alphanumerical(yourExpression) ?: 'defaultValue'}"}
+                </div>
+              )}
+            </h5>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const showPreviewAsWarning = (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);
 
   return (