chore: type panels (#5139)

frontend/common/providers/OrganisationProvider.tsx

@@ -15,7 +15,7 @@ import { useGetGroupsQuery } from 'common/services/useGroup'
 type OrganisationProviderType = {
   onRemoveProject?: () => void
   onSave?: (data: { environmentId: number; projectId: number }) => void
-  id?: number | string
+  id?: number | string | null
   children: (props: {
     createProject: typeof AppActions.createProject
     invalidateInviteLink: typeof AppActions.invalidateInviteLink

frontend/common/types/responses.ts

@@ -324,7 +324,7 @@ export type Organisation = {
   restrict_project_create_to_admin: boolean
 }
 export type Identity = {
-  id?: string
+  id: string
   identifier: string
   identity_uuid?: string
   dashboard_alias?: string
@@ -391,6 +391,8 @@ export type IdentityFeatureState = {
     name: string
     type: FeatureType
   }
+  identity?: string
+  identity_uuid?: string
   enabled: boolean
   feature_state_value: FlagsmithValue
   segment: null
@@ -407,7 +409,6 @@ export type FeatureState = {
   id: number
   feature_state_value: FlagsmithValue
   multivariate_feature_state_values: MultivariateFeatureStateValue[]
-  identity?: string
   uuid: string
   enabled: boolean
   created_at: string
@@ -715,7 +716,7 @@ export type Res = {
   account: Account
   userEmail: {}
   groupAdmin: { id: string }
-  groups: PagedResponse<UserGroupSummary>
+  groups: PagedResponse<UserGroup>
   group: UserGroup
   myGroups: PagedResponse<UserGroupSummary>
   createSegmentOverride: {
@@ -790,7 +791,7 @@ export type Res = {
   featureImports: PagedResponse<FeatureImport>
   serversideEnvironmentKeys: APIKey[]
   userGroupPermissions: GroupPermission[]
-  identityFeatureStates: PagedResponse<FeatureState>
+  identityFeatureStates: IdentityFeatureState[]
   cloneidentityFeatureStates: IdentityFeatureState
   featureStates: PagedResponse<FeatureState>
   samlConfiguration: SAMLConfiguration

frontend/package.json

@@ -160,6 +160,7 @@
     "@types/react-router": "^4.4.5",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-select": "^2.0.3",
+    "@types/react-virtualized": "^9.22.0",
     "@types/react-window-infinite-loader": "^1.0.9",
     "@typescript-eslint/eslint-plugin": "5.4.0",
     "@typescript-eslint/parser": "5.4.0",

frontend/web/components/AuditLog.tsx

@@ -238,7 +238,7 @@ const AuditLog: FC<AuditLogType> = (props) => {
         filter={envFilter}
         search={searchInput}
         searchPanel={props.searchPanel}
-        onChange={(e: InputEvent) => {
+        onChange={(e) => {
           setSearchInput(Utils.safeParseEventValue(e))
         }}
         paging={{

frontend/web/components/CompareIdentities.tsx

@@ -3,13 +3,13 @@ import IdentitySelect, { IdentitySelectType } from './IdentitySelect'
 import Utils from 'common/utils/utils'
 import EnvironmentSelect from './EnvironmentSelect'
 import {
-  useGetIdentityFeatureStatesAllQuery,
   useCreateCloneIdentityFeatureStatesMutation,
+  useGetIdentityFeatureStatesAllQuery,
 } from 'common/services/useIdentityFeatureState'
 import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
 import Tag from './tags/Tag'
 import PanelSearch from './PanelSearch'
-import { ProjectFlag, Res } from 'common/types/responses'
+import { IdentityFeatureState } from 'common/types/responses'
 import Icon from './Icon'
 import Switch from './Switch'
 import FeatureValue from './FeatureValue'
@@ -32,8 +32,8 @@ const featureNameWidth = 300
 
 const calculateFeatureDifference = (
   projectFlagId: number,
-  leftUser: Res['identityFeatureStates'] | undefined,
-  rightUser: Res['identityFeatureStates'] | undefined,
+  leftUser: IdentityFeatureState[] | undefined,
+  rightUser: IdentityFeatureState[] | undefined,
 ) => {
   const featureStateLeft = leftUser?.find((v) => v.feature.id === projectFlagId)
   const featureStateRight = rightUser?.find(
@@ -271,7 +271,7 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
               </Row>
             }
             items={filteredItems}
-            renderRow={(data: ProjectFlag) => {
+            renderRow={(data) => {
               const { description, id, name } = data
               const {
                 enabledDifferent,

frontend/web/components/EditHealthProvider.tsx

@@ -169,7 +169,7 @@ const EditHealthProvider: FC<EditHealthProviderType> = ({
                   <Flex className='table-column'>Webhook URL</Flex>
                 </Row>
               }
-              renderRow={(provider: HealthProvider) => {
+              renderRow={(provider) => {
                 const { name, webhook_url: webhook } = provider
                 const matchingPermissions = {
                   admin: true,

frontend/web/components/EditPermissions.tsx

@@ -855,7 +855,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
               title='Permissions'
               className='no-pad mb-2 overflow-visible'
               items={permissions}
-              renderRow={(p: AvailablePermission, index: number) => {
+              renderRow={(p) => {
                 const levelUpperCase = level.toUpperCase()
                 const disabled =
                   level !== 'organisation' &&
@@ -1146,7 +1146,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                               </div>
                             </Row>
                           }
-                          renderRow={(user: User) => {
+                          renderRow={(user) => {
                             const { email, first_name, id, last_name, role } =
                               user
                             const onClick = () => {
@@ -1277,7 +1277,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
                   </div>
                 </Row>
               }
-              renderRow={(role: Role) => (
+              renderRow={(role) => (
                 <Row
                   className='list-item clickable cursor-pointer'
                   key={role.id}

frontend/web/components/ExternalResourcesTable.tsx

@@ -166,7 +166,7 @@ const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
             </div>
           </Row>
         }
-        renderRow={(v: ExternalResource) => (
+        renderRow={(v) => (
           <ExternalResourceRow
             key={v.id}
             featureId={featureId}

frontend/web/components/FeatureHistory.tsx

@@ -81,7 +81,7 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
           prevPage={() => setPage(page + 1)}
           goToPage={setPage}
           dateProperty={'live_from'}
-          renderRow={(v: TFeatureVersion, i: number) => {
+          renderRow={(v, i) => {
             const user = users?.find((user) => v.published_by === user.id)
 
             return (

frontend/web/components/GithubRepositoriesTable.tsx

@@ -51,7 +51,7 @@ const GithubRepositoriesTable: FC<GithubRepositoriesTableType> = ({
             </div>
           </Row>
         }
-        renderRow={(repo: GithubRepository) => (
+        renderRow={(repo) => (
           <TableRow
             repo={repo}
             githubId={githubId}

frontend/web/components/OrgEnvironmentSelect.tsx

@@ -29,7 +29,7 @@ const OrgEnvironmentSelect: FC<OrgProjectSelectType> = ({
   projectId,
   useApiKey,
 }) => {
-  const [search, setSearch] = useState()
+  const [search, setSearch] = useState<string>()
 
   const { data: organisations, isLoading: organisationsLoading } =
     useGetOrganisationsQuery({})
@@ -154,7 +154,6 @@ const OrgEnvironmentSelect: FC<OrgProjectSelectType> = ({
             organisationsLoading || projectsLoading || environmentsLoading
           }
           id='segment-list'
-          icon='ion-ios-globe'
           title={`${Format.camelCase(level)} Search`}
           items={sortBy(items, (v) => {
             return v.name
@@ -164,7 +163,7 @@ const OrgEnvironmentSelect: FC<OrgProjectSelectType> = ({
           }
           onChange={setSearch}
           search={search}
-          renderRow={({ api_key, id, name }: Environment) => (
+          renderRow={({ api_key, id, name }) => (
             <a
               className='list-item clickable flex flex-1 flex-row px-4'
               onClick={() => {