@leafygreen-ui/mongo-nav
LeafyGreen UI Kit Mongo Nav
Last updated a month ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/mongo-nav 
SYNC missed versions from official npm registry.

Mongo Nav

npm (scoped)

View on Storybook

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

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

Current Tags

  • 5.1.0                                ...           latest (a month ago)

56 Versions

  • 5.1.0                                ...           a month ago
  • 5.0.1                                ...           a month ago
  • 5.0.0                                ...           a month ago
  • 4.2.0                                ...           2 months ago
  • 4.1.0                                ...           2 months ago
  • 4.0.3                                ...           2 months ago
  • 4.0.2                                ...           3 months ago
  • 4.0.1                                ...           3 months ago
  • 4.0.0                                ...           3 months ago
  • 3.3.0                                ...           4 months ago
  • 3.2.0                                ...           4 months ago
  • 3.1.9                                ...           4 months ago
  • 3.1.8                                ...           4 months ago
  • 3.1.7                                ...           4 months ago
  • 3.1.6                                ...           4 months ago
  • 3.1.5                                ...           5 months ago
  • 3.1.4                                ...           5 months ago
  • 3.1.3                                ...           5 months ago
  • 3.1.2                                ...           5 months ago
  • 3.1.1                                ...           5 months ago
  • 3.0.0                                ...           6 months ago
  • 2.1.0                                ...           6 months ago
  • 2.0.1                                ...           7 months ago
  • 2.0.0                                ...           7 months ago
  • 1.3.3                                ...           7 months ago
  • 1.3.2                                ...           7 months ago
  • 1.3.1                                ...           8 months ago
  • 1.3.0                                ...           8 months ago
  • 1.2.2                                ...           8 months ago
  • 1.2.1                                ...           9 months ago
  • 1.2.0                                ...           9 months ago
  • 1.1.0                                ...           9 months ago
  • 1.0.3                                ...           9 months ago
  • 1.0.2                                ...           9 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
  • 0.23.0                                ...           9 months ago
  • 0.22.0                                ...           9 months ago
  • 0.21.0                                ...           10 months ago
  • 0.20.0                                ...           10 months ago
  • 0.19.0                                ...           10 months ago
  • 0.18.0                                ...           10 months ago
  • 0.17.0                                ...           10 months ago
  • 0.16.0                                ...           10 months ago
  • 0.15.0                                ...           10 months ago
  • 0.14.0                                ...           10 months ago
  • 0.13.0                                ...           a year ago
  • 0.12.0                                ...           a year ago
  • 0.11.1                                ...           a year ago
  • 0.11.0                                ...           a year ago
  • 0.10.0                                ...           a year ago
  • 0.9.0                                ...           a year ago
  • 0.8.0                                ...           a year ago
  • 0.7.0                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 88
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |