Chore: convert settings page to function component (#43731)

public/app/features/admin/AdminEditOrgPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import Page from 'app/core/components/Page/Page';
 import { useSelector } from 'react-redux';
 import { StoreState, OrgUser, AccessControlAction } from 'app/types';
@@ -37,7 +37,7 @@ const removeOrgUser = async (orgUser: OrgUser, orgId: UrlQueryValue) => {
 
 interface Props extends GrafanaRouteComponentProps<{ id: string }> {}
 
-export const AdminEditOrgPage: FC<Props> = ({ match }) => {
+export default function AdminEditOrgPage({ match }: Props) {
   const navIndex = useSelector((state: StoreState) => state.navIndex);
   const navModel = getNavModel(navIndex, 'global-orgs');
   const orgId = parseInt(match.params.id, 10);
@@ -123,6 +123,4 @@ export const AdminEditOrgPage: FC<Props> = ({ match }) => {
       </Page.Contents>
     </Page>
   );
-};
-
-export default AdminEditOrgPage;
+}

public/app/features/admin/AdminListOrgsPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { getNavModel } from 'app/core/selectors/navModel';
 import Page from 'app/core/components/Page/Page';
 import { useSelector } from 'react-redux';
@@ -22,7 +22,7 @@ const getErrorMessage = (error: any) => {
   return error?.data?.message || 'An unexpected error happened.';
 };
 
-export const AdminListOrgsPages: FC = () => {
+export default function AdminListOrgsPages() {
   const navIndex = useSelector((state: StoreState) => state.navIndex);
   const navModel = getNavModel(navIndex, 'global-orgs');
   const [state, fetchOrgs] = useAsyncFn(async () => await getOrgs(), []);
@@ -56,6 +56,4 @@ export const AdminListOrgsPages: FC = () => {
       </Page.Contents>
     </Page>
   );
-};
-
-export default AdminListOrgsPages;
+}

public/app/features/admin/AdminOrgsTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { AccessControlAction, Organization } from 'app/types';
 import { Button, ConfirmModal } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
@@ -8,7 +8,7 @@ interface Props {
   onDelete: (orgId: number) => void;
 }
 
-export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
+export function AdminOrgsTable({ orgs, onDelete }: Props) {
   const canDeleteOrgs = contextSrv.hasPermission(AccessControlAction.OrgsDelete);
 
   const [deleteOrg, setDeleteOrg] = useState<Organization>();
@@ -64,4 +64,4 @@ export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
       )}
     </table>
   );
-};
+}

public/app/features/admin/AdminSettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { useAsync } from 'react-use';
 import { getBackendSrv } from '@grafana/runtime';
 import { NavModel } from '@grafana/data';
 
@@ -13,37 +14,21 @@ interface Props {
   navModel: NavModel;
 }
 
-interface State {
-  settings: Settings;
-  isLoading: boolean;
-}
+function AdminSettings({ navModel }: Props) {
+  const { loading, value: settings } = useAsync(
+    () => getBackendSrv().get('/api/admin/settings') as Promise<Settings>,
+    []
+  );
 
-export class AdminSettings extends React.PureComponent<Props, State> {
-  state: State = {
-    settings: {},
-    isLoading: true,
-  };
-
-  async componentDidMount() {
-    const settings: Settings = await getBackendSrv().get('/api/admin/settings');
-    this.setState({
-      settings,
-      isLoading: false,
-    });
-  }
-
-  render() {
-    const { settings, isLoading } = this.state;
-    const { navModel } = this.props;
-
-    return (
-      <Page navModel={navModel}>
-        <Page.Contents isLoading={isLoading}>
-          <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
-            These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
-            these you currently need to restart Grafana.
-          </div>
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents isLoading={loading}>
+        <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
+          These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
+          these you currently need to restart Grafana.
+        </div>
 
+        {settings && (
           <table className="filter-table">
             <tbody>
               {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
@@ -62,10 +47,10 @@ export class AdminSettings extends React.PureComponent<Props, State> {
               ))}
             </tbody>
           </table>
-        </Page.Contents>
-      </Page>
-    );
-  }
+        )}
+      </Page.Contents>
+    </Page>
+  );
 }
 
 const mapStateToProps = (state: StoreState) => ({

public/app/features/admin/LicenseChrome.tsx

@@ -32,9 +32,10 @@ interface Props {
   header: string;
   subheader?: string;
   editionNotice?: string;
+  children?: React.ReactNode;
 }
 
-export const LicenseChrome: React.FC<Props> = ({ header, editionNotice, subheader, children }) => {
+export function LicenseChrome({ header, editionNotice, subheader, children }: Props) {
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -68,7 +69,7 @@ export const LicenseChrome: React.FC<Props> = ({ header, editionNotice, subheade
       {editionNotice && <div className={styles.footer}>{editionNotice}</div>}
     </>
   );
-};
+}
 
 interface CircleProps {
   size: string;

public/app/features/admin/OrgRolePicker.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { OrgRole } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
@@ -13,14 +13,7 @@ interface Props {
 
 const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key }));
 
-export const OrgRolePicker: FC<Props> = ({
-  value,
-  onChange,
-  'aria-label': ariaLabel,
-  inputId,
-  autoFocus,
-  ...restProps
-}) => {
+export function OrgRolePicker({ value, onChange, 'aria-label': ariaLabel, inputId, autoFocus, ...restProps }: Props) {
   return (
     <Select
       menuShouldPortal
@@ -34,4 +27,4 @@ export const OrgRolePicker: FC<Props> = ({
       {...restProps}
     />
   );
-};
+}

public/app/features/admin/UpgradePage.tsx

@@ -13,7 +13,7 @@ interface Props {
   navModel: NavModel;
 }
 
-export const UpgradePage: React.FC<Props> = ({ navModel }) => {
+export function UpgradePage({ navModel }: Props) {
   return (
     <Page navModel={navModel}>
       <Page.Contents>
@@ -25,7 +25,7 @@ export const UpgradePage: React.FC<Props> = ({ navModel }) => {
       </Page.Contents>
     </Page>
   );
-};
+}
 
 const titleStyles = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };