Make collapsed section header clickable (#20317)

* make collapsed secton header clickable - make section header color change on hover * check permissions - check permission for outputs section - check permission for Data routing - rename View details to Data routing * fix lint
Graylog2 · Sep 2, 2024 · 725ed36 · 725ed36
1 parent ce94516
commit 725ed36
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/graylog2-web-interface/src/components/common/Section.tsx b/graylog2-web-interface/src/components/common/Section.tsx
@@ -14,7 +14,6 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { useDisclosure } from '@mantine/hooks';
@@ -24,21 +23,25 @@ import Icon from './Icon';
 
 import { Button } from '../bootstrap';
 
-const Container = styled.div(({ theme }) => css`
+const Container = styled.div<{ $collapsible: boolean, $opened: boolean}>(({ $collapsible, $opened, theme }) => css`
   background-color: ${theme.colors.section.filled.background};
   border: 1px solid ${theme.colors.section.filled.border};
   border-radius: 10px;
-  padding: 15px;
+  padding: ${($collapsible && !$opened) ? 0 : theme.spacings.md};
   margin-bottom: ${theme.spacings.xxs};
 `);
 
-const Header = styled.div(({ theme }) => css`
+const Header = styled.div<{ $collapsible: boolean, $opened: boolean}>(({ $collapsible, $opened, theme }) => css`
   display: flex;
   justify-content: space-between;
   gap: ${theme.spacings.xs};
   align-items: center;
-  margin-bottom: ${theme.spacings.xs};
+  border-radius: 10px;
+  padding: ${($collapsible && !$opened) ? theme.spacings.md : 0};
   flex-wrap: wrap;
+    &:hover {
+    background-color: ${($collapsible && !$opened) ? theme.colors.table.row.backgroundHover : 'initial'};
+  }
 `);
 
 const FlexWrapper = styled.div(({ theme }) => css`
@@ -62,24 +65,25 @@ type Props = React.PropsWithChildren<{
  */
 const Section = ({ title, actions, headerLeftSection, collapsible, defaultClosed, disableCollapseButton, children }: Props) => {
   const [opened, { toggle }] = useDisclosure(!defaultClosed);
+  const onHeaderClick = () => (!disableCollapseButton && toggle());
 
   return (
-    <Container>
-      <Header>
+    <Container $opened={opened} $collapsible={collapsible}>
+      <Header $opened={opened} $collapsible={collapsible} onClick={onHeaderClick}>
         <FlexWrapper>
           <h2>{title}</h2>
           {headerLeftSection && <FlexWrapper>{headerLeftSection}</FlexWrapper>}
         </FlexWrapper>
         <FlexWrapper>
           {actions && <div>{actions}</div>}
           {collapsible && (
-            <Button bsSize="sm"
-                    bsStyle={opened ? 'primary' : 'default'}
-                    onClick={toggle}
-                    data-testid="collapseButton"
-                    disabled={disableCollapseButton}>
-              <Icon size="sm" name={opened ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
-            </Button>
+          <Button bsSize="sm"
+                  bsStyle={opened ? 'primary' : 'default'}
+                  onClick={toggle}
+                  data-testid="collapseButton"
+                  disabled={disableCollapseButton}>
+            <Icon size="sm" name={opened ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
+          </Button>
           )}
         </FlexWrapper>
       </Header>

diff --git a/...log2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingDestinations.tsx b/...log2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingDestinations.tsx
@@ -19,6 +19,7 @@ import * as React from 'react';
 import { PluginStore } from 'graylog-web-plugin/plugin';
 import styled, { css } from 'styled-components';
 
+import { IfPermitted } from 'components/common';
 import type { Stream } from 'stores/streams/StreamsStore';
 import useSingleIndexSet from 'components/indices/hooks/useSingleIndexSet';
 import DestinationOutputs from 'components/streams/StreamDetails/routing-destination/DestinationOutputs';
@@ -43,7 +44,9 @@ const StreamDataRoutingDestinations = ({ stream }: Props) => {
     <Container>
       {isSuccess && <DestinationIndexSetSection indexSet={indexSet} stream={stream} />}
       {StreamDataWarehouseComponent && <StreamDataWarehouseComponent />}
-      <DestinationOutputs stream={stream} />
+      <IfPermitted permissions="outputs:edit">
+        <DestinationOutputs stream={stream} />
+      </IfPermitted>
     </Container>
   );
 };

diff --git a/...e/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx b/...e/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx
@@ -14,7 +14,6 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-
 import * as React from 'react';
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -27,13 +26,13 @@ import { LinkContainer } from 'components/common/router';
 import Routes from 'routing/Routes';
 import { useStore } from 'stores/connect';
 import type { Stream } from 'stores/streams/StreamsStore';
+import NumberUtils from 'util/NumberUtils';
 import useStreamOutputFilters from 'components/streams/hooks/useStreamOutputFilters';
 import IndexSetArchivingCell from 'components/streams/StreamDetails/routing-destination/IndexSetArchivingCell';
 import IndexSetUpdateForm from 'components/streams/StreamDetails/routing-destination/IndexSetUpdateForm';
 import IndexSetFilters from 'components/streams/StreamDetails/routing-destination/IndexSetFilters';
 import SectionCountLabel from 'components/streams/StreamDetails/SectionCountLabel';
 import useIndexSetStats from 'hooks/useIndexSetStats';
-import NumberUtils from 'util/NumberUtils';
 import { DEFAULT_PAGINATION } from 'stores/PaginationTypes';
 
 type Props = {
@@ -73,6 +72,7 @@ const DestinationIndexSetSection = ({ indexSet, stream }: Props) => {
   return (
     <Section title="Index Set"
              collapsible
+             defaultClosed
              headerLeftSection={(
                <>
                  <StyledSwitch aria-label="Toggle index set"

diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/StreamActions.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/StreamActions.tsx
@@ -161,9 +161,11 @@ const StreamActions = ({
 
   return (
     <ButtonToolbar>
-      <LinkContainer to={Routes.stream_view(stream.id)}>
-        <Button disabled={isNotEditable} bsStyle="primary" bsSize="xsmall">View details</Button>
-      </LinkContainer>
+      <IfPermitted permissions={`streams:edit:${stream.id}`}>
+        <LinkContainer to={Routes.stream_view(stream.id)}>
+          <Button disabled={isNotEditable} bsStyle="primary" bsSize="xsmall">Data Routing</Button>
+        </LinkContainer>
+      </IfPermitted>
       <ShareButton entityId={stream.id}
                    entityType="stream"
                    onClick={toggleEntityShareModal}