Fix: Snippet error messaging

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -1,5 +1,5 @@
 import { getTheme, ITheme, Label, Link, PivotItem } from '@fluentui/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { FormattedMessage } from 'react-intl';
@@ -64,14 +64,18 @@ function Snippet(props: ISnippetProps) {
 
  const { dimensions: { response }, snippets,
  responseAreaExpanded, sampleQuery } = useAppSelector((state) => state);
- const { data, pending: loadingState } = snippets;
+ const { data, pending: loadingState, error } = snippets;
  const snippet = (!loadingState && data) ? data[language] : null;
-
  const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
  const height = convertVhToPx(responseHeight, 240);
+ const [snippetError, setSnippetError] = useState(error);
 
  const dispatch: AppDispatch = useDispatch();
 
+ useEffect(() => {
+ setSnippetError(error?.error ? error.error : error);
+ }, [error])
+
  const handleCopy = async () => {
  trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery, { Language: language });
  }
@@ -123,6 +127,33 @@ function Snippet(props: ISnippetProps) {
  );
  }
 
+ const displayError = (): JSX.Element | null => {
+ if((!loadingState && snippet) || (!loadingState && !snippetError)){
+ return null;
+ }
+ if(
+ (snippetError?.status && snippetError.status === 404) ||
+ (snippetError?.status && snippetError.status === 400)
+ ){
+ return(
+ <Label style={{ padding: 10 }}>
+ <FormattedMessage id='Snippet not available' />
+ </Label>
+ )
+ }
+ else{
+ return (
+ <>
+ {!loadingState &&
+ <Label style={{ padding: 10 }}>
+ <FormattedMessage id='Fetching code snippet failing' />
+ </Label>
+ }
+ </>
+ )
+ }
+ }
+
  return (
  <div style={{ display: 'block' }} id={`${language}-tab`}>
  {loadingState &&
@@ -142,11 +173,7 @@ function Snippet(props: ISnippetProps) {
  />
  </>
  }
- {!loadingState && !snippet &&
- <Label style={{ padding: 10 }}>
- <FormattedMessage id='Snippet not available' />
- </Label>
- }
+ {displayError()}
  </div>
  );
 }

src/app/views/query-runner/request/permissions/Permissions.Full.tsx

@@ -193,7 +193,8 @@ const FullPermissions: React.FC<PopupsComponent<null>> = (): JSX.Element => {
  />
  </>}
 
- {!loading && permissions && permissions.length === 0 &&
+ {!loading && permissions && permissions.length === 0 && scopes?.error && scopes?.error?.error &&
+ scopes?.error?.error?.status && scopes?.error?.error?.status === 404 ?
  <Label style={{
  display: 'flex',
  width: '100%',
@@ -202,7 +203,11 @@ const FullPermissions: React.FC<PopupsComponent<null>> = (): JSX.Element => {
  alignItems: 'center'
  }}>
  <FormattedMessage id='permissions not found' />
- </Label>
+ </Label> :
+ !loading && permissions && permissions.length === 0 && scopes.error && scopes.error.error &&
+ <Label>
+ <FormattedMessage id='Fetching permissions failing' />
+ </Label>
  }
  </div>
  );

src/app/views/query-runner/request/permissions/Permissions.Query.tsx

@@ -25,9 +25,16 @@ export const Permissions = (permissionProps?: IPermissionProps): JSX.Element =>
  const { show: showPermissions } = usePopups('full-permissions', 'panel');
 
  const tokenPresent = !!authToken.token;
- const { pending: loading } = scopes;
+ const { pending: loading, error } = scopes;
  const permissions: IPermission[] = scopes.data.specificPermissions ? scopes.data.specificPermissions : [];
  const [isScreenSizeReduced, setIsScreenSizeReduced] = useState(false);
+ const [permissionsError, setPermissionsError] = useState(error);
+
+ useEffect(() => {
+ if(error?.error && error?.error?.url.contains('permissions')){
+ setPermissionsError(error?.error);
+ }
+ }, [error])
 
  const classProps = {
  styles: permissionProps!.styles,
@@ -119,12 +126,20 @@ export const Permissions = (permissionProps?: IPermissionProps): JSX.Element =>
  </Label>)
  }
 
+ const displayErrorFetchingPermissionsMessage = () : JSX.Element => {
+ return (<Label className={classes.permissionLabel}>
+ <FormattedMessage id='Fetching permissions failing' />
+ </Label>);
+ }
+
  if (!tokenPresent && permissions.length === 0) {
  return displayNotSignedInMessage();
  }
 
  if (permissions.length === 0) {
- return displayNoPermissionsFoundMessage();
+ return permissionsError?.status && (permissionsError?.status === 404 || permissionsError?.status === 400)
+ ? displayNoPermissionsFoundMessage() :
+ displayErrorFetchingPermissionsMessage();
  }
 
  return (