github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/Settings/index.tsx (about)

     1  import React from 'react';
     2  import { Switch, Route, useRouteMatch, NavLink } from 'react-router-dom';
     3  import Box from '@webapp/ui/Box';
     4  import Icon from '@webapp/ui/Icon';
     5  import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
     6  import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
     7  import { faSlidersH } from '@fortawesome/free-solid-svg-icons/faSlidersH';
     8  import { faUserAlt } from '@fortawesome/free-solid-svg-icons/faUserAlt';
     9  import { faNetworkWired } from '@fortawesome/free-solid-svg-icons/faNetworkWired';
    10  import cx from 'classnames';
    11  import { useAppSelector } from '@webapp/redux/hooks';
    12  import { selectCurrentUser } from '@webapp/redux/reducers/user';
    13  import { User } from '@webapp/models/users';
    14  import PageTitle from '@webapp/components/PageTitle';
    15  import Preferences from './Preferences';
    16  import Security from './Security';
    17  import Users from './Users';
    18  import Apps from './Apps';
    19  import ApiKeys from './APIKeys';
    20  
    21  import styles from './Settings.module.css';
    22  import UserAddForm from './Users/UserAddForm';
    23  import APIKeyAddForm from './APIKeys/APIKeyAddForm';
    24  
    25  function Settings() {
    26    const { path, url } = useRouteMatch();
    27    const currentUser = useAppSelector(selectCurrentUser);
    28  
    29    const isAdmin = (user?: User) => user && user.role === 'Admin';
    30    const isExternal = (user?: User) => user && user.isExternal;
    31  
    32    return (
    33      <div className="pyroscope-app">
    34        <h1>Settings</h1>
    35        <nav>
    36          <ul className={styles.settingsNav}>
    37            <li>
    38              <NavLink
    39                to={`${url}`}
    40                exact
    41                className={(isActive) =>
    42                  cx({ [styles.navLink]: true, [styles.navLinkActive]: isActive })
    43                }
    44                data-testid="settings-profiletab"
    45              >
    46                <Icon icon={faSlidersH} /> Profile
    47              </NavLink>
    48            </li>
    49            {!isExternal(currentUser) && (
    50              <>
    51                <li>
    52                  <NavLink
    53                    to={`${url}/security`}
    54                    className={(isActive) =>
    55                      cx({
    56                        [styles.navLink]: true,
    57                        [styles.navLinkActive]: isActive,
    58                      })
    59                    }
    60                    data-testid="settings-changepasswordtab"
    61                  >
    62                    <Icon icon={faLock} /> Change Password
    63                  </NavLink>
    64                </li>
    65              </>
    66            )}
    67            {isAdmin(currentUser) ? (
    68              <>
    69                <li>
    70                  <NavLink
    71                    to={`${url}/users`}
    72                    className={(isActive) =>
    73                      cx({
    74                        [styles.navLink]: true,
    75                        [styles.navLinkActive]: isActive,
    76                      })
    77                    }
    78                    data-testid="settings-userstab"
    79                  >
    80                    <Icon icon={faUserAlt} /> Users
    81                  </NavLink>
    82                </li>
    83                <li>
    84                  <NavLink
    85                    to={`${url}/api-keys`}
    86                    className={(isActive) =>
    87                      cx({
    88                        [styles.navLink]: true,
    89                        [styles.navLinkActive]: isActive,
    90                      })
    91                    }
    92                    data-testid="settings-apikeystab"
    93                  >
    94                    <Icon icon={faKey} /> API keys
    95                  </NavLink>
    96                </li>
    97                <li>
    98                  <NavLink
    99                    to={`${url}/apps`}
   100                    className={(isActive) =>
   101                      cx({
   102                        [styles.navLink]: true,
   103                        [styles.navLinkActive]: isActive,
   104                      })
   105                    }
   106                    data-testid="settings-appstab"
   107                  >
   108                    <Icon icon={faNetworkWired} /> Apps
   109                  </NavLink>
   110                </li>
   111              </>
   112            ) : null}
   113          </ul>
   114        </nav>
   115        <div className="main-wrapper">
   116          <Box className={styles.settingsWrapper}>
   117            <Switch>
   118              <Route exact path={path}>
   119                <>
   120                  <PageTitle title="Settings / Preferences" />
   121                  <Preferences />
   122                </>
   123              </Route>
   124              <Route path={`${path}/security`}>
   125                <>
   126                  <PageTitle title="Settings / Security" />
   127                  <Security />
   128                </>
   129              </Route>
   130              <Route exact path={`${path}/users`}>
   131                <>
   132                  <PageTitle title="Settings / Users" />
   133                  <Users />
   134                </>
   135              </Route>
   136              <Route exact path={`${path}/users/add`}>
   137                <>
   138                  <PageTitle title="Settings / Users / Add" />
   139                  <UserAddForm />
   140                </>
   141              </Route>
   142              <Route exact path={`${path}/api-keys`}>
   143                <>
   144                  <PageTitle title="Settings / API Keys" />
   145                  <ApiKeys />
   146                </>
   147              </Route>
   148              <Route exact path={`${path}/api-keys/add`}>
   149                <>
   150                  <PageTitle title="Settings / Add API Key" />
   151                  <APIKeyAddForm />
   152                </>
   153              </Route>
   154              <Route exact path={`${path}/apps`}>
   155                <>
   156                  <PageTitle title="Settings / Apps" />
   157                  <Apps />
   158                </>
   159              </Route>
   160            </Switch>
   161          </Box>
   162        </div>
   163      </div>
   164    );
   165  }
   166  
   167  export default Settings;