← Back to mongodb/leafygreen-ui repository

NOTE: This component is a submodule for the mongodb/leafygreen-ui repository. That repository includes the environment and scripts to build and run tests for this package. It is highly recommended that when working with this repository, you work within the context of the leafygreen-ui repository itself.

Mongo Nav

Installation

Yarn

yarn add @leafygreen-ui/mongo-nav @leafygreen-ui/leafygreen-provider

NPM

npm install @leafygreen-ui/mongo-nav @leafygreen-ui/[email protected]

Peer Dependencies

| Package | Version | | ------------------------------------ | -------- | | @leafygreen-ui/leafygreen-provider | ^1.1.0 |

Example

<MongoNav
  mode="dev"
  activeProduct="cloud"
  activeNav="accessManager"
  onOrganizationChange={onOrganizationChange}
  onProjectChange={onProjectChange}
  admin={true}
/>

Properties

| Prop | Type | Description | Default | | -------------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | activeProduct | 'cloud', 'realm', 'charts' | Describes what product is currently active | | | activeNav | ActiveNavElement | Determines what nav item is currently active | | | admin | boolean | Describes whether or not user is an admin | false | | mode | 'production', 'dev' | Describes what environment the component is being used in | 'production' | | onOrganizationChange | ({value: string, setData: Function, event: React.ChangeEvent}) => void | Callback invoked when user types in the OrgSelect filter box. The function receives an object as its argument with three keys. The first is the current value of the filter box, the second is a Function that allows the consumer to control what data is rendered based on the current search, and the final is the ChangeEvent. | | | onProjectChange | ({value: string, setData: Function, event: React.ChangeEvent}) => void | Callback invoked when user types in the ProjectSelect filter box. The function receives an object as its argument with three keys. The first is the current value of the filter box, the second is a Function that allows the consumer to control what data is rendered based on the current search, and the final is the ChangeEvent. | | | constructOrganizationURL | (Organization) => string | Function that allows consumers to determine destination URL when user selects an organization from the organization picker, see also hosts | (org) => '${hosts.cloud}/v2#/org/${org.orgId}/projects' | | constructProjectURL | (Project) => string | Function that allows consumers to determine destination URL when user selects a project from the project picker, see also hosts | (project) => '${hosts.cloud}/v2#/${project.projectId}' | | showProjectNav | boolean | Determines whether the project navigation should be shown | true | | hosts | {cloud: '', realm: '', charts: '', account: '', university: '', support: ''} | Object where keys are MDB products and values are the desired hostURL override for that product, to enable <MongoNav /> to work across all environments | | | urls | URLInterface | Object to enable custom overrides for every href used in <MongoNav /> | | | onError | (ErrorCode) => {}, | Function that is passed an error code as a string, so that consuming application can handle fetch failures | () => {} | | onSuccess | (response) => {} | Callback that receives the response of the fetched data, having been converted from JSON into an object | () => {} | | onPrem | {enabled: boolean, mfa: boolean, version: string} | onPrem config object with three keys: enabled, version and mfa | {enabled: false, mfa: false, version: ''} | | onPrem.enabled | boolean | Determines whether or not a user is onPrem | false | | onPrem.mfa | boolean | Determines if an onPrem user has multi-factor authentication enabled | false | | onPrem.version | string | Describes the version of Ops Manager that an onPrem user is using | '' | | activeOrgId | string | ID for active organization, will trigger a POST request to cloud to update current active organization. | | | activeProjectId | string | ID for active project, will trigger a POST request to cloud to update current active project. | | | className | string | Applies a className to the root element | | | loadData | boolean | Determines whether or not the component will fetch data from cloud | true | | onElementClick | (type: NavElement, event: React.MouseEvent => void) | Click EventHandler that receives a NavElement type as its first argument and the associated MouseEvent as its second. This prop provides a hook into product link and logout link clicks and allows consuming applications to handle routing internally | () => {} | | dataFixtures | DataInterface | Allows consumers to control fixture data when in dev mode | | | activePlatform | 'account', 'cloud', 'support','university', 'devHub', 'forums', 'docs' | Describes what platform is currently active | | | alertPollingInterval | number | Defines interval for alert polling | 600e3 // 10 minutes |

Any other properties will be spread on the root element

NavElement

type NavElement =
  | 'orgNavOrgSettings'
  | 'orgNavAccessManagerDropdown'
  | 'orgNavSupport'
  | 'orgNavNewCase'
  | 'orgNavBilling'
  | 'orgNavAdmin'
  | 'orgNavDocs'
  | 'orgNavAllClusters'
  | 'logout'
  | 'leaf'
  | 'orgNavOrgSelectTrigger'
  | 'orgNavOrgSelectSearch'
  | 'orgNavViewAllOrganizations'
  | 'orgNavDropdownOrgAccessManager'
  | 'orgNavDropdownProjectAccessManager'
  | 'orgNavDropdownGetHelp'
  | 'projectNavProjectSelectTrigger'
  | 'projectNavProjectSelectSearch'
  | 'projectNavViewAllProjects'
  | 'projectNavAddProject'
  | 'projectNavProjectDropdown'
  | 'projectNavProjectSettings'
  | 'projectNavProjectSupport'
  | 'projectNavProjectIntegrations'
  | 'projectNavCloud'
  | 'projectNavRealm'
  | 'projectNavCharts'
  | 'projectNavInvite'
  | 'projectNavActivityFeed'
  | 'projectNavAlerts'
  | 'userMenuTrigger'
  | 'userMenuFeedback'
  | 'userMenuCloud'
  | 'userMenuCloudMFA'
  | 'userMenuCloudInvitations'
  | 'userMenuCloudOrganizations'
  | 'userMenuCloudUserPreferences'
  | 'userMenuCloudOther'
  | 'userMenuOnPremProfile'
  | 'userMenuOnPremTwoFactorAuth'
  | 'userMenuOnPremPersonalization'
  | 'userMenuOnPremInvitations'
  | 'userMenuOnPremOrganizations'
  | 'userMenuOnPremPublicApiAccess'
  | 'userMenuOnPremFeatureRequest'
  | 'userMenuOnPremSignOut'
  | 'userMenuOnPremOther'
  | 'userMenuDocs'
  | 'userMenuUniversity'
  | 'userMenuDevHub'
  | 'userMenuForums'
  | 'userMenuSupport'
  | 'userMenuLogout';

ActiveNavElement

type ActiveNavElement =
  | 'orgNavOrgSettings'
  | 'orgNavAccessManagerDropdown'
  | 'orgNavSupport'
  | 'orgNavBilling'
  | 'orgNavAdmin'
  | 'orgNavAllClusters'
  | 'orgNavDropdownOrgAccessManager'
  | 'orgNavDropdownProjectAccessManager'
  | 'projectNavInvite'
  | 'projectNavActivityFeed'
  | 'projectNavAlerts'
  | 'projectNavProjectSettings'
  | 'projectNavProjectSupport'
  | 'projectNavProjectIntegrations'
  | 'userMenuCloudMFA'
  | 'userMenuCloudInvitations'
  | 'userMenuCloudOrganizations'
  | 'userMenuCloudUserPreferences'
  | 'userMenuCloudOther'
  | 'userMenuOnPremProfile'
  | 'userMenuOnPremTwoFactorAuth'
  | 'userMenuOnPremPersonalization'
  | 'userMenuOnPremInvitations'
  | 'userMenuOnPremOrganizations'
  | 'userMenuOnPremPublicApiAccess'
  | 'userMenuOnPremPublicApiAccess';

URLInterface

export interface URLSInterface {
  userMenu?: {
    cloud?: {
      userPreferences: string;
      organizations: string;
      invitations: string;
      mfa: string;
    };
    university?: {
      universityPreferences: string;
    };
    support?: {
      userPreferences: string;
    };
    account?: {
      homepage?: string;
    };
    logout?: string;
  };
  mongoSelect?: {
    viewAllProjects?: string;
    viewAllOrganizations?: string;
    newProject?: string;
    orgSettings?: string;
  };
  orgNav?: {
    settings?: string;
    accessManager?: string;
    support?: string;
    billing?: string;
    allClusters?: string;
    admin?: string;
  };
  projectNav?: {
    settings?: string;
    accessManager?: string;
    support?: string;
    integrations?: string;
    alerts?: string;
    activityFeed?: string;
    invite?: string;
    realm?: string;
    charts?: string;
  };
  onPrem?: {
    profile?: string;
    mfa?: string;
    personalization?: string;
    invitations?: string;
    organizations?: string;
    publicApiAccess?: string;
    featureRequest?: string;
  };
}

DataInterface

export interface AccountInterface {
  email: string;
  firstName: string;
  lastName: string;
  shouldSeeAccountMfaBanner?: boolean;
  hasLegacy2fa?: boolean;
  openInvitations?: number;
  username?: string;
  admin?: boolean;
}

export interface ProjectInterface {
  projectId: string;
  projectName: string;
  planType?: PlanType;
  orgId?: string;
}

export interface CurrentProjectInterface extends ProjectInterface {
  alertsOpen: number;
  chartsActivated: boolean;
  status?: ProjectStatus;
}

export interface OrganizationInterface {
  orgId: string;
  orgName: string;
  planType: PlanType;
}

export interface CurrentOrganizationInterface extends OrganizationInterface {
  paymentStatus?: OrgPaymentLabel;
}

export interface DataInterface {
  readonly account: AccountInterface;
  currentOrganization?: CurrentOrganizationInterface;
  currentProject?: CurrentProjectInterface;
  readonly organizations: Array<OrganizationInterface>;
  readonly projects: Array<ProjectInterface>;
}

Imperative API Handle

We have customized the ref instance value that is exposed to components wrapping MongoNav, such that the instance's current property contains a reloadData key. Invoking reloadData triggers a refetch of data from MongoNav.

Example

const mongoNavRef = React.useRef(null);

const onClick = () => {
  mongooNavRef.current.reloadData();
};

<MongoNav
  ref={mongoNavRef}
  mode="dev"
  activeProduct="cloud"
  activeNav="accessManager"
  onOrganizationChange={onOrganizationChange}
  onProjectChange={onProjectChange}
  admin={true}
/>;