chore(fe): Surface Id in Project/Org Settings (#74155)

After we started supporting Ids in our APIs, we would like to make a
similar change in our CLI. For our users to actually use CLI, we should
surface the ids for their org and projects more prominently.

Here I add it to their settings page. 

![image](https://github.com/getsentry/sentry/assets/33237075/903ace9d-80d5-4846-b746-8a864b42b44e)

![image](https://github.com/getsentry/sentry/assets/33237075/974262e1-d730-4a4b-8d89-9f2ab4a6dc54)
<img width="1044" alt="image"
src="https://github.com/user-attachments/assets/c10abc28-8890-439a-bbfc-1e3ec43f72af">

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx

@@ -10,6 +10,7 @@ import AvatarChooser from 'sentry/components/avatarChooser';
 import Tag from 'sentry/components/badge/tag';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
+import type {FieldObject} from 'sentry/components/forms/types';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {Hovercard} from 'sentry/components/hovercard';
 import organizationSettingsFields from 'sentry/data/forms/organizationGeneralSettings';
@@ -48,8 +49,21 @@ function OrganizationSettingsForm({initialData, onSave}: Props) {
 
   const forms = useMemo(() => {
     const formsConfig = cloneDeep(organizationSettingsFields);
+    const organizationIdField: FieldObject = {
+      name: 'organizationId',
+      type: 'string',
+      disabled: true,
+      label: t('Organization ID'),
+      setValue(_, _name) {
+        return organization.id;
+      },
+      help: `The unique identifier for this organization. It cannot be modified.`,
+    };
+
     formsConfig[0].fields = [
-      ...formsConfig[0].fields,
+      ...formsConfig[0].fields.slice(0, 2),
+      organizationIdField,
+      ...formsConfig[0].fields.slice(2),
       {
         name: 'codecovAccess',
         type: 'boolean',

static/app/views/settings/organizationTeams/teamSettings/index.tsx

@@ -1,5 +1,6 @@
-import {Fragment} from 'react';
+import {Fragment, useMemo} from 'react';
 import type {RouteComponentProps} from 'react-router';
+import cloneDeep from 'lodash/cloneDeep';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {removeTeam, updateTeamSuccess} from 'sentry/actionCreators/teams';
@@ -10,6 +11,7 @@ import FieldGroup from 'sentry/components/forms/fieldGroup';
 import type {FormProps} from 'sentry/components/forms/form';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
+import type {FieldObject} from 'sentry/components/forms/types';
 import Panel from 'sentry/components/panels/panel';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -55,6 +57,25 @@ function TeamSettings({team, params}: TeamSettingsProps) {
   const hasTeamWrite = hasEveryAccess(['team:write'], {organization, team});
   const hasTeamAdmin = hasEveryAccess(['team:admin'], {organization, team});
 
+  const forms = useMemo(() => {
+    const formsConfig = cloneDeep(teamSettingsFields);
+
+    const teamIdField: FieldObject = {
+      name: 'teamId',
+      type: 'string',
+      disabled: true,
+      label: t('Team ID'),
+      setValue(_, _name) {
+        return team.id;
+      },
+      help: `The unique identifier for this team. It cannot be modified.`,
+    };
+
+    formsConfig[0].fields = [...formsConfig[0].fields, teamIdField];
+
+    return formsConfig;
+  }, [team]);
+
   return (
     <Fragment>
       <SentryDocumentTitle title={t('Team Settings')} orgSlug={organization.slug} />
@@ -77,7 +98,7 @@ function TeamSettings({team, params}: TeamSettingsProps) {
           additionalFieldProps={{
             hasTeamWrite,
           }}
-          forms={teamSettingsFields}
+          forms={forms}
         />
       </Form>
 

static/app/views/settings/projectGeneralSettings/index.tsx

@@ -16,6 +16,7 @@ import type {FormProps} from 'sentry/components/forms/form';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import type {FieldValue} from 'sentry/components/forms/model';
+import type {FieldObject} from 'sentry/components/forms/types';
 import Hook from 'sentry/components/hook';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {removePageFiltersStorage} from 'sentry/components/organizations/pageFilters/persistence';
@@ -303,6 +304,17 @@ class ProjectGeneralSettings extends DeprecatedAsyncView<Props, State> {
       },
     };
 
+    const projectIdField: FieldObject = {
+      name: 'projectId',
+      type: 'string',
+      disabled: true,
+      label: t('Project ID'),
+      setValue(_, _name) {
+        return project.id;
+      },
+      help: `The unique identifier for this project. It cannot be modified.`,
+    };
+
     return (
       <div>
         <SettingsPageHeader title={t('Project Settings')} />
@@ -311,7 +323,7 @@ class ProjectGeneralSettings extends DeprecatedAsyncView<Props, State> {
           <JsonForm
             {...jsonFormProps}
             title={t('Project Details')}
-            fields={[fields.name, fields.platform]}
+            fields={[fields.name, projectIdField, fields.platform]}
           />
           <JsonForm
             {...jsonFormProps}