vitess.io/vitess@v0.16.2/web/vtadmin/src/components/placeholders/QueryErrorPlaceholder.tsx (about)

     1  /**
     2   * Copyright 2022 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import { UseQueryResult } from 'react-query';
    18  
    19  interface Props {
    20      query: UseQueryResult;
    21      title?: React.ReactNode;
    22  }
    23  
    24  /**
    25   * QueryErrorPlaceholder is a straightforward component that displays
    26   * errors returned from a useQuery hook. To simplify its use, this component
    27   * takes care of hiding itself when `props.query` is in any state other than an error.
    28   * It's perfectly fine to render it this:
    29   *
    30   *      <QueryErrorPlaceholder query={query} ... />
    31   *
    32   * ...conversely, it is NOT necessary (although also fine!) to do a check like this:
    33   *
    34   *      {query.isError && <QueryErrorPlaceholder query={query} .../>}
    35   */
    36  export const QueryErrorPlaceholder: React.FC<Props> = ({ query, title = 'An error occurred' }) => {
    37      if (!query.isError || query.isLoading) {
    38          return null;
    39      }
    40  
    41      const message = (query.error as any).response?.error?.message || (query.error as any).message;
    42  
    43      return (
    44          <div aria-live="polite" className="my-12 text-center" role="status">
    45              <span className="text-[6rem]">😰</span>
    46              <div className="text-xl font-bold my-4">{title}</div>
    47              <code data-testid="error-message">{message}</code>
    48  
    49              <div className="my-12">
    50                  <button className="btn btn-secondary" onClick={() => query.refetch()} type="button">
    51                      Try again
    52                  </button>
    53              </div>
    54          </div>
    55      );
    56  };