test: Adds tests and storybook to PopoverSection component (#13438)

* test: Adds storybook to PopoverSection component

* test: Adds tests and storybook to PopoverSection component

superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx

@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import PopoverSection from '.';
+
+export default {
+  title: 'PopoverSection',
+};
+
+export const InteractivePopoverSection = (args: any) => (
+  <PopoverSection {...args}>
+    <div
+      css={{
+        display: 'flex',
+        justifyContent: 'center',
+        border: '1px solid',
+        alignItems: 'center',
+        width: 100,
+        height: 100,
+      }}
+    >
+      Content
+    </div>
+  </PopoverSection>
+);
+
+InteractivePopoverSection.args = {
+  title: 'Title',
+  isSelected: true,
+  info: 'Some description about the content',
+};
+
+InteractivePopoverSection.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import PopoverSection from 'src/components/PopoverSection';
+
+test('renders with default props', () => {
+  render(
+    <PopoverSection title="Title">
+      <div role="form" />
+    </PopoverSection>,
+  );
+  expect(screen.getByRole('form')).toBeInTheDocument();
+  expect(screen.getAllByRole('img').length).toBe(1);
+});
+
+test('renders tooltip icon', () => {
+  render(
+    <PopoverSection title="Title" info="Tooltip">
+      <div role="form" />
+    </PopoverSection>,
+  );
+  expect(screen.getAllByRole('img').length).toBe(2);
+});
+
+test('renders a tooltip when hovered', async () => {
+  render(
+    <PopoverSection title="Title" info="Tooltip">
+      <div role="form" />
+    </PopoverSection>,
+  );
+  userEvent.hover(screen.getAllByRole('img')[0]);
+  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+});
+
+test('calls onSelect when clicked', () => {
+  const onSelect = jest.fn();
+  render(
+    <PopoverSection title="Title" onSelect={onSelect}>
+      <div role="form" />
+    </PopoverSection>,
+  );
+  userEvent.click(screen.getByRole('img'));
+  expect(onSelect).toHaveBeenCalled();
+});

superset-frontend/src/components/PopoverSection/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { MouseEventHandler, ReactNode } from 'react';
+import { useTheme } from '@superset-ui/core';
+import { Tooltip } from 'src/common/components/Tooltip';
+import Icon from 'src/components/Icon';
+
+export interface PopoverSectionProps {
+  title: string;
+  isSelected?: boolean;
+  onSelect?: MouseEventHandler<HTMLDivElement>;
+  info?: string;
+  children?: ReactNode;
+}
+
+export default function PopoverSection({
+  title,
+  isSelected,
+  children,
+  onSelect,
+  info,
+}: PopoverSectionProps) {
+  const theme = useTheme();
+  return (
+    <div
+      css={{
+        paddingBottom: theme.gridUnit * 2,
+        opacity: isSelected ? 1 : theme.opacity.mediumHeavy,
+      }}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={onSelect}
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: onSelect ? 'pointer' : 'default',
+        }}
+      >
+        <strong data-test="popover-title">{title}</strong>
+        {info && (
+          <Tooltip title={info} css={{ marginLeft: theme.gridUnit }}>
+            <Icon
+              role="img"
+              name="info-solid"
+              width={14}
+              height={14}
+              color={theme.colors.grayscale.light1}
+            />
+          </Tooltip>
+        )}
+        <Icon
+          role="img"
+          name="check"
+          color={
+            isSelected ? theme.colors.primary.base : theme.colors.grayscale.base
+          }
+        />
+      </div>
+      <div
+        css={{
+          marginLeft: theme.gridUnit,
+          marginTop: theme.gridUnit,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

superset-frontend/src/explore/components/controls/AnnotationLayer.jsx

@@ -455,10 +455,9 @@ export default class AnnotationLayer extends React.PureComponent {
         <div style={{ marginRight: '2rem' }}>
           <PopoverSection
             isSelected
-            onSelect={() => {}}
-            title="Annotation Slice Configuration"
-            info={`This section allows you to configure how to use the slice
-               to generate annotations.`}
+            title={t('Annotation Slice Configuration')}
+            info={t(`This section allows you to configure how to use the slice
+               to generate annotations.`)}
           >
             {(annotationType === ANNOTATION_TYPES.EVENT ||
               annotationType === ANNOTATION_TYPES.INTERVAL) && (
@@ -597,7 +596,6 @@ export default class AnnotationLayer extends React.PureComponent {
     return (
       <PopoverSection
         isSelected
-        onSelect={() => {}}
         title={t('Display configuration')}
         info={t('Configure your how you overlay is displayed here.')}
       >
@@ -697,7 +695,6 @@ export default class AnnotationLayer extends React.PureComponent {
           <div style={{ marginRight: '2rem' }}>
             <PopoverSection
               isSelected
-              onSelect={() => {}}
               title={t('Layer configuration')}
               info={t('Configure the basics of your Annotation Layer.')}
             >

superset-frontend/stylesheets/superset.less

@@ -460,18 +460,10 @@ iframe {
   color: transparent;
 }
 
-.dimmed {
-  opacity: 0.5;
-}
-
 .pointer {
   cursor: pointer;
 }
 
-.PopoverSection {
-  padding-bottom: 10px;
-}
-
 .popover {
   max-width: 500px;
 }