fix(audit): audit and history UI tweaks (#4092)

Flagsmith · Jun 3, 2024 · e65dc34 · e65dc34
1 parent b2c3b38
commit e65dc34
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git a/frontend/web/components/FeatureVersion.tsx b/frontend/web/components/FeatureVersion.tsx
@@ -51,31 +51,28 @@ const FeatureVersion: FC<VersionDiffType> = ({
       ) : (
         <>
           {oldUUID === newUUID ? (
-            <InfoMessage>
-              Published at{' '}
-              <strong>
-                {moment(newVersion.created_at).format('Do MMM YYYY HH:mma')}
-              </strong>{' '}
-            </InfoMessage>
+            <InfoMessage>Versions are the same.</InfoMessage>
           ) : (
-            <InfoMessage>
-              Comparing{' '}
-              <strong>
-                {moment(newVersion.created_at).format('Do MMM YYYY HH:mma')}
-              </strong>{' '}
-              to{' '}
-              <strong>
-                {moment(oldVersion.created_at).format('Do MMM YYYY HH:mma')}
-              </strong>
-            </InfoMessage>
-          )}
+            <>
+              <InfoMessage>
+                Comparing{' '}
+                <strong>
+                  {moment(newVersion.created_at).format('Do MMM YYYY HH:mma')}
+                </strong>{' '}
+                to{' '}
+                <strong>
+                  {moment(oldVersion.created_at).format('Do MMM YYYY HH:mma')}
+                </strong>
+              </InfoMessage>
 
-          <DiffFeature
-            projectId={projectId}
-            featureId={featureId}
-            oldState={oldData}
-            newState={newData}
-          />
+              <DiffFeature
+                projectId={projectId}
+                featureId={featureId}
+                oldState={oldData}
+                newState={newData}
+              />
+            </>
+          )}
         </>
       )}
     </div>

diff --git a/frontend/web/components/pages/AuditLogItemPage.tsx b/frontend/web/components/pages/AuditLogItemPage.tsx
@@ -12,6 +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';
 type AuditLogItemPageType = {
   match: {
     params: {
@@ -112,6 +114,15 @@ const AuditLogItemPage: FC<AuditLogItemPageType> = ({ match }) => {
                   </div>
                 </Panel>
               )}
+              {data.related_object_type === 'EF_VERSION' &&
+                !!data.project &&
+                !!data.environment && (
+                  <Link
+                    to={`/project/${data.project.id}/environment/${data.environment.api_key}/history/${data.related_object_uuid}/`}
+                  >
+                    <Button theme='text'>View version</Button>
+                  </Link>
+              )}
             </>
           )}
         </div>

diff --git a/frontend/web/components/pages/FeatureHistoryDetailPage.tsx b/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
@@ -106,19 +106,17 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
                     </div>
                   </TabItem>
                 )}
-                {versions?.results?.[0].uuid !== data.uuid && (
-                  <TabItem tabLabel='Compare to Live'>
-                    <div className='mt-4'>
-                      <FeatureVersion
-                        projectId={`${match.params.projectId}`}
-                        featureId={parseInt(featureId)}
-                        environmentId={environmentId}
-                        newUUID={live!.uuid}
-                        oldUUID={data.uuid}
-                      />
-                    </div>
-                  </TabItem>
-                )}
+                <TabItem tabLabel='Compare to Live'>
+                  <div className='mt-4'>
+                    <FeatureVersion
+                      projectId={`${match.params.projectId}`}
+                      featureId={parseInt(featureId)}
+                      environmentId={environmentId}
+                      newUUID={live!.uuid}
+                      oldUUID={data.uuid}
+                    />
+                  </div>
+                </TabItem>
               </Tabs>
             </div>
           </Row>

diff --git a/frontend/web/components/pages/FeatureHistoryPage.tsx b/frontend/web/components/pages/FeatureHistoryPage.tsx
@@ -18,8 +18,9 @@ import FeatureVersion from 'components/FeatureVersion'
 import InlineModal from 'components/InlineModal'
 import TableFilterItem from 'components/tables/TableFilterItem'
 import moment from 'moment'
+import { Link } from 'react-router-dom'
 
-const widths = [250, 100]
+const widths = [250, 150]
 type FeatureHistoryPageType = {
   router: RouterChildContext['router']
 
@@ -40,6 +41,7 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
   ) as any
   // @ts-ignore
   const environmentId = `${env?.id}`
+  const environmentApiKey = `${env?.api_key}`
   const { data: users } = useGetUsersQuery({
     organisationId: AccountStore.getOrganisation().id,
   })
@@ -99,6 +101,9 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
               <div className='table-column' style={{ width: widths[1] }}>
                 View
               </div>
+              <div className='table-column' style={{ width: widths[1] }}>
+                Compare
+              </div>
             </Row>
           }
           renderRow={(v: TFeatureVersion, i: number) => {
@@ -117,7 +122,19 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
                         ? `${user.first_name || ''} ${user.last_name || ''} `
                         : 'System '}
                     </div>
-
+                    <div className='table-column' style={{ width: widths[1] }}>
+                      <Link
+                        to={`/project/${match.params.projectId}/environment/${environmentApiKey}/history/${v.uuid}/`}
+                      >
+                        <Button
+                          theme='text'
+                          className='px-0 text-primary'
+                          size='xSmall'
+                        >
+                          View Details
+                        </Button>
+                      </Link>
+                    </div>
                     <div className='table-column' style={{ width: widths[1] }}>
                       {i + 1 !== data!.results.length && (
                         <>
@@ -152,7 +169,7 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
                                 theme='text'
                                 size='xSmall'
                               >
-                                Compare
+                                Quick compare
                               </Button>
                             </div>
                           )}