FUI - Visual code improvements

src/components/apis/list-of-apis/react/runtime/ApiListRuntime.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useEffect, useState } from "react";
 import { FluentProvider } from "@fluentui/react-components";
 import { Resolve } from "@paperbits/react/decorators";
+import { Tag } from "../../../../../models/tag";
 import { SearchQuery } from "../../../../../contracts/searchQuery";
 import * as Constants from "../../../../../constants";
 import { ApiService } from "../../../../../services/apiService";
@@ -12,7 +13,6 @@ import { FiltersPosition } from "../../listOfApisContract";
 import { TApisData } from "./utils";
 import { ApiListTableCards } from "./ApiListTableCards";
 import { ApiListDropdown } from "./ApiListDropdown";
-import { Tag } from "../../../../../models/tag";
 
 export interface ApiListProps {
     productName?: string;

src/components/operations/operation-details/react/runtime/OperationConsole.tsx

@@ -27,6 +27,7 @@ import { Operation } from "../../../../../models/operation";
 import { ConsoleOperation } from "../../../../../models/console/consoleOperation";
 import { ConsoleHeader } from "../../../../../models/console/consoleHeader";
 import { ConsoleParameter } from "../../../../../models/console/consoleParameter";
+import { ConsoleRequest } from "../../../../../models/console/consoleRequest";
 import { AuthorizationServer } from "../../../../../models/authorizationServer";
 import { KnownHttpHeaders } from "../../../../../models/knownHttpHeaders";
 import { KnownMimeTypes } from "../../../../../models/knownMimeTypes";
@@ -43,7 +44,6 @@ import { ConsoleHosts } from "./operation-console/ConsoleHosts";
 import { ConsoleParameters } from "./operation-console/ConsoleParameters";
 import { ConsoleRequestResponse } from "./operation-console/ConsoleRequestResponse";
 import { getAuthServers, getBackendUrl, loadSubscriptionKeys, setupOAuth } from "./operation-console/consoleUtils";
-import { ConsoleRequest } from "../../../../../models/console/consoleRequest";
 
 type OperationConsoleProps = {
     isOpen: boolean;
@@ -200,9 +200,11 @@ export const OperationConsole = ({
     const validateConsoleItems = (consoleRequest: ConsoleRequest): boolean => {
         const isParametersNotValid: boolean = consoleRequest.queryParameters().some((parameter: ConsoleParameter) => parameter.required && !parameter.value());
         const isHeadersNotValid: boolean = consoleRequest.headers().some((header: ConsoleHeader) => header.required && !header.value());
-        if(isParametersNotValid || isHeadersNotValid) {
+
+        if (isParametersNotValid || isHeadersNotValid) {
             return false;
         }
+
         return true;
     };
 

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

@@ -66,25 +66,25 @@ export const ConsoleHeaders = ({ headers, updateHeaders, isGqlConsole }: Console
                     </div>
                     <div className={"param-value"}>
                         <Field validationState={getValidationState(header)} validationMessage={getValidationMessage(header)}>
-                        {header.options.length > 0 ?
-                            <Dropdown
-                                id={`header-dropdown-${header.id}`}
-                                value={header.value()}
-                                selectedOptions={[header.value()]}
-                                placeholder={`Select ${header.name()} value`}
-                                onOptionSelect={(_, data) => changeHeader(header.id, "value", data.optionValue)}
-                            >
-                                {header.options.map(option => (
-                                    <Option key={option} value={option}>{option}</Option>
-                                ))}
-                            </Dropdown> :
-                            <Input
-                                type={header.secret() && !showPassword ? "password" : "text"}
-                                placeholder="Enter header value"
-                                value={header.value() ?? ""}
-                                onChange={(_, data) => changeHeader(header.id, "value", data.value)}
-                            />
-                        }
+                            {header.options.length > 0 ?
+                                <Dropdown
+                                    id={`header-dropdown-${header.id}`}
+                                    value={header.value()}
+                                    selectedOptions={[header.value()]}
+                                    placeholder={`Select ${header.name()} value`}
+                                    onOptionSelect={(_, data) => changeHeader(header.id, "value", data.optionValue)}
+                                >
+                                    {header.options.map(option => (
+                                        <Option key={option} value={option}>{option}</Option>
+                                    ))}
+                                </Dropdown> :
+                                <Input
+                                    type={header.secret() && !showPassword ? "password" : "text"}
+                                    placeholder="Enter header value"
+                                    value={header.value() ?? ""}
+                                    onChange={(_, data) => changeHeader(header.id, "value", data.value)}
+                                />
+                            }
                         </Field>
                     </div>
                     <div className={"param-remove"}>

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

@@ -75,34 +75,34 @@ export const ConsoleParameters = ({ queryParameters, templateParameters, updateP
             </div>
             <div className={"param-value"}>
                 <Field validationState={getValidationState(parameter)} validationMessage={getValidationMessage(parameter)}>
-                {parameter.options.length > 0
-                    ? <Dropdown
-                        id={`param-dropdown-${parameter.id}`}
-                        value={parameter.value() ?? ""}
-                        selectedOptions={[parameter.value() ?? ""]}
-                        placeholder={`Select ${parameter.name()} value`}
-                        onOptionSelect={(_, data) =>
-                            isTemplate
-                                ? changeTemplateParameterValue(parameter.id, data.optionValue)
-                                : changeQueryParameter(parameter.id, "value", data.optionValue)
-                        }
-                    >
-                        {parameter.options.map(option => (
-                            <Option key={option} value={option}>{option}</Option>
-                        ))}
-                    </Dropdown>
-                    :
-                    <Input
-                        type={parameter.secret ? "password" : "text"}
-                        placeholder="Enter parameter value"
-                        value={parameter.value() ?? ""}
-                        onChange={(_, data) =>
-                            isTemplate
-                                ? changeTemplateParameterValue(parameter.id, data.value)
-                                : changeQueryParameter(parameter.id, "value", data.value)
-                        }
-                    />
-                }
+                    {parameter.options.length > 0
+                        ? <Dropdown
+                            id={`param-dropdown-${parameter.id}`}
+                            value={parameter.value() ?? ""}
+                            selectedOptions={[parameter.value() ?? ""]}
+                            placeholder={`Select ${parameter.name()} value`}
+                            onOptionSelect={(_, data) =>
+                                isTemplate
+                                    ? changeTemplateParameterValue(parameter.id, data.optionValue)
+                                    : changeQueryParameter(parameter.id, "value", data.optionValue)
+                            }
+                        >
+                            {parameter.options.map(option => (
+                                <Option key={option} value={option}>{option}</Option>
+                            ))}
+                        </Dropdown>
+                        :
+                        <Input
+                            type={parameter.secret ? "password" : "text"}
+                            placeholder="Enter parameter value"
+                            value={parameter.value() ?? ""}
+                            onChange={(_, data) =>
+                                isTemplate
+                                    ? changeTemplateParameterValue(parameter.id, data.value)
+                                    : changeQueryParameter(parameter.id, "value", data.value)
+                            }
+                        />
+                    }
                 </Field>
             </div>
             <div className={"param-remove"}>

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

@@ -31,6 +31,7 @@ import { KnownMimeTypes } from "../../../../../../models/knownMimeTypes";
 import { KnownHttpHeaders } from "../../../../../../models/knownHttpHeaders";
 import { KnownStatusCodes } from "../../../../../../models/knownStatusCodes";
 import { ConsoleOperation } from "../../../../../../models/console/consoleOperation";
+import { ConsoleRequest } from "../../../../../../models/console/consoleRequest";
 import { RequestError } from "../../../../../../errors/requestError";
 import { HttpResponse } from "../../../../../../contracts/httpResponse";
 import { TemplatingService } from "../../../../../../services/templatingService";
@@ -40,7 +41,6 @@ import { RequestBodyType, TypeOfApi, downloadableTypes } from "../../../../../..
 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 = {

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

@@ -1,3 +1,6 @@
+import * as React from "react";
+import { Button, Tooltip } from "@fluentui/react-components";
+import { EyeOffRegular, EyeRegular } from "@fluentui/react-icons";
 import { HttpHeader } from "@paperbits/common/http/httpHeader";
 import { ISettingsProvider } from "@paperbits/common/configuration";
 import { SessionManager } from "@paperbits/common/persistence/sessionManager";
@@ -14,9 +17,6 @@ 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;
@@ -298,18 +298,17 @@ export const authenticateOAuthWithPassword = async (
     return setAuthHeader(headers, accessToken);
 }
 
-export function getValidationMessage(consoleParameter: {required: boolean, value:() => any}): string {
+export const getValidationMessage = (consoleParameter: {required: boolean, value:() => any}): string => {
     return getValidationState(consoleParameter) === "none" ? "" : "Value is required";
 }
 
-export function getValidationState(consoleParameter: {required: boolean, value:() => any}): "none" | "error" | "warning" | "success" {
+export const getValidationState = (consoleParameter: {required: boolean, value:() => any}): "none" | "error" | "warning" | "success" => {
     if (consoleParameter.required && !consoleParameter.value()) {
         return "error";
     }
     return "none";
 }
 
-
 export const RevealSecretButton = ({showSecret, onClick}) => {
     return (
         <Tooltip content={showSecret ? "Hide secrets" : "Reveal secrets"} relationship="label">
@@ -319,5 +318,5 @@ export const RevealSecretButton = ({showSecret, onClick}) => {
                 onClick={onClick}
             />
         </Tooltip>
-    )
+    );
 }

src/components/users/change-password/react/ChangePasswordViewModel.tsx

@@ -15,6 +15,7 @@ export class ChangePasswordViewModel extends React.Component{
 
     public render(): JSX.Element {
         const data = JSON.stringify(this.state);
+
         return this.state.isRedesignEnabled
             ? <fui-change-password key={data} props={data} ></fui-change-password>
             : <change-password-runtime params={data}></change-password-runtime>;

src/components/users/reset-password/react/ResetPasswordViewModel.tsx

@@ -15,6 +15,7 @@ export class ResetPasswordViewModel extends React.Component{
 
     public render(): JSX.Element {
         const data = JSON.stringify(this.state);
+
         return this.state.isRedesignEnabled
             ? <fui-reset-password key={data} props={data} ></fui-reset-password>
             : <reset-password-runtime params={data}></reset-password-runtime>;