add tooltip in PrebuiltSetting (microsoft#798)

jamesor19 · Dec 1, 2020 · f5cdccd · f5cdccd
1 parent 31073cc
commit f5cdccd
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 15 deletions.
diff --git a/src/common/localization/en-us.ts b/src/common/localization/en-us.ts
@@ -245,6 +245,12 @@ export const english: IAppStrings = {
         inProgress: "Analysis in progress...",
         anlayWithPrebuiltModels: "Analyze ${name} (preview)",
     },
+    prebuiltSetting:{
+        endpointTooltip: "e.g: https://xxx.cognitiveservices.azure.com/",
+        endpointPlaceholder: "need endpoint",
+        apiKeyTooltip: "get key info from Azure Subscription Resource Keys & Endpoint page",
+        apiKeyPlaceholder: "need apikey",
+    },
     layoutPredict:{
         title: "Layout analyze",
         inProgress: "Analysis in progress...",

diff --git a/src/common/localization/es-cl.ts b/src/common/localization/es-cl.ts
@@ -244,6 +244,12 @@ export const spanish: IAppStrings = {
         inProgress: "Análisis en curso...",
         anlayWithPrebuiltModels: "Análisis ${name} (versión preliminar)",
     },
+    prebuiltSetting:{
+        endpointTooltip: "Establecer el punto final eg: https://xxx.cognitiveservices.azure.com/",
+        endpointPlaceholder: "necesita punto final",
+        apiKeyTooltip:"Obtener información clave de la página de claves de recursos y terminales de suscripción de Azure",
+        apiKeyPlaceholder: "necesita apiKey"
+    },
     layoutPredict:{
         title: "Análisis de diseño",
         inProgress: "Análisis en curso...",

diff --git a/src/common/strings.ts b/src/common/strings.ts
@@ -242,7 +242,13 @@ export interface IAppStrings {
         uploadFile: string;
         inProgress: string;
         anlayWithPrebuiltModels: string;
-    }
+    };
+    prebuiltSetting:{
+        endpointTooltip: string;
+        endpointPlaceholder: string;
+        apiKeyTooltip: string;
+        apiKeyPlaceholder: string;
+    };
     layoutPredict:{
         title:string;
         inProgress: string;

diff --git a/src/react/components/common/prebuiltSetting/prebuiltSetting.scss b/src/react/components/common/prebuiltSetting/prebuiltSetting.scss
@@ -2,6 +2,7 @@
     .apikeyContainer {
         display: flex;
         margin-bottom: 30px;
+        .ms-TooltipHost,
         .apikey {
             width: 100%;
         }

diff --git a/src/react/components/common/prebuiltSetting/prebuiltSetting.tsx b/src/react/components/common/prebuiltSetting/prebuiltSetting.tsx
@@ -1,5 +1,6 @@
-import {DefaultButton, FontIcon, TextField} from '@fluentui/react';
+import {DefaultButton, FontIcon, TextField, TooltipHost} from '@fluentui/react';
 import React from 'react';
+import {strings} from '../../../../common/strings';
 import {getGreenWithWhiteBackgroundTheme, getPrimaryGreyTheme} from '../../../../common/themes';
 import {IPrebuiltSettings} from '../../../../models/applicationState';
 import IAppPrebuiltSettingsActions from '../../../../redux/actions/prebuiltSettingsActions';
@@ -26,23 +27,33 @@ export class PrebuiltSetting extends React.Component<IPrebuiltSettingProps, IPre
             <div className="p-3 prebuilt-setting" style={{marginTop: "8px"}}>
                 <h5>Service configuration</h5>
                 <div style={{marginBottom: "3px"}}>Form recognizer service endpoint</div>
-                <TextField
-                    className="mb-1"
-                    theme={getGreenWithWhiteBackgroundTheme()}
-                    value={this.props.prebuiltSettings?.serviceURI}
-                    onChange={this.setInputedServiceURI}
-                    disabled={disabled}
-                />
-                <div style={{marginBottom: "3px"}}>API key</div>
-                <div className="apikeyContainer">
+                <TooltipHost
+                    content={strings.prebuiltSetting.endpointTooltip}>
                     <TextField
-                        className="apikey"
+                        className="mb-1"
+                        name="endpointUrl"
+                        placeholder={strings.prebuiltSetting.endpointPlaceholder}
                         theme={getGreenWithWhiteBackgroundTheme()}
-                        type={this.state.showInputedAPIKey ? "text" : "password"}
-                        value={this.props.prebuiltSettings?.apiKey}
-                        onChange={this.setInputedAPIKey}
+                        value={this.props.prebuiltSettings?.serviceURI}
+                        onChange={this.setInputedServiceURI}
                         disabled={disabled}
                     />
+                </TooltipHost>
+                <div style={{marginBottom: "3px"}}>API key</div>
+                <div className="apikeyContainer">
+                    <TooltipHost
+                        content={strings.prebuiltSetting.apiKeyTooltip}>
+                        <TextField
+                            className="apikey"
+                            name="apikey"
+                            placeholder={strings.prebuiltSetting.apiKeyPlaceholder}
+                            theme={getGreenWithWhiteBackgroundTheme()}
+                            type={this.state.showInputedAPIKey ? "text" : "password"}
+                            value={this.props.prebuiltSettings?.apiKey}
+                            onChange={this.setInputedAPIKey}
+                            disabled={disabled}
+                        />
+                    </TooltipHost>
                     <DefaultButton
                         className="portected-input-margin"
                         theme={getPrimaryGreyTheme()}