fix: reset errors when switching between bots (#6235)

* reset errors when switching between bots * remove typos * lint fix * handle comments Co-authored-by: Dong Lei <donglei@microsoft.com>
microsoft · Mar 8, 2021 · 215af1a · 215af1a
1 parent cfdc8bb
commit 215af1a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 13 deletions.
diff --git a/Composer/packages/client/src/components/FieldWithCustomButton.tsx b/Composer/packages/client/src/components/FieldWithCustomButton.tsx
@@ -104,10 +104,10 @@ type Props = {
 const errorElement = (errorText: string) => {
   if (!errorText) return '';
   return (
-    <div css={errorContainer}>
+    <span css={errorContainer}>
       <Icon iconName="ErrorBadge" styles={errorIcon} />
-      <div css={errorTextStyle}>{errorText}</div>
-    </div>
+      <span css={errorTextStyle}>{errorText}</span>
+    </span>
   );
 };
 

diff --git a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
@@ -141,10 +141,10 @@ const onRenderLabel = (props) => {
 const errorElement = (errorText: string) => {
   if (!errorText) return '';
   return (
-    <div css={errorContainer}>
+    <span css={errorContainer}>
       <Icon iconName="ErrorBadge" styles={errorIcon} />
-      <div css={errorTextStyle}>{errorText}</div>
-    </div>
+      <span css={errorTextStyle}>{errorText}</span>
+    </span>
   );
 };
 

diff --git a/Composer/packages/client/src/pages/botProject/runtime-settings/RuntimeSettings.tsx b/Composer/packages/client/src/pages/botProject/runtime-settings/RuntimeSettings.tsx
@@ -26,7 +26,7 @@ import {
 } from '../../../recoilModel';
 import { LoadingSpinner } from '../../../components/LoadingSpinner';
 import TelemetryClient from '../../../telemetry/TelemetryClient';
-import { subtitle } from '../styles';
+import { subtitle, errorContainer, errorTextStyle, errorIcon, customError } from '../styles';
 
 import { EjectModal } from './ejectModal';
 import { WorkingModal } from './workingModal';
@@ -78,6 +78,15 @@ export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }
     setRuntimePath(settings.runtime?.path ?? '');
     setRuntimeCommand(settings.runtime?.command ?? '');
     setUsingCustomRuntime(settings.runtime?.customRuntime ?? false);
+    const errorMessage = formatMessage('This is a required field.');
+    const errors = { command: '', path: '' };
+    if (!settings.runtime?.path && settings.runtime?.customRuntime) {
+      errors.path = errorMessage;
+    }
+    if (!settings.runtime?.command && settings.runtime?.customRuntime) {
+      errors.command = errorMessage;
+    }
+    setFormDataErrors(errors);
   }, [settings, projectId]);
 
   useEffect(() => {
@@ -203,6 +212,16 @@ export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }
     );
   };
 
+  const errorElement = (errorText: string) => {
+    if (!errorText) return '';
+    return (
+      <span css={errorContainer}>
+        <Icon iconName="ErrorBadge" styles={errorIcon} />
+        <span css={errorTextStyle}>{errorText}</span>
+      </span>
+    );
+  };
+
   return botName ? (
     <div css={runtimeSettingsStyle} id="runtimeSettings">
       {header()}
@@ -212,9 +231,9 @@ export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }
           required
           data-testid="runtimeCodeLocation"
           disabled={!settings.runtime || !settings.runtime.customRuntime}
-          errorMessage={formDataErrors.path}
+          errorMessage={errorElement(formDataErrors.path)}
           label={formatMessage('Runtime code location')}
-          styles={name}
+          styles={customError}
           value={runtimePath}
           onBlur={() => handleRuntimeSettingOnBlur('path')}
           onChange={handleRuntimeSettingOnChange('path')}
@@ -233,9 +252,9 @@ export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }
           required
           data-testid="runtimeCommand"
           disabled={!settings.runtime || !settings.runtime.customRuntime}
-          errorMessage={formDataErrors.command}
+          errorMessage={errorElement(formDataErrors.command)}
           label={formatMessage('Start command')}
-          styles={name}
+          styles={customError}
           value={runtimeCommand}
           onBlur={() => handleRuntimeSettingOnBlur('command')}
           onChange={handleRuntimeSettingOnChange('command')}

diff --git a/Composer/packages/client/src/pages/botProject/styles.ts b/Composer/packages/client/src/pages/botProject/styles.ts
@@ -67,17 +67,27 @@ export const customerLabel = css`
   margin-right: 5px;
 `;
 
+export const customError = {
+  root: {
+    selectors: {
+      'p > span': {
+        width: '100%',
+      },
+    },
+  },
+};
+
 // These bg and icon colors are the standard Fluent ones for Messaging, which
 // aren't exported anywhere they can easily be reached
 // Docs: https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/messaging
 
 export const errorContainer = css`
   display: flex;
   width: 100%;
-  line-height: 24px;
+  line-height: 20px;
   padding-top: 12px;
   padding-bottom: 12px;
-  background: '#fde7e9';
+  background: #fed9cc;
   color: ${NeutralColors.black};
 `;