Added reveal secret button and removed tags from HTTP response content format

src/components/operations/operation-details/react/runtime/operation-console/ConsoleHeaders.tsx

@@ -4,7 +4,7 @@ import { Stack } from "@fluentui/react";
 import { Body1Strong, Button, Dropdown, Field, Input, Label, Option, Tooltip } from "@fluentui/react-components";
 import { AddCircleRegular, ChevronUp20Regular, DeleteRegular } from "@fluentui/react-icons";
 import { ConsoleHeader } from "../../../../../../models/console/consoleHeader";
-import { getValidationMessage, getValidationState } from "./consoleUtils";
+import { getValidationMessage, getValidationState, RevealSecretButton } from "./consoleUtils";
 
 type ConsoleHeadersProps = {
     headers: ConsoleHeader[];
@@ -15,6 +15,7 @@ type ConsoleHeadersProps = {
 export const ConsoleHeaders = ({ headers, updateHeaders, isGqlConsole }: ConsoleHeadersProps) => {
     const [isHeadersCollapsed, setIsHeadersCollapsed] = useState<boolean>(headers?.length === 0);
     const [consoleHeaders, setConsoleHeaders] = useState<ConsoleHeader[]>(headers);
+    const [showPassword, setShowPassword] = useState(false);
 
     useEffect(() => {
         setConsoleHeaders(headers);
@@ -78,7 +79,7 @@ export const ConsoleHeaders = ({ headers, updateHeaders, isGqlConsole }: Console
                                 ))}
                             </Dropdown> :
                             <Input
-                                type={header.secret() ? "password" : "text"}
+                                type={header.secret() && !showPassword ? "password" : "text"}
                                 placeholder="Enter header value"
                                 value={header.value() ?? ""}
                                 onChange={(_, data) => changeHeader(header.id, "value", data.value)}
@@ -87,10 +88,12 @@ export const ConsoleHeaders = ({ headers, updateHeaders, isGqlConsole }: Console
                         </Field>
                     </div>
                     <div className={"param-remove"}>
-                        {!header.required &&
+                        {(!header.required &&
                             <Tooltip content="Remove header" relationship="label">
                                 <Button icon={<DeleteRegular />} appearance="subtle" onClick={() => removeHeader(header)} />
-                            </Tooltip>
+                            </Tooltip>) ||
+                         (header.secret() &&
+                            <RevealSecretButton showSecret={showPassword} onClick={() => setShowPassword(!showPassword)} ></RevealSecretButton>)
                         }
                     </div>
                 </Stack>

src/components/operations/operation-details/react/runtime/operation-console/ConsoleParameters.tsx

@@ -4,7 +4,7 @@ import { Stack } from "@fluentui/react";
 import { Body1Strong, Button, Dropdown, Field, Input, Label, Option, Tooltip } from "@fluentui/react-components";
 import { AddCircleRegular, ChevronUp20Regular, DeleteRegular } from "@fluentui/react-icons";
 import { ConsoleParameter } from "../../../../../../models/console/consoleParameter";
-import { getValidationMessage, getValidationState } from "./consoleUtils";
+import { getValidationMessage, getValidationState, RevealSecretButton } from "./consoleUtils";
 
 type ConsoleParametersProps = {
     queryParameters: ConsoleParameter[];
@@ -17,6 +17,7 @@ export const ConsoleParameters = ({ queryParameters, templateParameters, updateP
     const [isParametersCollapsed, setIsParametersCollapsed] = useState<boolean>(queryParameters.length === 0 && (!templateParameters || templateParameters.length === 0));
     const [queryParams, setQueryParams] = useState<ConsoleParameter[]>(queryParameters);
     const [templateParams, setTemplateParams] = useState<ConsoleParameter[]>(templateParameters);
+    const [showPassword, setShowPassword] = useState(false);
 
     useEffect(() => {
         setTemplateParams(templateParameters);
@@ -90,7 +91,8 @@ export const ConsoleParameters = ({ queryParameters, templateParameters, updateP
                             <Option key={option} value={option}>{option}</Option>
                         ))}
                     </Dropdown>
-                    : <Input
+                    :
+                    <Input
                         type={parameter.secret ? "password" : "text"}
                         placeholder="Enter parameter value"
                         value={parameter.value() ?? ""}
@@ -104,10 +106,12 @@ export const ConsoleParameters = ({ queryParameters, templateParameters, updateP
                 </Field>
             </div>
             <div className={"param-remove"}>
-                {!parameter.required &&
+                {(!parameter.required &&
                     <Tooltip content="Remove parameter" relationship="label">
                         <Button icon={<DeleteRegular />} appearance="subtle" onClick={() => removeParameter(parameter)} />
-                    </Tooltip>
+                    </Tooltip>) ||
+                (parameter.secret &&
+                    <RevealSecretButton showSecret={showPassword} onClick={() => setShowPassword(!showPassword)} ></RevealSecretButton>)
                 }
             </div>
         </Stack>

src/components/operations/operation-details/react/runtime/operation-console/ConsoleRequestResponse.tsx

@@ -41,6 +41,7 @@ import { LogItem, WebsocketClient } from "./ws-utilities/websocketClient";
 import { templates } from "./templates/templates";
 import { BinaryField } from "./BinaryField";
 import { ConsoleRequest } from "../../../../../../models/console/consoleRequest";
+import { RevealSecretButton } from "./consoleUtils";
 
 type ConsoleRequestResponseProps = {
     api: Api;
@@ -337,11 +338,11 @@ export const ConsoleRequestResponse = ({ api, consoleOperation, backendUrl, useC
                 }
             }
 
-            const responseString = `<span>HTTP/1.1</span> <span data-code="${responseStatusCode}"><span data-code="${responseStatusCode}">${responseStatusCode}</span> <span>${responseStatusText}</span></span>
+            const responseString =`HTTP/1.1 ${responseStatusCode} ${responseStatusText}
 
-<span>${headersString}</span>
+${headersString}
 
-<span>${responseBodyFormatted}</span>`;
+${responseBodyFormatted}`;
 
             setFormattedResponse(responseString);
             //this.logSentRequest(api.name, consoleOperation.operationName, method, response.statusCode);
@@ -461,15 +462,7 @@ export const ConsoleRequestResponse = ({ api, consoleOperation, backendUrl, useC
                                     }}
                                 />
                             </Tooltip>
-                            <Tooltip content={isSecretsRevealed ? "Hide secrets" : "Reveal secrets"} relationship="label">
-                                <Button
-                                    icon={isSecretsRevealed ? <EyeOffRegular /> : <EyeRegular />}
-                                    appearance="subtle"
-                                    onClick={() => {
-                                        setIsSecretsRevealed(!isSecretsRevealed);
-                                    }}
-                                />
-                            </Tooltip>
+                            <RevealSecretButton showSecret={isSecretsRevealed} onClick={() => setIsSecretsRevealed(!isSecretsRevealed)} ></RevealSecretButton>
                         </Stack>
                         <SyntaxHighlighter children={codeSample} language={selectedLanguage} style={a11yLight} />
                         {api.type === TypeOfApi.webSocket &&
@@ -568,7 +561,7 @@ export const ConsoleRequestResponse = ({ api, consoleOperation, backendUrl, useC
                     <div className={`operation-table-body-console ${requestError ? "validation-error" : ""}`}>
                         {requestError
                             ? <MarkdownProcessor markdownToDisplay={requestError} />
-                            : formattedResponse && <SyntaxHighlighter children={formattedResponse} language={"http"} style={a11yLight} />
+                            : formattedResponse && <SyntaxHighlighter language={"http"} style={a11yLight}>{formattedResponse}</SyntaxHighlighter>
                         }
                     </div>
                 </div>

src/components/operations/operation-details/react/runtime/operation-console/consoleUtils.tsx

@@ -14,6 +14,9 @@ import { Utils } from "../../../../../../utils";
 import { OAuth2AuthenticationSettings } from "../../../../../../contracts/authenticationSettings";
 import { GrantTypes, oauthSessionKey } from "../../../../../../constants";
 import { SearchQuery } from "../../../../../../contracts/searchQuery";
+import * as React from "react";
+import { Button, Tooltip } from "@fluentui/react-components";
+import { EyeOffRegular, EyeRegular } from "@fluentui/react-icons";
 
 interface SubscriptionOption {
     name: string;
@@ -304,4 +307,17 @@ export function getValidationState(consoleParameter: {required: boolean, value:(
         return "error";
     }
     return "none";
+}
+
+
+export const RevealSecretButton = ({showSecret, onClick}) => {
+    return (
+        <Tooltip content={showSecret ? "Hide secrets" : "Reveal secrets"} relationship="label">
+            <Button
+                icon={showSecret ? <EyeOffRegular /> : <EyeRegular />}
+                appearance="subtle"
+                onClick={onClick}
+            />
+        </Tooltip>
+    )
 }