@leafygreen-ui/mongo-nav v12.2.0

← 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/leafygreen-provider@1.1.0

Peer Dependencies

Example

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

Properties

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}
/>;