Migration: Edit notification channel (#25980)

* implement edit page

* connectWithCleanup

* remove angular related code

* use loadingindicator

* use the correct loading component

* handle secureFields

* fixed implementation of secure fields

* Keep secureFields after rerendering the form

* CollapsableSection and Page refactor

* use checkbox instead of switch

* fix comment

* add cursor to section

* Fixed issues after PR review

* Fix issue with some settings being undefined

* new reducer and start with test

* algorithm to migrate secure fields

* UX: Minor UI Tweaks

* Added field around checkboxes, and missing required field

* fixed test

* tests for util

* minor tweaks and changes

* define as records

* fix typ error

* forward invalid to textarea and inputcontrol

* merge formdata and redux data in test

* fix issue with creating channel

* do not figure out securefields in migration

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/Collapse/CollapsableSection.mdx

@@ -0,0 +1,10 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { CollapsableSection } from './CollapsableSection';
+
+<Meta title="MDX|CollapsableSection" component={CollapsableSection} />
+
+# Collapsable Section
+A simple container for enabling collapsing/expanding of content.
+
+
+<Props of={CollapsableSection} />

packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CollapsableSection } from './CollapsableSection';
+import mdx from './CollapsableSection.mdx';
+
+export default {
+  title: 'Layout/CollapsableSection',
+  component: CollapsableSection,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const simple = () => {
+  return (
+    <CollapsableSection label="Collapsable section" isOpen>
+      <div>Here's some content</div>
+    </CollapsableSection>
+  );
+};

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -0,0 +1,38 @@
+import React, { FC, ReactNode, useState } from 'react';
+import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles } from '../../themes';
+import { Icon } from '..';
+
+export interface Props {
+  label: string;
+  isOpen: boolean;
+  children: ReactNode;
+}
+
+export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
+  const [open, toggleOpen] = useState<boolean>(isOpen);
+  const styles = useStyles(collapsableSectionStyles);
+
+  return (
+    <div>
+      <div onClick={() => toggleOpen(!open)} className={styles.header}>
+        <Icon name={open ? 'angle-down' : 'angle-right'} size="xl" />
+        {label}
+      </div>
+      <div className={styles.content}>{open && children}</div>
+    </div>
+  );
+};
+
+const collapsableSectionStyles = (theme: GrafanaTheme) => {
+  return {
+    header: css`
+      font-size: ${theme.typography.size.lg};
+      cursor: pointer;
+    `,
+    content: css`
+      padding: ${theme.spacing.md} 0 ${theme.spacing.md} ${theme.spacing.md};
+    `,
+  };
+};

packages/grafana-ui/src/components/Forms/Checkbox.tsx

@@ -80,7 +80,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
       background: ${theme.colors.formInputBg};
       border: 1px solid ${theme.colors.formInputBorder};
       position: absolute;
-      top: 1px;
+      top: 2px;
       left: 0;
 
       &:hover {

packages/grafana-ui/src/components/index.ts

@@ -93,6 +93,7 @@ export {
 export { Alert, AlertVariant } from './Alert/Alert';
 export { GraphSeriesToggler, GraphSeriesTogglerAPI } from './Graph/GraphSeriesToggler';
 export { Collapse, ControlledCollapse } from './Collapse/Collapse';
+export { CollapsableSection } from './Collapse/CollapsableSection';
 export { LogLabels } from './Logs/LogLabels';
 export { LogRows } from './Logs/LogRows';
 export { getLogRowStyles } from './Logs/getLogRowStyles';