Main Pages — Checklist, Data Types, Selectability & Modal Naming¶
Part of: Main Pages guide See also: Overview | Add Modal | Delete Modal & Entity Utils
Checklist: Files to Create or Modify¶
When adding a brand-new main page, touch these files:
Required new files¶
File |
Purpose |
|---|---|
|
The main page component |
|
Add the |
|
Add |
|
Entity utils: |
|
RTK Query hooks wrapping FreeIPA API commands (see RPC Service) |
|
Add modal |
|
Delete modal |
Required modifications¶
File |
Change |
|---|---|
|
Import the new page component and add |
|
Add group ref constant and register entry in |
|
Add |
Optional new files¶
File |
When needed |
|---|---|
|
If enable/disable is supported |
Data Type Definition¶
Add the entity interface to src/utils/datatypes/globalDataTypes.ts.
SearchDataResultType (Generic)¶
The SearchDataResultType<T> generic interface is used to standardize search state across main pages. It provides a consistent structure for storing search results:
export interface SearchDataResultType<T> {
elementsList: T[];
totalCount: number;
}
Usage in main page components:
import { MyEntity, SearchDataResultType } from "src/utils/datatypes/globalDataTypes";
const [searchData, setSearchData] =
useState<SearchDataResultType<MyEntity> | null>(null);
This type is used in conjunction with the useMemo pattern for deriving elementsList and totalCount from either the query response or search results. See Walkthrough: Init & Data Fetching for the full pattern.
Entity Interface¶
Add the entity interface to src/utils/datatypes/globalDataTypes.ts:
export interface MyEntity {
cn: string; // or string[] — depends on the IPA schema
description: string; // or string[]
dn: string;
// Add all relevant LDAP attributes...
}
Important: Do not add an index signature ([key: string]: unknown) to entity interfaces. Each field must be explicitly declared with its correct type. This preserves compile-time type safety — an index signature silently allows access to any arbitrary key, which defeats the purpose of having a typed interface.
To discover the full list of fields and their types for an entity, use the API browser built into the FreeIPA WebUI (navigate to IPA Server > API browser and look up the <entity>_show or <entity>_find command parameters). You can also consult the FreeIPA API reference.
Fields are typically string or string[] matching the IPA JSON-RPC response. Use string[] when the attribute is multi-valued in LDAP (most IPA attributes are arrays in the API).
Selectability Function¶
Add to src/utils/utils.tsx:
export const isMyEntitySelectable = (entity: MyEntity) => entity.cn !== "";
The pattern checks whether the primary key is non-empty (empty rows are placeholders/loading rows).
Modal Naming Convention¶
All modal component files and their default exports must include the Modal suffix. This ensures consistency across the codebase and makes it immediately clear that the component is a modal.
Modal type |
File name pattern |
Component name pattern |
|---|---|---|
Add |
|
|
Delete |
|
|
Enable/Disable |
|
|
Examples from existing codebase:
src/components/modals/DnsZones/DeleteDnsZonesModal.tsx→DeleteDnsZonesModalsrc/pages/Trusts/AddTrustModal.tsx→AddTrustModalsrc/pages/Trusts/DeleteTrustModal.tsx→DeleteTrustModal