Skip to content

Commit

Permalink
ref(tsc): convert adminSettings.tsx to FC (#70792)
Browse files Browse the repository at this point in the history 
ref getsentry/frontend-tsc#2

converts this file into FC and use `useApiQuery` instead of
`DeprecatedAsync`
  • Loading branch information
@michellewzhang
michellewzhang authored May 13, 2024
1 parent d099375 commit f5b1a77
Showing 1 changed file with 152 additions and 147 deletions.
299 changes: 152 additions & 147 deletions static/app/views/admin/adminSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import Feature from 'sentry/components/acl/feature';
import Form from 'sentry/components/forms/form';
import LoadingError from 'sentry/components/loadingError';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import Panel from 'sentry/components/panels/panel';
import PanelHeader from 'sentry/components/panels/panelHeader';
import {t} from 'sentry/locale';
import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
import {useApiQuery} from 'sentry/utils/queryClient';

import {getOption, getOptionField} from './options';

Expand Down Expand Up @@ -67,165 +69,168 @@ type FieldDef = {
value: string | undefined;
};

type State = DeprecatedAsyncView['state'] & {
data: Record<string, FieldDef>;
};
export default function AdminSettings() {
const {data, isLoading, isError} = useApiQuery<Record<string, FieldDef>>(
['/internal/options/'],
{
staleTime: 0,
}
);

export default class AdminSettings extends DeprecatedAsyncView<{}, State> {
get endpoint() {
return '/internal/options/';
if (isError) {
return <LoadingError />;
}

getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
return [['data', this.endpoint]];
if (isLoading) {
return <LoadingIndicator />;
}

renderBody() {
const {data} = this.state;

const initialData = {};
const fields = {};
for (const key of optionsAvailable) {
// TODO(dcramer): we should not be mutating options
const option = data[key] ?? {field: {}, value: undefined};
const initialData = {};
const fields = {};
for (const key of optionsAvailable) {
// TODO(dcramer): we should not be mutating options
const option = data[key] ?? {field: {}, value: undefined};

if (option.value === undefined || option.value === '') {
const defn = getOption(key);
initialData[key] = defn.defaultValue ? defn.defaultValue() : '';
} else {
initialData[key] = option.value;
}
fields[key] = getOptionField(key, option.field);
if (option.value === undefined || option.value === '') {
const defn = getOption(key);
initialData[key] = defn.defaultValue ? defn.defaultValue() : '';
} else {
initialData[key] = option.value;
}
fields[key] = getOptionField(key, option.field);
}

return (
<div>
<h3>{t('Settings')}</h3>

return (
<div>
<h3>{t('Settings')}</h3>
<Form
apiMethod="PUT"
apiEndpoint={'/internal/options/'}
initialData={initialData}
saveOnBlur
>
<Panel>
<PanelHeader>{t('General')}</PanelHeader>
{fields['system.url-prefix']}
{fields['system.admin-email']}
{fields['system.support-email']}
{fields['system.security-email']}
{fields['system.rate-limit']}
</Panel>

<Form
apiMethod="PUT"
apiEndpoint={this.endpoint}
initialData={initialData}
saveOnBlur
>
<Panel>
<PanelHeader>{t('Security & Abuse')}</PanelHeader>
{fields['auth.allow-registration']}
{fields['auth.ip-rate-limit']}
{fields['auth.user-rate-limit']}
{fields['api.rate-limit.org-create']}
</Panel>

<Panel>
<PanelHeader>{t('Beacon')}</PanelHeader>
{fields['beacon.anonymous']}
</Panel>

<Feature features="organizations:performance-issues-dev">
<Panel>
<PanelHeader>General</PanelHeader>
{fields['system.url-prefix']}
{fields['system.admin-email']}
{fields['system.support-email']}
{fields['system.security-email']}
{fields['system.rate-limit']}
<PanelHeader>{t('Performance Issues - All')}</PanelHeader>
{fields['performance.issues.all.problem-detection']}
</Panel>

<Panel>
<PanelHeader>Security & Abuse</PanelHeader>
{fields['auth.allow-registration']}
{fields['auth.ip-rate-limit']}
{fields['auth.user-rate-limit']}
{fields['api.rate-limit.org-create']}
<PanelHeader>{t('Performance Issues - Detectors')}</PanelHeader>
{fields['performance.issues.n_plus_one_db.problem-creation']}
{fields['performance.issues.n_plus_one_db_ext.problem-creation']}
{fields['performance.issues.n_plus_one_db.count_threshold']}
{fields['performance.issues.n_plus_one_db.duration_threshold']}
</Panel>

<Panel>
<PanelHeader>Beacon</PanelHeader>
{fields['beacon.anonymous']}
<PanelHeader>{t('Performance Issues - Consecutive DB Detector')}</PanelHeader>
{fields['performance.issues.consecutive_db.problem-creation']}
{fields['performance.issues.consecutive_db.la-rollout']}
{fields['performance.issues.consecutive_db.ea-rollout']}
{fields['performance.issues.consecutive_db.ga-rollout']}
</Panel>

<Feature features="organizations:performance-issues-dev">
<Panel>
<PanelHeader>Performance Issues - All</PanelHeader>
{fields['performance.issues.all.problem-detection']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - Detectors</PanelHeader>
{fields['performance.issues.n_plus_one_db.problem-creation']}
{fields['performance.issues.n_plus_one_db_ext.problem-creation']}
{fields['performance.issues.n_plus_one_db.count_threshold']}
{fields['performance.issues.n_plus_one_db.duration_threshold']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - Consecutive DB Detector</PanelHeader>
{fields['performance.issues.consecutive_db.problem-creation']}
{fields['performance.issues.consecutive_db.la-rollout']}
{fields['performance.issues.consecutive_db.ea-rollout']}
{fields['performance.issues.consecutive_db.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - N+1 API Calls Detector</PanelHeader>
{fields['performance.issues.n_plus_one_api_calls.problem-creation']}
{fields['performance.issues.n_plus_one_api_calls.la-rollout']}
{fields['performance.issues.n_plus_one_api_calls.ea-rollout']}
{fields['performance.issues.n_plus_one_api_calls.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - Compressed Assets Detector</PanelHeader>
{fields['performance.issues.compressed_assets.problem-creation']}
{fields['performance.issues.compressed_assets.la-rollout']}
{fields['performance.issues.compressed_assets.ea-rollout']}
{fields['performance.issues.compressed_assets.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - File IO on Main Thread</PanelHeader>
{fields['performance.issues.file_io_main_thread.problem-creation']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - Slow DB Span Detector</PanelHeader>
{fields['performance.issues.slow_db_query.problem-creation']}
{fields['performance.issues.slow_db_query.la-rollout']}
{fields['performance.issues.slow_db_query.ea-rollout']}
{fields['performance.issues.slow_db_query.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
Performance Issues - Large Render Blocking Asset Detector
</PanelHeader>
{fields['performance.issues.render_blocking_assets.problem-creation']}
{fields['performance.issues.render_blocking_assets.la-rollout']}
{fields['performance.issues.render_blocking_assets.ea-rollout']}
{fields['performance.issues.render_blocking_assets.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - MN+1 DB Detector</PanelHeader>
{fields['performance.issues.m_n_plus_one_db.problem-creation']}
{fields['performance.issues.m_n_plus_one_db.la-rollout']}
{fields['performance.issues.m_n_plus_one_db.ea-rollout']}
{fields['performance.issues.m_n_plus_one_db.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
Performance Issues - Consecutive HTTP Span Detector
</PanelHeader>
{fields['performance.issues.consecutive_http.max_duration_between_spans']}
{fields['performance.issues.consecutive_http.consecutive_count_threshold']}
{fields['performance.issues.consecutive_http.span_duration_threshold']}
</Panel>
<Panel>
<PanelHeader>Performance Issues - Large HTTP Payload Detector</PanelHeader>
{fields['performance.issues.large_http_payload.size_threshold']}
</Panel>
<Panel>
<PanelHeader>
Profiling Issues - Block Main Thread Detector Ingest
</PanelHeader>
{fields['profile.issues.blocked_main_thread-ingest.la-rollout']}
{fields['profile.issues.blocked_main_thread-ingest.ea-rollout']}
{fields['profile.issues.blocked_main_thread-ingest.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
Profiling Issues - Block Main Thread Detector Post Process Group
</PanelHeader>
{fields['profile.issues.blocked_main_thread-ppg.la-rollout']}
{fields['profile.issues.blocked_main_thread-ppg.ea-rollout']}
{fields['profile.issues.blocked_main_thread-ppg.ga-rollout']}
</Panel>
</Feature>
<Feature features="organizations:view-hierarchies-options-dev">
<Panel>
<PanelHeader>View Hierarchy</PanelHeader>
</Panel>
</Feature>
</Form>
</div>
);
}
<Panel>
<PanelHeader>{t('Performance Issues - N+1 API Calls Detector')}</PanelHeader>
{fields['performance.issues.n_plus_one_api_calls.problem-creation']}
{fields['performance.issues.n_plus_one_api_calls.la-rollout']}
{fields['performance.issues.n_plus_one_api_calls.ea-rollout']}
{fields['performance.issues.n_plus_one_api_calls.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
{t('Performance Issues - Compressed Assets Detector')}
</PanelHeader>
{fields['performance.issues.compressed_assets.problem-creation']}
{fields['performance.issues.compressed_assets.la-rollout']}
{fields['performance.issues.compressed_assets.ea-rollout']}
{fields['performance.issues.compressed_assets.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>{t('Performance Issues - File IO on Main Thread')}</PanelHeader>
{fields['performance.issues.file_io_main_thread.problem-creation']}
</Panel>
<Panel>
<PanelHeader>{t('Performance Issues - Slow DB Span Detector')}</PanelHeader>
{fields['performance.issues.slow_db_query.problem-creation']}
{fields['performance.issues.slow_db_query.la-rollout']}
{fields['performance.issues.slow_db_query.ea-rollout']}
{fields['performance.issues.slow_db_query.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
{t('Performance Issues - Large Render Blocking Asset Detector')}
</PanelHeader>
{fields['performance.issues.render_blocking_assets.problem-creation']}
{fields['performance.issues.render_blocking_assets.la-rollout']}
{fields['performance.issues.render_blocking_assets.ea-rollout']}
{fields['performance.issues.render_blocking_assets.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>{t('Performance Issues - MN+1 DB Detector')}</PanelHeader>
{fields['performance.issues.m_n_plus_one_db.problem-creation']}
{fields['performance.issues.m_n_plus_one_db.la-rollout']}
{fields['performance.issues.m_n_plus_one_db.ea-rollout']}
{fields['performance.issues.m_n_plus_one_db.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
{t('Performance Issues - Consecutive HTTP Span Detector')}
</PanelHeader>
{fields['performance.issues.consecutive_http.max_duration_between_spans']}
{fields['performance.issues.consecutive_http.consecutive_count_threshold']}
{fields['performance.issues.consecutive_http.span_duration_threshold']}
</Panel>
<Panel>
<PanelHeader>
{t('Performance Issues - Large HTTP Payload Detector')}
</PanelHeader>
{fields['performance.issues.large_http_payload.size_threshold']}
</Panel>
<Panel>
<PanelHeader>
{t('Profiling Issues - Block Main Thread Detector Ingest')}
</PanelHeader>
{fields['profile.issues.blocked_main_thread-ingest.la-rollout']}
{fields['profile.issues.blocked_main_thread-ingest.ea-rollout']}
{fields['profile.issues.blocked_main_thread-ingest.ga-rollout']}
</Panel>
<Panel>
<PanelHeader>
{t('Profiling Issues - Block Main Thread Detector Post Process Group')}
</PanelHeader>
{fields['profile.issues.blocked_main_thread-ppg.la-rollout']}
{fields['profile.issues.blocked_main_thread-ppg.ea-rollout']}
{fields['profile.issues.blocked_main_thread-ppg.ga-rollout']}
</Panel>
</Feature>
<Feature features="organizations:view-hierarchies-options-dev">
<Panel>
<PanelHeader>{t('View Hierarchy')}</PanelHeader>
</Panel>
</Feature>
</Form>
</div>
);
}

0 comments on commit f5b1a77

Please sign in to comment.