Addressing feedback (#166)

* Align icons on detail page action buttons
* Add validation for raw arm template url
* Limit the no of chars for Title and Description fields
* Padding changes
* Don't show ARM template tab if sample doesn't have ARM template

ServerlessLibraryAPI/ClientApp/src/components/Contribute/ContributionForm.js

@@ -39,6 +39,8 @@ class ContributionForm extends Component {
     this.onAddButtonClick = this.onAddButtonClick.bind(this);
     this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
+    this.onTitleChange = this.onTitleChange.bind(this);
+    this.onDescriptionChange = this.onDescriptionChange.bind(this);
     this.onDismissDialog = this.onDismissDialog.bind(this);
     this.validateForm = this.getFormValidationErrors.bind(this);
   }
@@ -75,6 +77,24 @@ class ContributionForm extends Component {
     this.setState({ [name]: newValue });
   }
 
+  onTitleChange(event, newValue) {
+    if (!newValue || newValue.length <= 80) {
+      this.setState({ title: newValue || "" });
+    } else {
+      // this block is needed because of Fabric bug #1350
+      this.setState({ title: this.state.title });
+    }
+  }
+
+  onDescriptionChange(event, newValue) {
+    if (!newValue || newValue.length <= 300) {
+      this.setState({ description: newValue || "" });
+    } else {
+      // this block is needed because of Fabric bug #1350
+      this.setState({ description: this.state.description });
+    }
+  }
+
   getFormValidationErrors(sample) {
     let errors = [];
     if (sample.title.length === 0) {
@@ -212,7 +232,7 @@ class ContributionForm extends Component {
                   required={true}
                   placeholder="Enter the title of your sample"
                   value={this.state.title}
-                  onChange={this.handleInputChange}
+                  onChange={this.onTitleChange}
                 />
                 <TextField
                   className="input-field-container"
@@ -233,7 +253,7 @@ class ContributionForm extends Component {
                   multiline
                   placeholder="Briefly describe your sample (300 characters maximum)"
                   value={this.state.description}
-                  onChange={this.handleInputChange}
+                  onChange={this.onDescriptionChange}
                 />
               </div>
               <div className="contribution-form-fields-container">

ServerlessLibraryAPI/ClientApp/src/components/DetailView/ActionBar.scss

@@ -18,12 +18,11 @@
   font-size: 12px;
   width: 13px;
   height: 11px;
+  margin-top: 2px;
 }
 
 .githubicon {
-  font-size: 12px;
-  height: 11px;
-  width: 13px;
+  @extend .fabric-icon-link;
   fill: currentColor;
 }
 

ServerlessLibraryAPI/ClientApp/src/components/DetailView/DetailPageContent.js

@@ -129,17 +129,19 @@ class DetailPageContent extends Component {
               </div>
             </div>
           </PivotItem>
-          <PivotItem headerText="ARM template" itemKey="armtemplate">
-            <div className="pivot-item-container">
-              <div className="scrollablePane-wrapper">
-                <ScrollablePane>
-                  <div className="armtemplate-content">
-                    <pre>{armTemplateText}</pre>
-                  </div>
-                </ScrollablePane>
+          {this.props.template && (
+            <PivotItem headerText="ARM template" itemKey="armtemplate">
+              <div className="pivot-item-container">
+                <div className="scrollablePane-wrapper">
+                  <ScrollablePane>
+                    <div className="armtemplate-content">
+                      <pre>{armTemplateText}</pre>
+                    </div>
+                  </ScrollablePane>
+                </div>
               </div>
-            </div>
-          </PivotItem>
+            </PivotItem>
+          )}
         </Pivot>
       </div>
     );

ServerlessLibraryAPI/ClientApp/src/components/MetricBar/MetricBar.css

@@ -1,8 +1,8 @@
 .metrics {
   margin-top: 7px;
+  margin-bottom: 7px;
   font-size: 12px;
   line-height: 16px;
   color: #555555;
-  margin-bottom: 4px;
   display: flex;
 }

ServerlessLibraryAPI/Controllers/LibraryController.cs

@@ -111,20 +111,27 @@ namespace ServerlessLibrary.Controllers
                 errors.Add("At least one solution area must be specified");
             }
 
-            if (!string.IsNullOrWhiteSpace(libraryItem.Template) && !IsValidUri(libraryItem.Template))
+            if (!string.IsNullOrWhiteSpace(libraryItem.Template) && !IsValidUri(libraryItem.Template, "raw.githubusercontent.com"))
             {
-                errors.Add("ARM template URL must be a valid URL");
+                errors.Add("ARM template URL must point to the raw path of the ARM template (https://raw.githubusercontent.com/...)");
             }
 
             return errors;
         }
 
-        private static bool IsValidUri(string uriString)
+        private static bool IsValidUri(string uriString, string expectedHostName = null)
         {
             try
             {
                 var uri = new Uri(uriString);
-                return true;
+                if (string.IsNullOrWhiteSpace(expectedHostName))
+                {
+                    return true;
+                }
+                else
+                {
+                    return string.Equals(expectedHostName, uri.Host, StringComparison.OrdinalIgnoreCase);
+                }
             }
             catch
             {