vitess.io/vitess@v0.16.2/web/vtadmin/src/components/ReadOnlyGate.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 { isReadOnlyMode } from '../util/env';
    18  
    19  /**
    20   * ReadOnlyGate is used to hide child component trees when VTAdmin is running
    21   * in read only mode. For example:
    22   *
    23   *      <ReadOnlyGate>
    24   *          <SomeSpicyWriteAction />
    25   *      </ReadOnlyGate>
    26   *
    27   * Do not use ReadOnly gate in a react-router Switch statement as it will break
    28   * redirects. The following will NOT work:
    29   *
    30   *      <Switch>
    31   *          <ReadOnlyGate>
    32   *              <Route path="/private">readonly content</Route>
    33   *          <ReadOnlyGate>
    34   *      </Switch>
    35   *
    36   * In this case, you'll want to do the following:
    37   *
    38   *      <Switch>
    39   *          {isReadOnlyMode &&
    40   *              <Route path="/private">readonly content</Route>
    41   *          }
    42   *      </Switch>
    43   */
    44  export const ReadOnlyGate: React.FunctionComponent = ({ children }) => {
    45      if (isReadOnlyMode()) {
    46          return <></>;
    47      }
    48  
    49      return <>{children}</>;
    50  };