Merge pull request #1190 from prymitive/fix-navbar-storybook

fix(storybook): avoid navbar overlap on storybook

ui/.storybook/config.js

@@ -26,7 +26,7 @@ addDecorator(story => {
 addDecorator(story => {
   return (
     <div>
-      <div class="theme-light">
+      <div className="theme-light">
         <ThemeContext.Provider
           value={{
             reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light)
@@ -44,7 +44,7 @@ addDecorator(story => {
           marginBottom: "4px"
         }}
       ></div>
-      <div class="theme-dark">
+      <div className="theme-dark">
         <ThemeContext.Provider
           value={{
             reactSelectStyles: ReactSelectStyles(ReactSelectColors.Dark)

ui/src/Components/NavBar/index.js

@@ -27,7 +27,11 @@ const NavBar = observer(
     static propTypes = {
       alertStore: PropTypes.instanceOf(AlertStore).isRequired,
       settingsStore: PropTypes.instanceOf(Settings).isRequired,
-      silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
+      silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
+      fixedTop: PropTypes.bool
+    };
+    static defaultProps = {
+      fixedTop: true
     };
 
     constructor(props) {
@@ -105,7 +109,12 @@ const NavBar = observer(
     };
 
     render() {
-      const { alertStore, settingsStore, silenceFormStore } = this.props;
+      const {
+        alertStore,
+        settingsStore,
+        silenceFormStore,
+        fixedTop
+      } = this.props;
 
       // if we have at least 1 filter then it's likely that filter input will
       // use 2 lines, so set right side icons on small screeens to column mode
@@ -130,13 +139,19 @@ const NavBar = observer(
           }}
           timeout={isMobile ? MobileIdleTimeout : DesktopIdleTimeout}
         >
-          <div className={`container ${this.activityStatus.className}`}>
+          <div
+            className={`container p-0 m-0 mw-100 ${this.activityStatus.className}`}
+          >
             <NavBarSlide
               in={!this.activityStatus.idle}
               onEntering={this.onShow}
               onExited={this.onHide}
             >
-              <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
+              <nav
+                className={`navbar navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block ${
+                  fixedTop ? "fixed-top" : "w-100"
+                }`}
+              >
                 <ReactResizeDetector handleHeight onResize={this.onResize} />
                 <span className="navbar-brand p-0 my-0 mx-2 h1 d-none d-sm-block float-left">
                   <OverviewModal alertStore={alertStore} />

ui/src/Components/NavBar/index.stories.js

@@ -89,21 +89,20 @@ storiesOf("NavBar", module).add("NavBar", () => {
         alertStore={alertStore}
         settingsStore={settingsStore}
         silenceFormStore={silenceFormStore}
+        fixedTop={false}
+      />
+      <HistoryMenuContent
+        popperPlacement="top"
+        popperRef={() => {}}
+        popperStyle={{}}
+        filters={history}
+        onClear={() => {}}
+        alertStore={alertStore}
+        settingsStore={settingsStore}
+        afterClick={() => {}}
+        handleClickOutside={() => {}}
+        outsideClickIgnoreClass="components-navbar-history"
       />
-      <div style={{ position: "absolute", top: "150px", left: "5%" }}>
-        <HistoryMenuContent
-          popperPlacement="top"
-          popperRef={() => {}}
-          popperStyle={{}}
-          filters={history}
-          onClear={() => {}}
-          alertStore={alertStore}
-          settingsStore={settingsStore}
-          afterClick={() => {}}
-          handleClickOutside={() => {}}
-          outsideClickIgnoreClass="components-navbar-history"
-        />
-      </div>
     </React.Fragment>
   );
 });

ui/src/Components/NavBar/index.test.js

@@ -75,6 +75,40 @@ describe("<NavBar />", () => {
     ValidateNavClass(3, "flex-column");
   });
 
+  it("navbar includes 'fixed-top' class by default", () => {
+    const tree = MountedNavbar();
+    const nav = tree.find(".navbar");
+    expect(nav.props().className.split(" ")).toContain("fixed-top");
+  });
+
+  it("navbar includes 'fixed-top' class with fixedTop=true", () => {
+    const tree = mount(
+      <NavBar
+        alertStore={alertStore}
+        settingsStore={settingsStore}
+        silenceFormStore={silenceFormStore}
+        fixedTop={true}
+      />
+    );
+    const nav = tree.find(".navbar");
+    expect(nav.props().className.split(" ")).toContain("fixed-top");
+    expect(nav.props().className.split(" ")).not.toContain("w-100");
+  });
+
+  it("navbar doesn't 'fixed-top' class with fixedTop=false", () => {
+    const tree = mount(
+      <NavBar
+        alertStore={alertStore}
+        settingsStore={settingsStore}
+        silenceFormStore={silenceFormStore}
+        fixedTop={false}
+      />
+    );
+    const nav = tree.find(".navbar");
+    expect(nav.props().className.split(" ")).not.toContain("fixed-top");
+    expect(nav.props().className.split(" ")).toContain("w-100");
+  });
+
   it("body 'padding-top' style is updated after calling NavbarOnResize()", () => {
     const tree = MountedNavbar();
     tree.instance().onResize(0, 10);

ui/src/Components/SilenceModal/index.stories.js

@@ -74,6 +74,27 @@ storiesOf("SilenceModal", module)
         overwriteRoutes: true
       }
     );
+    fetchMock.mock(
+      "begin:/alerts.json?q=tooLong",
+      {
+        body: "error",
+        status: 503
+      },
+      {
+        overwriteRoutes: true
+      }
+    );
+    fetchMock.mock(
+      "begin:/label",
+      {
+        status: 200,
+        body: JSON.stringify([]),
+        headers: { "Content-Type": "application/json" }
+      },
+      {
+        overwriteRoutes: true
+      }
+    );
 
     return (
       <React.Fragment>

ui/src/Styles/Percy.scss

@@ -6,3 +6,8 @@
 body {
   font-family: sans-serif !important;
 }
+
+.dropdown-menu {
+  position: relative !important;
+  float: none !important;
+}

ui/src/__mocks__/Stories.js

@@ -183,7 +183,6 @@ const MockGrid = alertStore => {
 
     for (let j = 0; j < group.alerts.length; j++) {
       if (group.alerts[j].state === "suppressed") {
-        group.alerts[j].silencedBy = [silence.id];
         group.alerts[j].alertmanager = [
           {
             name: "am1",