Grouping templating polishing11 (#2293)

- [x] Alert group scroll - [x] Result scroll right padding - [x] Cheatsheet scroll right padding - [x] Template editor and cheatsheet title alight center - [x] Edit custom payload - left padding - [x] Change background of Use custom payload title like Template Editor - [x] No alert groups is missing right border - [x] Save template - should not close the drawer if there is an error - [x] Width cheatsheet code 100% - [x] Edit/close Alert payload margin 8px - [x] Background secondary Result - when Select alert group message
grafana · Jun 20, 2023 · e4788d5 · e4788d5
1 parent 89834ee
commit e4788d5
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 25 deletions.
diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css b/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
@@ -4,12 +4,12 @@
   padding: 16px;
   border: var(--border-weak);
   min-width: min-content;
+  overflow-y: scroll;
 }
 
 .cheatsheet-container > div {
   height: 100%;
   max-height: 100%;
-  overflow-y: scroll;
 }
 
 .cheatsheet-item {

diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx
@@ -30,7 +30,7 @@ const CheatSheet = (props: CheatSheetProps) => {
           <IconButton name="times" onClick={onClose} />
         </HorizontalGroup>
         <Text type="secondary">{cheatSheetData.description}</Text>
-        <div>
+        <div style={{ width: '100%' }}>
           {cheatSheetData.fields?.map((field: CheatSheetItem) => {
             return (
               <div key={field.name} className={cx('cheatsheet-item')}>

diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
@@ -14,7 +14,6 @@
   max-height: 100%;
   width: 100%;
   border: var(--border-strong);
-  padding: 0 16px;
 }
 
 .template-block-title {
@@ -24,7 +23,7 @@
 }
 
 .template-editor-block-title {
-  padding: 8px 16px;
+  padding: 8px 16px 0;
   align-items: baseline;
   border: var(--border-weak);
   background-color: var(--background-secondary);
@@ -56,7 +55,7 @@
   overflow-y: scroll !important;
 }
 .result {
-  padding-left: 16px;
+  padding: 0 16px;
   padding-bottom: 60px;
 }
 

diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@@ -119,10 +119,8 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
   const handleSubmit = useCallback(() => {
     if (template.isRoute) {
       onUpdateRoute({ [template.name]: changedTemplateBody }, channelFilterId);
-      onHide();
     } else {
       onUpdateTemplates({ [template.name]: changedTemplateBody });
-      onHide();
     }
   }, [onUpdateTemplates, changedTemplateBody]);
 
@@ -199,7 +197,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
             <>
               <div className={cx('template-block-codeeditor')}>
                 <div className={cx('template-editor-block-title')}>
-                  <HorizontalGroup justify="space-between" wrap>
+                  <HorizontalGroup justify="space-between" align="center" wrap>
                     <Text>Template editor</Text>
 
                     <Button variant="secondary" fill="outline" onClick={onShowCheatSheet} icon="book" size="sm">
@@ -299,7 +297,7 @@ const Result = (props: ResultProps) => {
           </VerticalGroup>
         ) : (
           <div>
-            <Block bordered fullWidth className={cx('block-style')}>
+            <Block bordered fullWidth className={cx('block-style')} withBackground>
               <Text>← Select alert group or "Use custom payload"</Text>
             </Block>
           </div>

diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
@@ -1,14 +1,21 @@
 .template-block-title {
-  padding: 16px 16px 16px 0;
+  padding: 16px;
   align-items: baseline;
   min-height: 56px;
 }
 
+.template-block-title-edit-mode {
+  padding: 16px;
+  align-items: baseline;
+  min-height: 56px;
+  background-color: var(--background-secondary);
+}
+
 .template-block-list {
   width: 30%;
   height: 100%;
   max-width: 100%;
-  overflow-y: hidden;
+  overflow-y: scroll;
 }
 
 .alert-group-payload-view {
@@ -17,12 +24,8 @@
   padding-left: 0;
 }
 
-.alert-groups-list > div {
-  border-right: none;
-}
-
 .alert-groups-list {
-  padding-right: 16px;
+  padding: 0 16px;
 }
 
 .alert-groups-list button {
@@ -38,11 +41,6 @@
   background-color: var(--background-secondary);
 }
 
-.alert-groups-editor {
-  width: calc(100% + 16px);
-  margin-left: -16px;
-}
-
 .alert-groups-editor div[aria-label='Code editor container'] {
   border-bottom: none;
   border-right: none;
@@ -86,4 +84,5 @@
 .title-action-icons {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
@@ -85,7 +85,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
         <>
           {isEditMode ? (
             <>
-              <div className={cx('template-block-title')}>
+              <div className={cx('template-block-title-edit-mode')}>
                 <HorizontalGroup justify="space-between">
                   <Text>Edit custom payload</Text>
 
@@ -151,7 +151,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
         <>
           {isEditMode ? (
             <>
-              <div className={cx('template-block-title')}>
+              <div className={cx('template-block-title-edit-mode')}>
                 <HorizontalGroup justify="space-between">
                   <Text>Edit custom payload</Text>
 
@@ -168,7 +168,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                   language={MONACO_LANGUAGE.json}
                   data={templates}
                   monacoOptions={MONACO_PAYLOAD_OPTIONS}
-                  showLineNumbers={false}
+                  showLineNumbers
                   height={getCodeEditorHeight()}
                   onChange={getChangeHandler()}
                 />

diff --git a/grafana-plugin/src/pages/integration_2/Integration2.tsx b/grafana-plugin/src/pages/integration_2/Integration2.tsx
@@ -514,6 +514,10 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
         alertReceiveChannelStore.updateChannelFilters(id, true).then(() => {
           escalationPolicyStore.updateEscalationPolicies(channelFilter.escalation_chain);
         });
+        this.setState({
+          isEditTemplateModalOpen: undefined,
+        });
+        LocationHelper.update({ template: undefined, routeId: undefined }, 'partial');
       })
       .catch((err) => {
         const errors = get(err, 'response.data');
@@ -535,12 +539,17 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
       .saveTemplates(id, data)
       .then(() => {
         openNotification('The Alert templates have been updated');
+        this.setState({
+          isEditTemplateModalOpen: undefined,
+        });
+        this.setState({ isTemplateSettingsOpen: true });
+        LocationHelper.update({ template: undefined, routeId: undefined }, 'partial');
       })
       .catch((err) => {
         if (err.response?.data?.length > 0) {
           openErrorNotification(err.response.data);
         } else {
-          openErrorNotification(err.message);
+          openErrorNotification('Template is not valid. Please check your template and try again');
         }
       });
   };