fix: move custom fields to org settings (#5163)

Co-authored-by: Matthew Elwell <matthew.elwell@flagsmith.com>

Author: tiagoapolo

frontend/common/types/responses.ts

@@ -623,7 +623,6 @@ export type ContentType = {
 
 export type isRequiredFor = {
   content_type: number
-  object_id: number
 }
 
 export type MetadataModelField = {

frontend/web/components/metadata/AddMetadataToEntity.tsx

@@ -249,11 +249,11 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
               No custom fields configured for {entity}s. Add custom fields in
               your{' '}
               <a
-                href={`/project/${projectId}/settings?tab=custom-fields`}
+                href={`/organisation/${organisationId}/settings?tab=custom-fields`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Project Settings
+                Organisation Settings
               </a>
               .
             </FormGroup>

frontend/web/components/metadata/MetadataPage.tsx

@@ -16,7 +16,6 @@ import PlanBasedBanner from 'components/PlanBasedAccess'
 const metadataWidth = [200, 150, 150, 90]
 type MetadataPageType = {
   organisationId: string
-  projectId: string
 }
 
 type MergeMetadata = {
@@ -28,7 +27,7 @@ type MergeMetadata = {
   organisation: number
 }
 
-const MetadataPage: FC<MetadataPageType> = ({ organisationId, projectId }) => {
+const MetadataPage: FC<MetadataPageType> = ({ organisationId }) => {
   const { data: metadataFieldList } = useGetMetadataFieldListQuery({
     organisation: organisationId,
   })

frontend/web/components/modals/CreateMetadataField.tsx

@@ -94,7 +94,7 @@ const CreateMetadataField: FC<CreateMetadataFieldType> = ({
   const metadataContentType: ContentType =
   supportedContentTypes &&
   Utils.getContentType(supportedContentTypes, 'model', MetadataContentType.ORGANISATION)
-  
+
   useEffect(() => {
     if (data && !isLoading) {
       setName(data.name)

frontend/web/components/pages/OrganisationSettingsPage.js

@@ -18,9 +18,11 @@ import AccountProvider from 'common/providers/AccountProvider'
 import LicensingTabContent from 'components/LicensingTabContent'
 import Utils from 'common/utils/utils'
 import AuditLogWebhooks from 'components/modals/AuditLogWebhooks'
+import MetadataPage from 'components/metadata/MetadataPage'
 
 const SettingsTab = {
   'Billing': 'billing',
+  'CustomFields': 'custom-fields',
   'General': 'general',
   'Keys': 'keys',
   'Licensing': 'licensing',
@@ -193,6 +195,7 @@ const OrganisationSettingsPage = class extends Component {
                         SettingsTab.General,
                         paymentsEnabled && !isAWS ? SettingsTab.Billing : null,
                         isEnterprise ? SettingsTab.Licensing : null,
+                        SettingsTab.CustomFields,
                         SettingsTab.Keys,
                         SettingsTab.Webhooks,
                         SettingsTab.SAML,
@@ -426,7 +429,13 @@ const OrganisationSettingsPage = class extends Component {
                             />
                           </TabItem>
                         )}
-
+                        {displayedTabs.includes(SettingsTab.CustomFields) && (
+                          <TabItem tabLabel='Custom Fields'>
+                            <MetadataPage
+                              organisationId={AccountStore.getOrganisation().id}
+                            />
+                          </TabItem>
+                        )}
                         {displayedTabs.includes(SettingsTab.Keys) && (
                           <TabItem tabLabel='API Keys'>
                             <AdminAPIKeys organisationId={organisation.id} />

frontend/web/components/pages/ProjectSettingsPage.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import ConfirmRemoveProject from 'components/modals/ConfirmRemoveProject'
 import ConfirmHideFlags from 'components/modals/ConfirmHideFlags'
-import MetadataPage from 'components/metadata/MetadataPage'
 import EditPermissions from 'components/EditPermissions'
 import Switch from 'components/Switch'
 import _data from 'common/data/base/_data'
@@ -25,6 +24,7 @@ import Setting from 'components/Setting'
 import PlanBasedBanner from 'components/PlanBasedAccess'
 import classNames from 'classnames'
 import EditHealthProvider from 'components/EditHealthProvider'
+import WarningMessage from 'components/WarningMessage'
 
 const ProjectSettingsPage = class extends Component {
   static displayName = 'ProjectSettingsPage'
@@ -604,9 +604,27 @@ const ProjectSettingsPage = class extends Component {
                       />
                     </TabItem>
                     <TabItem tabLabel='Custom Fields'>
-                      <MetadataPage
-                        organisationId={AccountStore.getOrganisation().id}
-                        projectId={this.props.match.params.projectId}
+                      <Row space className='mb-2 mt-4'>
+                        <Row>
+                          <h5>Custom Fields</h5>
+                        </Row>
+                      </Row>
+
+                      <WarningMessage
+                        warningMessage={
+                          <span>
+                            Custom fields have been moved to {' '}
+                            <a
+                              href={`/organisation/${
+                                AccountStore.getOrganisation()?.id
+                              }/settings?tab=custom-fields`}
+                              rel='noreferrer'
+                            >
+                              Organisation Settings
+                            </a>
+                            .
+                          </span>
+                        }
                       />
                     </TabItem>
                     {!!ProjectStore.getEnvs()?.length && (