Merge pull request #15 from microsoft/ByAgenT/better-error-notification

Error tooltip and disabled button when config invalid.

src/common/manifest.service.ts

@@ -87,7 +87,7 @@ class ManifestValidationService {
     if (missingProperties.length > 0) {
       return {
         code: ValidationErrorCode.MissingRequiredProperty,
-        description: `Property missing: ${missingProperties.join(', ')}`,
+        description: `Properties missing: ${missingProperties.join(', ')}`,
       };
     }
     return null;
@@ -126,7 +126,7 @@ class ManifestValidationService {
     if (errors && errors.length > 0) {
       return {
         code: ValidationErrorCode.InvalidCascadeConfiguration,
-        description: `Incorrect fields: ${errors.join(', ')}`,
+        description: `Invalid field refs: ${errors.join(', ')}`,
       };
     }
     return null;

src/confighub/components/Header.tsx

@@ -37,7 +37,13 @@ const Header = ({ title, status, onSaveClick }: IHeaderProps) => {
         </HeaderTitleRow>
       </HeaderTitleArea>
       <HeaderSideContainer>
-        <Button text='Save configuration' primary={true} onClick={onSaveClick} />
+        <Button
+          text='Save configuration'
+          primary={true}
+          onClick={onSaveClick}
+          disabled={!status.status}
+          tooltipProps={{ text: status.errors.map(error => error.description).join(',') }}
+        />
         <Status {...statusProps} size={StatusSize.l} />
       </HeaderSideContainer>
     </CustomHeader>