Skip to content

Commit

Permalink
chore: add status bar for error state
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-golovanov
alex-golovanov committed Nov 14, 2024
1 parent c741a2f commit 7df6776
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 53 deletions.
130 changes: 77 additions & 53 deletions ...onEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import * as Styled from "./styles";
import { useBoolean, useEventCallback } from "usehooks-ts";
import { RESPONSE_TABLE_HEIGHT_OFFSET } from "./constants";
import { scrollbarWidth } from "utils/helpers";

interface Props {
actionSource: SourceEntity;
Expand All @@ -79,8 +80,14 @@ interface Props {
// // * Update table appearance.
// // * Table columns have a fixed width of 170px now, this needs to be updated to min-width.
// // * Fix FAB hover issue.
// // * Account for scrollbars that are always shown.
// // * Add status bar to error state, hide bind to UI button.
// // * Add dashed underline for status bar fn name & meta.
// * Update REST API
// * Update GQL API
// * Fix Cypress tests related to result type control change.

// ? Make table stretchable - this is not easily accomplishable with the current table component, need to calculate column width manually.
// // ? Query name is a bold Text variant that is of weight 500 in ADS
// // ? Query name/info font size is larger in FE component - 14px vs 13px in Figma

Expand Down Expand Up @@ -120,6 +127,8 @@ export const QueryResponseTab = (props: Props) => {
const { responseDataTypes, responseDisplayFormat } =
actionResponseDisplayDataFormats(actionResponse);

const scrollbarOffset = scrollbarWidth();

let output: Record<string, unknown>[] | string = "";
let errorMessage = runErrorMessage;
let hintMessages: Array<string> = [];
Expand Down Expand Up @@ -328,52 +337,67 @@ export const QueryResponseTab = (props: Props) => {
</Callout>
)}
{errorMessage && (
<ResponseTabErrorContainer>
<ResponseTabErrorContent>
<ResponseTabErrorDefaultMessage>
Your query failed to execute
<div>
<Styled.StatusBar>
<Styled.StatusBarInfo>
<Styled.StatusBarText $isBold kind="code">
{`${actionName}.run():`}
</Styled.StatusBarText>
<Styled.StatusBarText $isError kind="code">
Error
</Styled.StatusBarText>
</Styled.StatusBarInfo>
</Styled.StatusBar>
<ResponseTabErrorContainer>
<ResponseTabErrorContent>
<ResponseTabErrorDefaultMessage>
Your query failed to execute
{actionResponse &&
(actionResponse.pluginErrorDetails || actionResponse.body) &&
":"}
</ResponseTabErrorDefaultMessage>
{actionResponse &&
(actionResponse.pluginErrorDetails || actionResponse.body) &&
":"}
</ResponseTabErrorDefaultMessage>
{actionResponse &&
(actionResponse.pluginErrorDetails ? (
<>
<div data-testid="t--query-error">
{actionResponse.pluginErrorDetails.downstreamErrorMessage ||
actionResponse.pluginErrorDetails.appsmithErrorMessage}
</div>
{actionResponse.pluginErrorDetails.downstreamErrorCode && (
<LogAdditionalInfo
text={
actionResponse.pluginErrorDetails.downstreamErrorCode
}
/>
)}
</>
) : (
actionResponse.body && (
<div data-testid="t--query-error">{actionResponse.body}</div>
)
))}
<LogHelper
logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
name="PluginExecutionError"
pluginErrorDetails={
actionResponse && actionResponse.pluginErrorDetails
}
source={actionSource}
/>
</ResponseTabErrorContent>
{actionResponse && actionResponse.request && (
<JsonWrapper
className="t--debugger-log-state"
onClick={(e) => e.stopPropagation()}
>
<ReactJson src={responseState} {...apiReactJsonProps} />
</JsonWrapper>
)}
</ResponseTabErrorContainer>
(actionResponse.pluginErrorDetails ? (
<>
<div data-testid="t--query-error">
{actionResponse.pluginErrorDetails
.downstreamErrorMessage ||
actionResponse.pluginErrorDetails.appsmithErrorMessage}
</div>
{actionResponse.pluginErrorDetails.downstreamErrorCode && (
<LogAdditionalInfo
text={
actionResponse.pluginErrorDetails.downstreamErrorCode
}
/>
)}
</>
) : (
actionResponse.body && (
<div data-testid="t--query-error">
{actionResponse.body}
</div>
)
))}
<LogHelper
logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
name="PluginExecutionError"
pluginErrorDetails={
actionResponse && actionResponse.pluginErrorDetails
}
source={actionSource}
/>
</ResponseTabErrorContent>
{actionResponse && actionResponse.request && (
<JsonWrapper
className="t--debugger-log-state"
onClick={(e) => e.stopPropagation()}
>
<ReactJson src={responseState} {...apiReactJsonProps} />
</JsonWrapper>
)}
</ResponseTabErrorContainer>
</div>
)}
{hintMessages && hintMessages.length > 0 && (
<Styled.HelpSection>
Expand All @@ -392,6 +416,7 @@ export const QueryResponseTab = (props: Props) => {
selectedTabIndex !== -1 && (
<Styled.DataContainer
$height={responseTabHeight}
data-testid="t--query-response-data-container"
onMouseEnter={setIsHovered}
onMouseLeave={setIsNotHovered}
>
Expand All @@ -414,16 +439,13 @@ export const QueryResponseTab = (props: Props) => {
placement="bottom"
>
<Styled.StatusBarInfo>
<Styled.StatusBarText $isBold kind="code">
<Styled.StatusBarText $hasTooltip $isBold kind="code">
{`${actionName}.run():`}
</Styled.StatusBarText>
{actionResponse?.isExecutionSuccess ? (
<Styled.StatusBarText kind="code">{`${output.length} record${output.length > 1 ? "s" : ""}`}</Styled.StatusBarText>
) : (
<Styled.StatusBarText $isError kind="code">
Error
</Styled.StatusBarText>
)}
<Styled.StatusBarText
$hasTooltip
kind="code"
>{`${output.length} record${output.length > 1 ? "s" : ""}`}</Styled.StatusBarText>
</Styled.StatusBarInfo>
</Tooltip>
<BindDataButton
Expand All @@ -448,6 +470,8 @@ export const QueryResponseTab = (props: Props) => {
<MenuTrigger>
<Styled.Fab
$isVisible={isContentTypeSelectorVisible}
aria-label={`Change response format. Current format: ${currentContentType}`}
data-testid="t--query-response-type-trigger"
endIcon={
isContentTypeMenuOpen
? "arrow-up-s-line"
Expand Down
4 changes: 4 additions & 0 deletions .../PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,14 @@ export const LoadingContainer = styled.div`
interface StatusBarTextProps {
$isBold?: boolean;
$isError?: boolean;
$hasTooltip?: boolean;
}

export const StatusBarText = styled(Text)<StatusBarTextProps>`
font-size: 13px;
${({ $hasTooltip }) =>
$hasTooltip &&
`text-decoration: underline var(--ads-v2-color-border) dashed;`}
${({ $isBold }) => $isBold && `font-weight: 700;`}
${({ $isError }) => $isError && `color: var(--ads-v2-color-fg-on-error);`}
`;

0 comments on commit 7df6776

Please sign in to comment.