From 0636bac812bc6f8b82b07a2fc70ff15722b24687 Mon Sep 17 00:00:00 2001
From: kyle-ssg <kyle@solidstategroup.com>
Date: Wed, 29 Oct 2025 09:39:37 +0000
Subject: [PATCH 1/2] Add identifier

---
 frontend/web/components/EditIdentity.tsx    |  4 +--
 frontend/web/components/pages/UserPage.tsx  | 28 ++++++++++++---------
 frontend/web/components/pages/UsersPage.tsx |  8 ++++++
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/frontend/web/components/EditIdentity.tsx b/frontend/web/components/EditIdentity.tsx
index 1ac2d8a3ba1e..e614fc12e615 100644
--- a/frontend/web/components/EditIdentity.tsx
+++ b/frontend/web/components/EditIdentity.tsx
@@ -62,10 +62,10 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
       />
       <Button
         disabled={!data}
-        iconSize={18}
+        iconSize={16}
         theme='text'
         style={{ lineHeight: 'inherit' }}
-        className='text-primary'
+        className='text-primary d-flex align-items-center'
         iconRightColour='primary'
         iconRight={'edit'}
         onClick={handleFocus}
diff --git a/frontend/web/components/pages/UserPage.tsx b/frontend/web/components/pages/UserPage.tsx
index a603f7d91b73..6428eba364b9 100644
--- a/frontend/web/components/pages/UserPage.tsx
+++ b/frontend/web/components/pages/UserPage.tsx
@@ -318,15 +318,18 @@ const UserPage: FC = () => {
               <>
                 <PageTitle
                   title={
-                    <div className='d-flex align-items-center justify-content-between'>
-                      <div>
-                        <IdentifierString
-                          value={
-                            (identity && identity.identity.identifier) || id
-                          }
-                        />
+                    <div className='d-flex justify-content-between flex-1 align-items-start gap-5'>
+                      <div className='h5'>
+                        Identifier:{' '}
+                        <span className='fw-normal'>
+                          <IdentifierString
+                            value={
+                              (identity && identity.identity.identifier) || id
+                            }
+                          />
+                        </span>
                         {showAliases && (
-                          <h6 className='d-flex align-items-center gap-1'>
+                          <h6 className='d-flex mb-0 align-items-end gap-1'>
                             <Tooltip
                               title={
                                 <span className='user-select-none'>
@@ -345,6 +348,10 @@ const UserPage: FC = () => {
                             )}
                           </h6>
                         )}
+                        <div className='text-nowrap fs-regular fw-normal text-muted'>
+                          View and manage feature states and traits for this
+                          user.
+                        </div>
                       </div>
                       <Button
                         id='remove-feature'
@@ -367,10 +374,7 @@ const UserPage: FC = () => {
                       </Button>
                     </div>
                   }
-                >
-                  View and manage feature states and traits for this user.
-                  <br />
-                </PageTitle>
+                ></PageTitle>
                 <div className='row'>
                   <div className='col-md-12'>
                     <FormGroup>
diff --git a/frontend/web/components/pages/UsersPage.tsx b/frontend/web/components/pages/UsersPage.tsx
index 555091f0bef1..ecd974c7276f 100644
--- a/frontend/web/components/pages/UsersPage.tsx
+++ b/frontend/web/components/pages/UsersPage.tsx
@@ -170,6 +170,14 @@ const UsersPage: FC<{ props: any }> = (props) => {
         <FormGroup>
           <PanelSearch
             renderSearchWithNoResults
+            header={
+              permission && (
+                <Row className='table-header'>
+                  <Flex className='table-column px-3'>Identifier</Flex>
+                  <div className='table-column'></div>
+                </Row>
+              )
+            }
             filterRowContent={
               showAliases && (
                 <div className='ms-2' style={{ width: 100 }}>

From 298957b4c0e1d89fc82f6a809b05c0962bab23c8 Mon Sep 17 00:00:00 2001
From: kyle-ssg <kyle@solidstategroup.com>
Date: Wed, 29 Oct 2025 09:46:32 +0000
Subject: [PATCH 2/2] Add identifier

---
 frontend/web/components/pages/UserPage.tsx  | 112 +++++++++++---------
 frontend/web/components/pages/UsersPage.tsx |   2 +-
 2 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/frontend/web/components/pages/UserPage.tsx b/frontend/web/components/pages/UserPage.tsx
index 6428eba364b9..9d1952bdfd7a 100644
--- a/frontend/web/components/pages/UserPage.tsx
+++ b/frontend/web/components/pages/UserPage.tsx
@@ -62,6 +62,7 @@ import UsersIcon from 'components/svg/UsersIcon'
 import IdentityTraits from 'components/IdentityTraits'
 import { useGetIdentitySegmentsQuery } from 'common/services/useIdentitySegment'
 import useDebouncedSearch from 'common/useDebouncedSearch'
+import SettingTitle from 'components/SettingTitle'
 
 const width = [200, 48, 78]
 
@@ -318,60 +319,37 @@ const UserPage: FC = () => {
               <>
                 <PageTitle
                   title={
-                    <div className='d-flex justify-content-between flex-1 align-items-start gap-5'>
-                      <div className='h5'>
-                        Identifier:{' '}
-                        <span className='fw-normal'>
-                          <IdentifierString
-                            value={
-                              (identity && identity.identity.identifier) || id
+                    <div className='h5'>
+                      Identifier:{' '}
+                      <span className='fw-normal'>
+                        <IdentifierString
+                          value={
+                            (identity && identity.identity.identifier) || id
+                          }
+                        />
+                      </span>
+                      {showAliases && (
+                        <h6 className='d-flex mb-0 align-items-end gap-1'>
+                          <Tooltip
+                            title={
+                              <span className='user-select-none'>Alias: </span>
                             }
-                          />
-                        </span>
-                        {showAliases && (
-                          <h6 className='d-flex mb-0 align-items-end gap-1'>
-                            <Tooltip
-                              title={
-                                <span className='user-select-none'>
-                                  Alias:{' '}
-                                </span>
-                              }
-                            >
-                              Aliases allow you to add searchable names to an
-                              identity
-                            </Tooltip>
-                            {!!identity && (
-                              <EditIdentity
-                                data={identity?.identity}
-                                environmentId={environmentId}
-                              />
-                            )}
-                          </h6>
-                        )}
-                        <div className='text-nowrap fs-regular fw-normal text-muted'>
-                          View and manage feature states and traits for this
-                          user.
-                        </div>
+                          >
+                            Aliases allow you to add searchable names to an
+                            identity
+                          </Tooltip>
+                          {!!identity && (
+                            <EditIdentity
+                              data={identity?.identity}
+                              environmentId={environmentId}
+                            />
+                          )}
+                        </h6>
+                      )}
+                      <div className='text-nowrap fs-regular fw-normal mt-2'>
+                        View and manage feature states and traits for this
+                        identity.
                       </div>
-                      <Button
-                        id='remove-feature'
-                        className='btn btn-with-icon'
-                        type='button'
-                        onClick={() => {
-                          removeIdentity(
-                            id,
-                            (identity && identity.identity.identifier) || id,
-                            environmentId,
-                            () => {
-                              history.replace(
-                                `/project/${projectId}/environment/${environmentId}/users`,
-                              )
-                            },
-                          )
-                        }}
-                      >
-                        <Icon name='trash-2' width={20} fill='#656D7B' />
-                      </Button>
                     </div>
                   }
                 ></PageTitle>
@@ -1038,6 +1016,36 @@ const UserPage: FC = () => {
                         userId={identity?.identity?.identifier || id}
                       />
                     </FormGroup>
+                    <FormGroup className='mt-5'>
+                      <SettingTitle danger>Delete Identity</SettingTitle>
+                      <FormGroup className='mt-4'>
+                        <Row space>
+                          <p className='fs-small lh-sm mb-0'>
+                            Identities can be re-added here or via one of our
+                            SDKs
+                          </p>
+                          <Button
+                            id='delete-identity-btn'
+                            onClick={() => {
+                              removeIdentity(
+                                id,
+                                (identity && identity.identity.identifier) ||
+                                  id,
+                                environmentId,
+                                () => {
+                                  history.replace(
+                                    `/project/${projectId}/environment/${environmentId}/users`,
+                                  )
+                                },
+                              )
+                            }}
+                            theme='danger'
+                          >
+                            Delete Identity
+                          </Button>
+                        </Row>
+                      </FormGroup>
+                    </FormGroup>
                   </div>
                 </div>
               </>
diff --git a/frontend/web/components/pages/UsersPage.tsx b/frontend/web/components/pages/UsersPage.tsx
index ecd974c7276f..b7ec660a6d22 100644
--- a/frontend/web/components/pages/UsersPage.tsx
+++ b/frontend/web/components/pages/UsersPage.tsx
@@ -62,7 +62,7 @@ export const removeIdentity = (
         }
       })
     },
-    title: 'Delete User',
+    title: 'Delete Identity',
     yesText: 'Confirm',
   })
 }