npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dd-test/nav

v6.0.1

Published

LeafyGreen UI Kit Mongo Nav

Downloads

3

Readme

← 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

npm (scoped)

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: 'logout', 'cloud', 'realm', 'charts', event: React.MouseEvent => void) | Click EventHandler that receives a 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' | 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

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