fix(ui): fix feature flags ui

frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx

@@ -25,7 +25,7 @@ function FFlagItem({ flag }: { flag: FeatureFlag }) {
   const flagOwner = flag.updatedBy || flag.createdBy
   const user = userStore.list.length > 0 ? userStore.list.find(u => parseInt(u.userId) === flagOwner!)?.name : flagOwner;
   return (
-    <div className={'w-full py-2 border-b'}>
+    <div className={'w-full py-2 px-6 border-b'}>
       <div className={'flex items-center'}>
         <Link style={{ flex: 1 }} to={`feature-flags/${flag.featureFlagId}`}>
           <div className={'flex items-center gap-2 link'}>
@@ -33,9 +33,9 @@ function FFlagItem({ flag }: { flag: FeatureFlag }) {
             {flag.flagKey}
           </div>
         </Link>
-        <div style={{ flex: 1 }}>{flag.isSingleOption ? 'Single Option' : 'Multivariant'}</div>
+        <div style={{ flex: 1 }}>{flag.isSingleOption ? 'Single Variant' : 'Multivariant'}</div>
         <div style={{ flex: 1 }}>{resentOrDate(flag.updatedAt || flag.createdAt)}</div>
-        <div style={{ flex: 1 }} className={'flex items-center gap-2'}>
+        <div style={{ flex: 1 }} className={'flex items-center gap-2 capitalize'}>
           <Icon name={'person-fill'} />
           {user}
         </div>

frontend/app/components/FFlags/FFlagsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import FFlagsListHeader from 'Components/FFlags/FFlagsListHeader';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-import { Loader, NoContent } from 'UI';
+import {Loader, NoContent, Pagination} from 'UI';
 import FFlagItem from './FFlagItem';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
@@ -17,7 +17,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
 
   return (
     <div
-      className={'mb-5 w-full mx-auto bg-white rounded px-4 pb-10 pt-4 widget-wrapper'}
+      className={'mb-5 w-full mx-auto bg-white rounded pb-10 pt-4 widget-wrapper'}
       style={{ maxWidth: '1300px' }}
     >
       <FFlagsListHeader siteId={siteId} />
@@ -46,13 +46,12 @@ function FFlagsList({ siteId }: { siteId: string }) {
                   <Select
                     options={[
                       { label: 'All', value: '0' as const },
-                      { label: 'Only active', value: '1' as const },
-                      { label: 'Only inactive', value: '2' as const },
+                      { label: 'Enabled', value: '1' as const },
+                      { label: 'Disabled', value: '2' as const },
                     ]}
                     defaultValue={featureFlagsStore.activity}
                     plain
-                    onChange={
-                    ({ value }) => {
+                    onChange={({ value }) => {
                       featureFlagsStore.setActivity(value.value);
                       void featureFlagsStore.fetchFlags();
                     }}
@@ -66,19 +65,18 @@ function FFlagsList({ siteId }: { siteId: string }) {
                     ]}
                     defaultValue={featureFlagsStore.sort.order}
                     plain
-                    onChange={
-                      ({ value }) => {
-                        featureFlagsStore.setSort({ query: '', order: value.value })
-                        void featureFlagsStore.fetchFlags();
-                      }}
+                    onChange={({ value }) => {
+                      featureFlagsStore.setSort({ query: '', order: value.value });
+                      void featureFlagsStore.fetchFlags();
+                    }}
                   />
                 </div>
               </div>
-              <div className={'flex items-center font-semibold border-b py-2'}>
+              <div className={'flex items-center font-semibold border-b py-2 px-6'}>
                 <div style={{ flex: 1 }}>Key</div>
                 <div style={{ flex: 1 }}>Type</div>
                 <div style={{ flex: 1 }}>Last modified</div>
-                <div style={{ flex: 1 }}>Last modified by</div>
+                <div style={{ flex: 1 }}>By</div>
                 <div style={{ marginLeft: 'auto', width: 115 }}>Status</div>
               </div>
 
@@ -88,6 +86,23 @@ function FFlagsList({ siteId }: { siteId: string }) {
                 </React.Fragment>
               ))}
             </div>
+            <div className="w-full flex items-center justify-between pt-4 px-6">
+              <div className="text-disabled-text">
+                {'Showing '}
+                <span className="font-semibold">
+                  {Math.min(featureFlagsStore.total, featureFlagsStore.pageSize)}
+                </span>
+                {' out of '}
+                <span className="font-semibold">{featureFlagsStore.total}</span> Feature Flags
+              </div>
+              <Pagination
+                page={featureFlagsStore.page}
+                totalPages={Math.ceil(featureFlagsStore.total / featureFlagsStore.pageSize)}
+                onPageChange={(page) => featureFlagsStore.setPage(page)}
+                limit={featureFlagsStore.pageSize}
+                debounceRequest={100}
+              />
+            </div>
           </NoContent>
         </div>
       </Loader>

frontend/app/mstore/featureFlagsStore.ts

@@ -17,6 +17,7 @@ export default class FeatureFlagsStore {
   activity: Activity = '0';
   sort = { order: 'DESC', query: '' };
   page: number = 1;
+  total = 0
   readonly pageSize: number = 10;
   client: typeof fflagsService
 
@@ -31,6 +32,7 @@ export default class FeatureFlagsStore {
 
   setPage = (page: number) => {
     this.page = page;
+    void this.fetchFlags()
   };
 
   setEditing = ({ isDescrEditing = false, isTitleEditing = false }) => {
@@ -85,9 +87,10 @@ export default class FeatureFlagsStore {
         isActive: this.activity === '0' ? undefined : this.activity === '1',
         // userId: 3,
       }
-      const { list } = await this.client.fetchFlags(filters);
+      const { list, total } = await this.client.fetchFlags(filters);
       const flags = list.map((record) => new FeatureFlag(record));
       this.setList(flags);
+      this.setTotal(total)
     } catch (e) {
       console.error(e);
     } finally {
@@ -95,6 +98,10 @@ export default class FeatureFlagsStore {
     }
   };
 
+  setTotal(total: number) {
+    this.total = total
+  }
+
   checkFlagForm = () => {
     if (!this.currentFflag) return 'Feature flag not initialized'
     if (this.currentFflag.flagKey === '') {