From 36c8bb3c401ed153dcc0e866e0edab49746a4ff9 Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:17:32 -0400
Subject: [PATCH] fix: Metadata UI issues (#4069)

Co-authored-by: Matthew Elwell <matthew.elwell@flagsmith.com>
---
 frontend/common/constants.ts                  |   3 +-
 frontend/common/dispatcher/app-actions.js     |   3 +-
 frontend/common/providers/ProjectProvider.js  |   4 +-
 frontend/common/services/useFeatureVersion.ts |   2 +-
 frontend/common/stores/feature-list-store.ts  |   2 +-
 frontend/common/stores/project-store.js       |   5 +-
 frontend/web/components/AuditLog.tsx          |  16 +--
 frontend/web/components/ErrorMessage.js       |   9 +-
 frontend/web/components/FeatureVersion.tsx    |   4 +-
 frontend/web/components/IntegrationList.js    |   2 +-
 .../metadata/AddMetadataToEntity.tsx          |  49 +++++--
 .../ContentTypesMetadataFieldTable.tsx        |   2 +-
 .../web/components/metadata/MetadataPage.tsx  |  20 +--
 .../web/components/metadata/MetadataTitle.tsx |  32 +++++
 frontend/web/components/modals/CreateFlag.js  |  59 ++++----
 .../components/modals/CreateMetadataField.tsx | 135 ++++++++++--------
 .../web/components/modals/CreateSegment.tsx   |  78 +++++++---
 .../web/components/pages/AuditLogItemPage.tsx |   6 +-
 .../components/pages/CreateEnvironmentPage.js |  60 +++++++-
 .../pages/EnvironmentSettingsPage.js          |   5 +-
 .../pages/FeatureHistoryDetailPage.tsx        |   2 +-
 frontend/web/components/pages/HomePage.js     |   2 +-
 .../web/components/pages/SegmentsPage.tsx     |   1 -
 23 files changed, 335 insertions(+), 166 deletions(-)
 create mode 100644 frontend/web/components/metadata/MetadataTitle.tsx

diff --git a/frontend/common/constants.ts b/frontend/common/constants.ts
index b4e75f6bda8b..12a7c62c0222 100644
--- a/frontend/common/constants.ts
+++ b/frontend/common/constants.ts
@@ -518,7 +518,8 @@ export default {
       'Set different values for your feature based on what segments users are in. Identity overrides will take priority over any segment override.',
     TAGS_DESCRIPTION:
       'Organise your flags with tags, tagging your features as "<strong>protected</strong>" will prevent them from accidentally being deleted.',
-    TOOLTIP_METADATA_DESCRIPTION: 'Add metadata in your',
+    TOOLTIP_METADATA_DESCRIPTION: (entity: string) =>
+      `Add Metadata in your <strong>${entity}</strong>, you can create the Metadata Fields in the project settings.`,
     USER_PROPERTY_DESCRIPTION:
       'The name of the user trait or custom property belonging to the user, e.g. firstName',
     WEBHOOKS_DESCRIPTION:
diff --git a/frontend/common/dispatcher/app-actions.js b/frontend/common/dispatcher/app-actions.js
index 1012667780b0..90adb94f4f96 100644
--- a/frontend/common/dispatcher/app-actions.js
+++ b/frontend/common/dispatcher/app-actions.js
@@ -29,11 +29,12 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       pin,
     })
   },
-  createEnv(name, projectId, cloneId, description) {
+  createEnv(name, projectId, cloneId, description, metadata) {
     Dispatcher.handleViewAction({
       actionType: Actions.CREATE_ENV,
       cloneId,
       description,
+      metadata,
       name,
       projectId,
     })
diff --git a/frontend/common/providers/ProjectProvider.js b/frontend/common/providers/ProjectProvider.js
index 2f29fd73b75c..cf91d54a0c1a 100644
--- a/frontend/common/providers/ProjectProvider.js
+++ b/frontend/common/providers/ProjectProvider.js
@@ -40,8 +40,8 @@ const ProjectProvider = class extends React.Component {
     })
   }
 
-  createEnv = (env, projectId, cloneId, description) => {
-    AppActions.createEnv(env, projectId, cloneId, description)
+  createEnv = (env, projectId, cloneId, description, metadata) => {
+    AppActions.createEnv(env, projectId, cloneId, description, metadata)
   }
 
   editEnv = (env) => {
diff --git a/frontend/common/services/useFeatureVersion.ts b/frontend/common/services/useFeatureVersion.ts
index f389d6ce09ab..91fa9449d740 100644
--- a/frontend/common/services/useFeatureVersion.ts
+++ b/frontend/common/services/useFeatureVersion.ts
@@ -136,11 +136,11 @@ export const featureVersionService = service
           }
 
           const ret = {
+            error: res.find((v) => !!v.error)?.error,
             feature_states: res.map((item) => ({
               ...item,
               version_sha: versionRes.data.uuid,
             })),
-            error: res.find((v) => !!v.error)?.error,
             version_sha: versionRes.data.uuid,
           }
 
diff --git a/frontend/common/stores/feature-list-store.ts b/frontend/common/stores/feature-list-store.ts
index b7248ceb4ead..22325753c37d 100644
--- a/frontend/common/stores/feature-list-store.ts
+++ b/frontend/common/stores/feature-list-store.ts
@@ -481,8 +481,8 @@ const controller = {
         environmentId: env.id,
         featureId: projectFlag.id,
         featureStates,
-        skipPublish: true,
         liveFrom: changeRequest.live_from,
+        skipPublish: true,
       })
       environment_feature_versions = [version.version_sha]
     }
diff --git a/frontend/common/stores/project-store.js b/frontend/common/stores/project-store.js
index 13f597615fdf..a174fd7a77eb 100644
--- a/frontend/common/stores/project-store.js
+++ b/frontend/common/stores/project-store.js
@@ -13,7 +13,7 @@ const BaseStore = require('./base/_store')
 const data = require('../data/base/_data')
 
 const controller = {
-  createEnv: (name, projectId, cloneId, description) => {
+  createEnv: (name, projectId, cloneId, description, metadata) => {
     API.trackEvent(Constants.events.CREATE_ENVIRONMENT)
     store.saving()
     const req = cloneId
@@ -26,12 +26,12 @@ const controller = {
           name,
           project: projectId,
         })
-
     req
       .then((res) =>
         data
           .put(`${Project.api}environments/${res.api_key}/`, {
             description,
+            metadata: metadata || [],
             name,
             project: projectId,
           })
@@ -247,6 +247,7 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
         action.projectId,
         action.cloneId,
         action.description,
+        action.metadata,
       )
       break
     case Actions.EDIT_ENVIRONMENT:
diff --git a/frontend/web/components/AuditLog.tsx b/frontend/web/components/AuditLog.tsx
index 8a77f28f5a3f..8242acff616b 100644
--- a/frontend/web/components/AuditLog.tsx
+++ b/frontend/web/components/AuditLog.tsx
@@ -65,7 +65,7 @@ const AuditLog: FC<AuditLogType> = (props) => {
       search,
     },
     {
-      refetchOnMountOrArgChange: true
+      refetchOnMountOrArgChange: true,
     },
   )
 
@@ -128,13 +128,13 @@ const AuditLog: FC<AuditLogType> = (props) => {
             style={{ width: widths[2] }}
             to={`/project/${props.projectId}/environment/${environment?.api_key}/features/`}
           >
-              <Tag
-                tag={{
-                  color: Utils.getTagColour(colour),
-                  label: environment?.name,
-                }}
-                className='chip--sm'
-              />
+            <Tag
+              tag={{
+                color: Utils.getTagColour(colour),
+                label: environment?.name,
+              }}
+              className='chip--sm'
+            />
           </Link>
         ) : (
           <div className='table-column' style={{ width: widths[2] }} />
diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
index 50c6e0f9e11b..cbf1832f6c7e 100644
--- a/frontend/web/components/ErrorMessage.js
+++ b/frontend/web/components/ErrorMessage.js
@@ -12,7 +12,14 @@ export default class ErrorMessage extends PureComponent {
     const errorMessageClassName = `alert alert-danger ${
       this.props.errorMessageClass || 'flex-1 align-items-center'
     }`
-    const error = this.props.error?.data || this.props.error?.message || this.props.error
+    const error =
+      this.props.error?.data?.metadata?.find((item) =>
+        // eslint-disable-next-line no-prototype-builtins
+        item.hasOwnProperty('non_field_errors'),
+      )?.non_field_errors[0] ||
+      this.props.error?.data ||
+      this.props.error?.message ||
+      this.props.error
     return this.props.error ? (
       <div
         className={errorMessageClassName}
diff --git a/frontend/web/components/FeatureVersion.tsx b/frontend/web/components/FeatureVersion.tsx
index 617d727c590b..6004ac5016ae 100644
--- a/frontend/web/components/FeatureVersion.tsx
+++ b/frontend/web/components/FeatureVersion.tsx
@@ -3,9 +3,7 @@ import DiffFeature from './diff/DiffFeature'
 import { useGetVersionFeatureStateQuery } from 'common/services/useVersionFeatureState'
 import InfoMessage from './InfoMessage'
 import moment from 'moment'
-import {
-  useGetFeatureVersionQuery,
-} from 'common/services/useFeatureVersion'
+import { useGetFeatureVersionQuery } from 'common/services/useFeatureVersion'
 
 type VersionDiffType = {
   oldUUID: string
diff --git a/frontend/web/components/IntegrationList.js b/frontend/web/components/IntegrationList.js
index c236a1a087d9..aafabd35c92d 100644
--- a/frontend/web/components/IntegrationList.js
+++ b/frontend/web/components/IntegrationList.js
@@ -374,7 +374,7 @@ class IntegrationList extends Component {
         }
         githubMeta={{ githubId: githubId, installationId: installationId }}
         projectId={this.props.projectId}
-        onComplete={githubId ? this.fetchGithubIntegration : this.fetch }
+        onComplete={githubId ? this.fetchGithubIntegration : this.fetch}
       />,
       'side-modal',
     )
diff --git a/frontend/web/components/metadata/AddMetadataToEntity.tsx b/frontend/web/components/metadata/AddMetadataToEntity.tsx
index 9b451daa7f36..ca3191d06543 100644
--- a/frontend/web/components/metadata/AddMetadataToEntity.tsx
+++ b/frontend/web/components/metadata/AddMetadataToEntity.tsx
@@ -27,11 +27,12 @@ export type CustomMetadataField = MetadataField & {
 type CustomMetadata = (Metadata & CustomMetadataField) | null
 
 type AddMetadataToEntityType = {
+  isCloningEnvironment?: boolean
   organisationId: string
   projectId: string | number
   entityContentType: number
   entityId: string
-  entity: number | string
+  entity: string
   envName?: string
   onChange?: (m: CustomMetadataField[]) => void
   setHasMetadataRequired?: (b: boolean) => void
@@ -42,6 +43,7 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
   entityContentType,
   entityId,
   envName,
+  isCloningEnvironment,
   onChange,
   organisationId,
   projectId,
@@ -102,9 +104,6 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
   }, [metadataFieldsAssociatedtoEntity])
 
   const [metadataChanged, setMetadataChanged] = useState<boolean>(false)
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [metadataFieldsAssociatedtoEntity])
 
   const mergeMetadataEntityWithMetadataField = (
     metadata: Metadata[], // Metadata array
@@ -160,9 +159,7 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
           })
           // Determine if isRequiredFor should be true or false based on is_required_for array
           const isRequiredFor = !!matchingItem?.is_required_for.length
-          if (isRequiredFor) {
-            setHasMetadataRequired?.()
-          }
+          setHasMetadataRequired?.(isRequiredFor)
           // Return the metadata field with additional metadata model field information including isRequiredFor
           return {
             ...meta,
@@ -215,7 +212,7 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
   ])
   return (
     <>
-      <FormGroup className='mt-4 setting'>
+      <FormGroup className='setting'>
         <PanelSearch
           className='mt-1 no-pad'
           header={
@@ -229,6 +226,7 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
             return (
               <MetadataRow
                 metadata={m}
+                entity={entity}
                 getMetadataValue={(m: CustomMetadata) => {
                   setMetadataFieldsAssociatedtoEntity((prevState) =>
                     prevState?.map((metadata) => {
@@ -247,8 +245,22 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
               />
             )
           }}
+          renderNoResults={
+            <FormGroup>
+              No metadata configured for {entity} entity. Add metadata field in
+              your{' '}
+              <a
+                href={`/project/${projectId}/settings?tab=metadata`}
+                target='_blank'
+                rel='noreferrer'
+              >
+                Project Settings
+              </a>
+              .
+            </FormGroup>
+          }
         />
-        {entity === 'environment' && (
+        {entity === 'environment' && !isCloningEnvironment && (
           <div className='text-right'>
             <Button
               theme='primary'
@@ -270,8 +282,12 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
                     project: parseInt(`${projectId}`),
                   },
                   id: entityId,
-                }).then(() => {
-                  toast('Environment Metadata Updated')
+                }).then((res) => {
+                  if (res?.error) {
+                    toast(res?.error?.data.metadata[0], 'danger')
+                  } else {
+                    toast('Environment Metadata Updated')
+                  }
                 })
               }}
             >
@@ -287,8 +303,13 @@ const AddMetadataToEntity: FC<AddMetadataToEntityType> = ({
 type MetadataRowType = {
   metadata: CustomMetadata
   getMetadataValue?: (metadata: CustomMetadata) => void
+  entity: string
 }
-const MetadataRow: FC<MetadataRowType> = ({ getMetadataValue, metadata }) => {
+const MetadataRow: FC<MetadataRowType> = ({
+  entity,
+  getMetadataValue,
+  metadata,
+}) => {
   const [metadataValue, setMetadataValue] = useState<string | boolean>(() => {
     if (metadata?.type === 'bool') {
       return metadata?.field_value === 'true' ? true : false
@@ -307,7 +328,9 @@ const MetadataRow: FC<MetadataRowType> = ({ getMetadataValue, metadata }) => {
     useState<boolean>(false)
   return (
     <Row className='space list-item clickable py-2'>
-      {metadataValueChanged && <div className='unread ml-2 px-1'>{'*'}</div>}
+      {metadataValueChanged && entity !== 'segment' && (
+        <div className='unread ml-2 px-1'>{'*'}</div>
+      )}
       <Flex className='table-column'>{`${metadata?.name} ${
         metadata?.isRequiredFor ? '*' : ''
       }`}</Flex>
diff --git a/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx b/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
index 537e2b3cf7ad..345b0b456006 100644
--- a/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
+++ b/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
@@ -93,7 +93,7 @@ const ContentTypesMetadataFieldTable: FC<
             Entity
           </Flex>
           <div className='table-column text-center' style={{ width: '80px' }}>
-            Requeried
+            Required
           </div>
           <div className='table-column text-center' style={{ width: '80px' }}>
             Remove
diff --git a/frontend/web/components/metadata/MetadataPage.tsx b/frontend/web/components/metadata/MetadataPage.tsx
index 5e3cad20f5c6..0e8485cf832d 100644
--- a/frontend/web/components/metadata/MetadataPage.tsx
+++ b/frontend/web/components/metadata/MetadataPage.tsx
@@ -96,7 +96,8 @@ const MetadataPage: FC<MetadataPageType> = ({ organisationId, projectId }) => {
         </div>
       ),
       destructive: true,
-      onYes: () => deleteMetadata({ id }),
+      onYes: () =>
+        deleteMetadata({ id }).then(() => toast('Metadata Field Deleted')),
       title: 'Delete Metadata Field',
       yesText: 'Confirm',
     })
@@ -105,18 +106,9 @@ const MetadataPage: FC<MetadataPageType> = ({ organisationId, projectId }) => {
   return (
     <div>
       <Row space className='mb-2'>
-        <Tooltip
-          title={
-            <Row>
-              <h5 className='mt-2'>Metadata Fields</h5>
-              <div>
-                <Icon name='info-outlined' />
-              </div>
-            </Row>
-          }
-        >
-          {'Create or Update the Metadata Fields Project'}
-        </Tooltip>
+        <Row>
+          <h5 className='mt-2'>Metadata Fields</h5>
+        </Row>
         <Button className='mt-2' onClick={() => createMetadataField()}>
           {'Create Metadata Field'}
         </Button>
@@ -126,7 +118,7 @@ const MetadataPage: FC<MetadataPageType> = ({ organisationId, projectId }) => {
         <Button
           theme='text'
           target='_blank'
-          href='http://localhost:3000/system-administration/metadata/#metadata-fields'
+          href='https://docs.flagsmith.com/system-administration/metadata/'
           className='fw-normal'
         >
           Learn more.
diff --git a/frontend/web/components/metadata/MetadataTitle.tsx b/frontend/web/components/metadata/MetadataTitle.tsx
new file mode 100644
index 000000000000..f2b26362a274
--- /dev/null
+++ b/frontend/web/components/metadata/MetadataTitle.tsx
@@ -0,0 +1,32 @@
+import Icon from 'components/Icon'
+import React, { FC } from 'react'
+
+type MetadataContainerType = {
+  hasRequiredMetadata: boolean
+  visible: boolean
+  onVisibleChange: (v: boolean) => void
+}
+
+const MetadataContainer: FC<MetadataContainerType> = ({
+  hasRequiredMetadata,
+  onVisibleChange,
+  visible,
+}) => {
+  return (
+    <div
+      style={{ cursor: 'pointer' }}
+      onClick={() => {
+        onVisibleChange(!visible)
+      }}
+    >
+      <Row>
+        <label className='mt-1'>Metadata</label>
+        {!hasRequiredMetadata && (
+          <Icon name={visible ? 'chevron-down' : 'chevron-right'} />
+        )}
+      </Row>
+    </div>
+  )
+}
+
+export default MetadataContainer
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
index 1df97da9a44b..01ff186197e7 100644
--- a/frontend/web/components/modals/CreateFlag.js
+++ b/frontend/web/components/modals/CreateFlag.js
@@ -40,6 +40,7 @@ import { getSupportedContentType } from 'common/services/useSupportedContentType
 import { getGithubIntegration } from 'common/services/useGithubIntegration'
 import { removeUserOverride } from 'components/RemoveUserOverride'
 import ExternalResourcesLinkTab from 'components/ExternalResourcesLinkTab'
+import MetadataTitle from 'components/metadata/MetadataTitle'
 import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation'
 
 const CreateFlag = class extends Component {
@@ -53,7 +54,6 @@ const CreateFlag = class extends Component {
       feature_state_value,
       is_archived,
       is_server_key_only,
-      metadata,
       multivariate_options,
       name,
       tags,
@@ -579,32 +579,34 @@ const CreateFlag = class extends Component {
           </FormGroup>
         )}
         {metadataEnable && featureContentType?.id && (
-          <FormGroup className='mb-5 setting'>
-            <InputGroup
-              title={'Metadata'}
-              tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION} feature`}
-              tooltipPlace='right'
-              component={
-                <AddMetadataToEntity
-                  organisationId={AccountStore.getOrganisation().id}
-                  projectId={this.props.projectId}
-                  entityId={projectFlag?.id}
-                  entityContentType={featureContentType?.id}
-                  entity={featureContentType?.model}
-                  setHasMetadataRequired={(b) => {
-                    this.setState({
-                      hasMetadataRequired: true,
-                    })
-                  }}
-                  onChange={(m) => {
-                    this.setState({
-                      metadata: m,
-                    })
-                  }}
-                />
-              }
+          <>
+            <MetadataTitle
+              visible={this.state.visible}
+              onVisibleChange={(v) => {
+                this.setState({ visible: v })
+              }}
+              hasRequiredMetadata={this.state.hasMetadataRequired}
             />
-          </FormGroup>
+            {(this.state.hasMetadataRequired || this.state.visible) && (
+              <AddMetadataToEntity
+                organisationId={AccountStore.getOrganisation().id}
+                projectId={this.props.projectId}
+                entityId={projectFlag?.id}
+                entityContentType={featureContentType?.id}
+                entity={featureContentType?.model}
+                setHasMetadataRequired={(b) => {
+                  this.setState({
+                    hasMetadataRequired: b,
+                  })
+                }}
+                onChange={(m) => {
+                  this.setState({
+                    metadata: m,
+                  })
+                }}
+              />
+            )}
+          </>
         )}
         {!identity && projectFlag && (
           <Permission
@@ -648,7 +650,7 @@ const CreateFlag = class extends Component {
             }
             ds
             type='text'
-            title={identity ? 'Description' : 'Description'}
+            title={identity ? 'Description' : 'Description (optional)'}
             placeholder="e.g. 'This determines what size the header is' "
           />
         </FormGroup>
@@ -783,7 +785,7 @@ const CreateFlag = class extends Component {
                 this.setState({ description: Utils.safeParseEventValue(e) })
               }
               type='text'
-              title={identity ? 'Description' : 'Description'}
+              title={identity ? 'Description' : 'Description (optional)'}
               placeholder='No description'
             />
           </FormGroup>
@@ -1968,7 +1970,6 @@ const FeatureProvider = (WrappedComponent) => {
           const envFlags = FeatureListStore.getEnvironmentFlags()
 
           if (createdFlag) {
-            //update the create flag modal to edit view
             const projectFlag = FeatureListStore.getProjectFlags()?.find?.(
               (flag) => flag.name === createdFlag,
             )
diff --git a/frontend/web/components/modals/CreateMetadataField.tsx b/frontend/web/components/modals/CreateMetadataField.tsx
index 2717a47a2c0d..a46ee9188fae 100644
--- a/frontend/web/components/modals/CreateMetadataField.tsx
+++ b/frontend/web/components/modals/CreateMetadataField.tsx
@@ -24,6 +24,7 @@ import {
   MetadataModelField,
   isRequiredFor,
 } from 'common/types/responses'
+import ErrorMessage from 'components/ErrorMessage'
 
 type CreateMetadataFieldType = {
   id?: string
@@ -76,8 +77,10 @@ const CreateMetadataField: FC<CreateMetadataFieldType> = ({
   const { data: supportedContentTypes } = useGetSupportedContentTypeQuery({
     organisation_id: `${organisationId}`,
   })
-  const [createMetadataField, { isLoading: creating, isSuccess: created }] =
-    useCreateMetadataFieldMutation()
+  const [
+    createMetadataField,
+    { error: errorCreating, isLoading: creating, isSuccess: created },
+  ] = useCreateMetadataFieldMutation()
   const [updateMetadataField, { isLoading: updating, isSuccess: updated }] =
     useUpdateMetadataFieldMutation()
 
@@ -167,31 +170,47 @@ const CreateMetadataField: FC<CreateMetadataFieldType> = ({
         },
         id: id!,
       }).then(() => {
-        Promise.all(
-          metadataUpdatedSelectList?.map(
-            async (m: metadataFieldUpdatedSelectListType) => {
+        if (metadataFieldSelectList.length) {
+          Promise.all(
+            metadataFieldSelectList.map(async (m) => {
               const query = generateDataQuery(
-                m.content_type,
-                m.field,
-                m.is_required_for,
-                m.id,
-                m.new,
+                m.value,
+                parseInt(id!),
+                !!m?.isRequired,
+                0,
+                true,
               )
-              if (!m.removed && !m.new) {
-                await updateMetadataModelField(query)
-              } else if (m.removed) {
-                await deleteMetadataModelField({
-                  id: m.id,
-                  organisation_id: organisationId,
-                })
-              } else if (m.new) {
-                const newQuery = { ...query }
-                delete newQuery.id
-                await createMetadataModelField(newQuery)
-              }
-            },
-          ),
-        )
+              await createMetadataModelField(query)
+            }),
+          )
+        }
+        if (metadataUpdatedSelectList.length) {
+          Promise.all(
+            metadataUpdatedSelectList?.map(
+              async (m: metadataFieldUpdatedSelectListType) => {
+                const query = generateDataQuery(
+                  m.content_type,
+                  m.field,
+                  m.is_required_for,
+                  m.id,
+                  m.new,
+                )
+                if (!m.removed && !m.new) {
+                  await updateMetadataModelField(query)
+                } else if (m.removed) {
+                  await deleteMetadataModelField({
+                    id: m.id,
+                    organisation_id: organisationId,
+                  })
+                } else if (m.new) {
+                  const newQuery = { ...query }
+                  delete newQuery.id
+                  await createMetadataModelField(newQuery)
+                }
+              },
+            ),
+          )
+        }
         closeModal()
       })
     } else {
@@ -272,50 +291,54 @@ const CreateMetadataField: FC<CreateMetadataFieldType> = ({
           if (isEdit) {
             const newMetadataFieldArray: metadataFieldUpdatedSelectListType[] =
               []
+            if (!metadataModelFieldList?.length) {
+              setMetadataFieldSelectList(m)
+            } else {
+              metadataModelFieldList?.forEach((item1) => {
+                const match = m.find(
+                  (item2) => item2.value === item1.content_type.toString(),
+                )
 
-            metadataModelFieldList?.forEach((item1) => {
-              const match = m.find(
-                (item2) => item2.value === item1.content_type.toString(),
-              )
-
-              if (match) {
-                const isRequiredLength = !!item1.is_required_for.length
-                const isRequired = match.isRequired
-                if (isRequiredLength !== isRequired) {
+                if (match) {
+                  const isRequiredLength = !!item1.is_required_for.length
+                  const isRequired = match.isRequired
+                  if (isRequiredLength !== isRequired) {
+                    newMetadataFieldArray.push({
+                      ...item1,
+                      is_required_for: isRequired,
+                    })
+                  }
+                } else {
                   newMetadataFieldArray.push({
                     ...item1,
-                    is_required_for: isRequired,
+                    new: false,
+                    removed: true,
                   })
                 }
-              } else {
-                newMetadataFieldArray.push({
-                  ...item1,
-                  new: false,
-                  removed: true,
+                m.forEach((item) => {
+                  const match = metadataModelFieldList.find(
+                    (item2) => item2.content_type.toString() === item.value,
+                  )
+                  if (!match) {
+                    newMetadataFieldArray.push({
+                      ...item1,
+                      content_type: item.value,
+                      is_required_for: m?.isRequired,
+                      new: true,
+                      removed: false,
+                    })
+                  }
                 })
-              }
-              m.forEach((item) => {
-                const match = metadataModelFieldList.find(
-                  (item2) => item2.content_type.toString() === item.value,
-                )
-                if (!match) {
-                  newMetadataFieldArray.push({
-                    ...item1,
-                    content_type: item.value,
-                    is_required_for: m?.isRequired,
-                    new: true,
-                    removed: false,
-                  })
-                }
               })
-            })
-            setMetadataFieldUpdatedSelectList(newMetadataFieldArray)
+              setMetadataFieldUpdatedSelectList(newMetadataFieldArray)
+            }
           } else {
             setMetadataFieldSelectList(m)
           }
         }}
         metadataModelFieldList={metadataModelFieldList!}
       />
+      {errorCreating && <ErrorMessage error={errorCreating} />}
       <Button
         disabled={!name || !typeValue || !metadataFieldSelectList}
         onClick={save}
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 8516bacf5b14..69d4b96317a3 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -52,7 +52,8 @@ import AddMetadataToEntity, {
   CustomMetadataField,
 } from 'components/metadata/AddMetadataToEntity'
 import { useGetSupportedContentTypeQuery } from 'common/services/useSupportedContentType'
-import { setInterceptClose, setModalTitle } from './base/ModalDefault'
+import MetadataTitle from 'components/metadata/MetadataTitle'
+import { setInterceptClose } from './base/ModalDefault'
 
 type PageType = {
   number: number
@@ -206,6 +207,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const save = (e: FormEvent) => {
     Utils.preventDefault(e)
     setValueChanged(false)
+    setMetadataValueChanged(false)
     const segmentData: Omit<Segment, 'id' | 'uuid'> = {
       description,
       feature: feature,
@@ -235,6 +237,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
   }
 
   const [valueChanged, setValueChanged] = useState(false)
+  const [metadataValueChanged, setMetadataValueChanged] = useState(false)
   const onClosing = useCallback(() => {
     return new Promise((resolve) => {
       if (valueChanged) {
@@ -469,27 +472,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
             Show condition descriptions
           </span>
         </Row>
-        {metadataEnable && segmentContentType?.id && (
-          <FormGroup className='mb-5 setting'>
-            <InputGroup
-              title={'Metadata'}
-              tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION} segments`}
-              tooltipPlace='right'
-              component={
-                <AddMetadataToEntity
-                  organisationId={AccountStore.getOrganisation().id}
-                  projectId={projectId}
-                  entityId={`${segment.id}` || ''}
-                  entityContentType={segmentContentType?.id}
-                  entity={segmentContentType?.model}
-                  onChange={(m: CustomMetadataField[]) => {
-                    setMetadata(m)
-                  }}
-                />
-              }
-            />
-          </FormGroup>
-        )}
         <Flex className='mb-3'>
           <label className='cols-sm-2 control-label mb-1'>
             Include users when all of the following rules apply:
@@ -563,6 +545,28 @@ const CreateSegment: FC<CreateSegmentType> = ({
     </form>
   )
 
+  const MetadataTab = (
+    <FormGroup className='mt-5 setting'>
+      <InputGroup
+        component={
+          <AddMetadataToEntity
+            organisationId={AccountStore.getOrganisation().id}
+            projectId={projectId}
+            entityId={`${segment.id}` || ''}
+            entityContentType={segmentContentType?.id}
+            entity={segmentContentType?.model}
+            onChange={(m: CustomMetadataField[]) => {
+              setMetadata(m)
+              if (isEdit) {
+                setMetadataValueChanged(true)
+              }
+            }}
+          />
+        }
+      />
+    </FormGroup>
+  )
+
   return (
     <>
       {isEdit && !condensed ? (
@@ -734,6 +738,36 @@ const CreateSegment: FC<CreateSegmentType> = ({
               </div>
             </div>
           </TabItem>
+          {metadataEnable && segmentContentType?.id && (
+            <TabItem
+              tabLabelString='Metadata'
+              tabLabel={
+                <Row className='justify-content-center'>
+                  Metadata
+                  {metadataValueChanged && (
+                    <div className='unread ml-2 px-1'>{'*'}</div>
+                  )}
+                </Row>
+              }
+            >
+              <div className={className || 'my-3 mx-4'}>{MetadataTab}</div>
+            </TabItem>
+          )}
+        </Tabs>
+      ) : metadataEnable && segmentContentType?.id ? (
+        <Tabs value={tab} onChange={(tab: number) => setTab(tab)}>
+          <TabItem
+            tabLabelString='Basic configuration'
+            tabLabel={'Basic configuration'}
+          >
+            <div className={className || 'my-3 mx-4'}>{Tab1}</div>
+          </TabItem>
+          <TabItem
+            tabLabelString='Metadata'
+            tabLabel={<Row className='justify-content-center'>Metadata</Row>}
+          >
+            <div className={className || 'my-3 mx-4'}>{MetadataTab}</div>
+          </TabItem>
         </Tabs>
       ) : (
         <div className={className || 'my-3 mx-4'}>{Tab1}</div>
diff --git a/frontend/web/components/pages/AuditLogItemPage.tsx b/frontend/web/components/pages/AuditLogItemPage.tsx
index 701dd4e02302..9d9334eb3cf8 100644
--- a/frontend/web/components/pages/AuditLogItemPage.tsx
+++ b/frontend/web/components/pages/AuditLogItemPage.tsx
@@ -12,8 +12,8 @@ import DiffString from 'components/diff/DiffString'
 import DiffEnabled from 'components/diff/DiffEnabled'
 import Format from 'common/utils/format'
 import { Environment } from 'common/types/responses'
-import { Link } from 'react-router-dom';
-import Button from 'components/base/forms/Button';
+import { Link } from 'react-router-dom'
+import Button from 'components/base/forms/Button'
 type AuditLogItemPageType = {
   match: {
     params: {
@@ -122,7 +122,7 @@ const AuditLogItemPage: FC<AuditLogItemPageType> = ({ match }) => {
                   >
                     <Button theme='text'>View version</Button>
                   </Link>
-              )}
+                )}
             </>
           )}
         </div>
diff --git a/frontend/web/components/pages/CreateEnvironmentPage.js b/frontend/web/components/pages/CreateEnvironmentPage.js
index 9ed8d36e0a85..f61a6c657cab 100644
--- a/frontend/web/components/pages/CreateEnvironmentPage.js
+++ b/frontend/web/components/pages/CreateEnvironmentPage.js
@@ -5,13 +5,19 @@ import Constants from 'common/constants'
 import ErrorMessage from 'components/ErrorMessage'
 import PageTitle from 'components/PageTitle'
 import CondensedRow from 'components/CondensedRow'
+import AddMetadataToEntity from 'components/metadata/AddMetadataToEntity'
+import { getSupportedContentType } from 'common/services/useSupportedContentType'
+import { getStore } from 'common/store'
 
 const CreateEnvironmentPage = class extends Component {
   static displayName = 'CreateEnvironmentPage'
 
   constructor(props, context) {
     super(props, context)
-    this.state = {}
+    this.state = {
+      envContentType: {},
+      metadata: [],
+    }
   }
 
   static contextTypes = {
@@ -27,6 +33,19 @@ const CreateEnvironmentPage = class extends Component {
   componentDidMount = () => {
     API.trackPage(Constants.pages.CREATE_ENVIRONMENT)
 
+    if (Utils.getFlagsmithHasFeature('enable_metadata')) {
+      getSupportedContentType(getStore(), {
+        organisation_id: AccountStore.getOrganisation().id,
+      }).then((res) => {
+        const envContentType = Utils.getContentType(
+          res.data,
+          'model',
+          'environment',
+        )
+        this.setState({ envContentType: envContentType })
+      })
+    }
+
     this.focusTimeout = setTimeout(() => {
       this.input.focus()
       this.focusTimeout = null
@@ -40,7 +59,7 @@ const CreateEnvironmentPage = class extends Component {
   }
 
   render() {
-    const { name } = this.state
+    const { envContentType, metadata, name } = this.state
     return (
       <div className='app-container container'>
         <PageTitle title={'Create Environment'}>
@@ -84,6 +103,7 @@ const CreateEnvironmentPage = class extends Component {
                                   this.state.selectedEnv &&
                                     this.state.selectedEnv.api_key,
                                   this.state.description,
+                                  metadata,
                                 )
                             }}
                           >
@@ -176,6 +196,42 @@ const CreateEnvironmentPage = class extends Component {
                                 </CondensedRow>
                               )}
                             </div>
+                            {Utils.getFlagsmithHasFeature('enable_metadata') &&
+                              envContentType?.id && (
+                                <CondensedRow>
+                                  <FormGroup className='mt-5 setting'>
+                                    <InputGroup
+                                      title={'Metadata'}
+                                      tooltip={
+                                        'You need to add a value to the metadata if it is required to successfully clone the environment'
+                                      }
+                                      tooltipPlace='right'
+                                      component={
+                                        <AddMetadataToEntity
+                                          organisationId={
+                                            AccountStore.getOrganisation().id
+                                          }
+                                          projectId={
+                                            this.props.match.params.projectId
+                                          }
+                                          entityId={
+                                            this.state.selectedEnv.api_key
+                                          }
+                                          envName={name}
+                                          entityContentType={envContentType.id}
+                                          entity={envContentType.model}
+                                          isCloningEnvironment
+                                          onChange={(m) => {
+                                            this.setState({
+                                              metadata: m,
+                                            })
+                                          }}
+                                        />
+                                      }
+                                    />
+                                  </FormGroup>
+                                </CondensedRow>
+                              )}
 
                             <CondensedRow>
                               <div className='text-right'>
diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.js b/frontend/web/components/pages/EnvironmentSettingsPage.js
index a22edd351e27..b7b009444bf9 100644
--- a/frontend/web/components/pages/EnvironmentSettingsPage.js
+++ b/frontend/web/components/pages/EnvironmentSettingsPage.js
@@ -7,7 +7,6 @@ import CreateWebhookModal from 'components/modals/CreateWebhook'
 import ConfirmRemoveWebhook from 'components/modals/ConfirmRemoveWebhook'
 import ConfirmToggleEnvFeature from 'components/modals/ConfirmToggleEnvFeature'
 import EditPermissions from 'components/EditPermissions'
-import ServerSideSDKKeys from 'components/ServerSideSDKKeys'
 import Tabs from 'components/base/forms/Tabs'
 import TabItem from 'components/base/forms/TabItem'
 import JSONReference from 'components/JSONReference'
@@ -897,7 +896,9 @@ const EnvironmentSettingsPage = class extends Component {
                           <FormGroup className='mt-5 setting'>
                             <InputGroup
                               title={'Metadata'}
-                              tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION} environments`}
+                              tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION(
+                                'environments',
+                              )}`}
                               tooltipPlace='right'
                               component={
                                 <AddMetadataToEntity
diff --git a/frontend/web/components/pages/FeatureHistoryDetailPage.tsx b/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
index 104892fba65d..3d29f9067005 100644
--- a/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
+++ b/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
@@ -50,9 +50,9 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
     isLoading: versionsLoading,
   } = useGetFeatureVersionsQuery(
     {
-      is_live: true,
       environmentId,
       featureId: featureId as any,
+      is_live: true,
     },
     {
       skip: !featureId,
diff --git a/frontend/web/components/pages/HomePage.js b/frontend/web/components/pages/HomePage.js
index 7a3f96f3ce2d..bb32be331c91 100644
--- a/frontend/web/components/pages/HomePage.js
+++ b/frontend/web/components/pages/HomePage.js
@@ -366,8 +366,8 @@ const HomePage = class extends React.Component {
                                           <InputGroup
                                             title='Password'
                                             inputProps={{
-                                              enableAutoComplete: true,
                                               className: 'full-width',
+                                              enableAutoComplete: true,
                                               error: error && error.password,
                                               name: 'password',
                                             }}
diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx
index 3adf73344138..ce44546b82d7 100644
--- a/frontend/web/components/pages/SegmentsPage.tsx
+++ b/frontend/web/components/pages/SegmentsPage.tsx
@@ -22,7 +22,6 @@ import ProjectStore from 'common/stores/project-store'
 import Icon from 'components/Icon'
 import PageTitle from 'components/PageTitle'
 import Switch from 'components/Switch'
-import Panel from 'components/base/grid/Panel'
 import { setModalTitle } from 'components/modals/base/ModalDefault'
 
 const CodeHelp = require('../../components/CodeHelp')