Add loadData prop to MongoNav

.changeset/yellow-socks-yell.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/mongo-nav': minor
+---
+
+Add `loadData` prop to `MongoNav`

packages/mongo-nav/README.md

@@ -39,6 +39,7 @@
 | `activeOrgId`              | `string`                                                                       | ID for active organization, will cause a POST request to cloud to update current active organization.                                                     |                                                         |
 | `activeProjectId`          | `string`                                                                       | ID for active project, will cause 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`                                                  |
 
 _Any other properties will be spread on the root element_
 

packages/mongo-nav/src/MongoNav.spec.tsx

@@ -295,4 +295,35 @@ describe('packages/mongo-nav', () => {
       );
     });
   });
+
+  describe('when loadData is set to false', () => {
+    beforeEach(() =>
+      renderComponent({
+        mode: 'dev',
+        loadData: false,
+      }),
+    );
+
+    test('the user name is not displayed', () => {
+      expect(expectedElements.userMenu?.innerHTML.includes('DevMode')).toBe(
+        false,
+      );
+    });
+
+    test('the current project name is not displayed', () => {
+      expect(
+        expectedElements.currentProject?.innerHTML.includes(
+          dataFixtures!.currentProject!.projectName,
+        ),
+      ).toBe(false);
+    });
+
+    test('the current organization name is not displayed', () => {
+      expect(
+        expectedElements.currentOrg?.innerHTML.includes(
+          dataFixtures!.currentOrganization!.orgName,
+        ),
+      ).toBe(false);
+    });
+  });
 });

packages/mongo-nav/src/MongoNav.story.tsx

@@ -30,6 +30,7 @@ storiesOf('MongoNav', module).add('Default', () => (
           version: '4.4.0',
           enabled: boolean('enabled', false),
         }}
+        loadData={boolean('loadData', true)}
       />
     </div>
   </LeafygreenProvider>

packages/mongo-nav/src/MongoNav.tsx

@@ -122,6 +122,11 @@ interface MongoNavInterface {
    * Applies a className to the root element
    */
   className?: string;
+
+  /**
+   * Determines whether or not the component will fetch data from cloud
+   */
+  loadData?: boolean;
 }
 
 /**
@@ -157,13 +162,15 @@ interface MongoNavInterface {
  * @param props.activeOrgId ID for active organization, will cause a POST request to cloud to update current active organization.
  * @param props.activeProjectId ID for active project, will cause a POST request to cloud to update current active project.
  * @param props.className Applies a className to the root element
+ * @param props.loadData Determines whether or not the component will fetch data from cloud
  */
 function MongoNav({
   activeProduct,
   activeNav,
   onOrganizationChange,
   onProjectChange,
   mode = Mode.Production,
+  loadData = true,
   showProjNav = true,
   admin = false,
   hosts: hostsProp,
@@ -224,7 +231,9 @@ function MongoNav({
   }
 
   useEffect(() => {
-    if (mode === Mode.Dev) {
+    if (!loadData) {
+      setData(undefined);
+    } else if (mode === Mode.Dev) {
       getDataFixtures().then(data => setData(data as DataInterface));
     } else {
       const body =
@@ -236,7 +245,7 @@ function MongoNav({
         .then(handleResponse)
         .catch(console.error);
     }
-  }, [mode, endpointURI, activeOrgId, activeProjectId]);
+  }, [mode, endpointURI, activeOrgId, activeProjectId, loadData]);
 
   const defaultURLS: Required<URLSInterface> = {
     userMenu: {