bug fixes (#2020)

bug fixes https://github.com/grafana/oncall-private/issues/1824
2023-05-26 09:46:05 +02:00 · 2023-05-26 09:46:05 +02:00 · d953315dfc
commit d953315dfc
parent ae7561a84f
9 changed files with 60 additions and 49 deletions
--- a/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
+++ b/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
@ -3,6 +3,7 @@
  height: 100%;
  padding: 16px;
  border: var(--border-weak);
+  min-width: min-content;
 }

 .cheatsheet-item {
--- a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx
+++ b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx
@ -13,6 +13,7 @@ import { CheatSheetInterface, CheatSheetItem } from './CheatSheet.config';
 import styles from './CheatSheet.module.css';

 interface CheatSheetProps {
+  cheatSheetName: string;
  cheatSheetData: CheatSheetInterface;
  onClose: () => void;
 }
@ -20,12 +21,12 @@ interface CheatSheetProps {
 const cx = cn.bind(styles);

 const CheatSheet = (props: CheatSheetProps) => {
-  const { cheatSheetData, onClose } = props;
+  const { cheatSheetName, cheatSheetData, onClose } = props;
  return (
    <div className={cx('cheatsheet-container')}>
      <VerticalGroup>
        <HorizontalGroup justify="space-between">
-          <Text strong>{cheatSheetData.name}</Text>
+          <Text strong>{cheatSheetName} cheatsheet</Text>
          <IconButton name="times" onClick={onClose} />
        </HorizontalGroup>
        <Text type="secondary">{cheatSheetData.description}</Text>
--- a/grafana-plugin/src/components/GForm/GForm.tsx
+++ b/grafana-plugin/src/components/GForm/GForm.tsx
@ -128,7 +128,7 @@ class GForm extends React.Component<GFormProps, {}> {
                disabled={formItem.getDisabled ? formItem.getDisabled(getValues()) : false}
                label={formItem.label || capitalCase(formItem.name)}
                invalid={!!errors[formItem.name]}
-                error={`${capitalCase(formItem.name)} is required`}
+                error={formItem.label ? `${formItem.label} is required` : `${capitalCase(formItem.name)} is required`}
                description={formItem.description}
              >
                {renderFormControl(formItem, register, control, (field, value) => {
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css
@ -25,6 +25,7 @@
  border: var(--border-weak);
  background-color: var(--background-secondary);
  height: 56px;
+  min-width: min-content;
 }

 .template-block-list {
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@ -100,7 +100,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {

  const onSaveAndFollowLink = useCallback(
    (link: string) => {
-      onHide();
+      onUpdateTemplates({ [template.name]: changedTemplateBody });
      window.open(link, '_blank');
    },
    [onUpdateTemplates, onUpdateRoute, changedTemplateBody]
@ -174,7 +174,11 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
            templates={templates}
          />
          {isCheatSheetVisible ? (
-            <CheatSheet cheatSheetData={getCheatSheet(template.displayName)} onClose={onCloseCheatSheet} />
+            <CheatSheet
+              cheatSheetName={template.displayName}
+              cheatSheetData={getCheatSheet(template.displayName)}
+              onClose={onCloseCheatSheet}
+            />
          ) : (
            <>
              <div className={cx('template-block-codeeditor')}>
@ -189,7 +193,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
                </div>

                <MonacoEditor
-                  value={templateBody}
+                  value={changedTemplateBody}
                  data={templates}
                  showLineNumbers={true}
                  height={'85vh'}
--- a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx
+++ b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';

-import { HorizontalGroup, Icon, LoadingPlaceholder } from '@grafana/ui';
+import { HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';

@ -69,17 +69,27 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
          {isCondition ? (
            <>
              <Icon name="check" size="lg" /> True
+              <Text type="secondary">{`Selected alert will ${templateName.substring(
+                0,
+                templateName.indexOf('_')
+              )} alert group`}</Text>
            </>
          ) : (
-            <HorizontalGroup>
-              <Icon name="exclamation-triangle" size="lg" />
-              <div
-                className={cx('message')}
-                dangerouslySetInnerHTML={{
-                  __html: sanitize(result.preview || ''),
-                }}
-              />
-            </HorizontalGroup>
+            <VerticalGroup>
+              <HorizontalGroup>
+                <Icon name="times-circle" size="lg" />
+                <div
+                  className={cx('message')}
+                  dangerouslySetInnerHTML={{
+                    __html: sanitize(result.preview || ''),
+                  }}
+                />
+              </HorizontalGroup>
+              <Text type="secondary">{`Selected alert will not ${templateName.substring(
+                0,
+                templateName.indexOf('_')
+              )} alert group`}</Text>
+            </VerticalGroup>
          )}
        </Text>
      ) : (
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
@ -1,7 +1,7 @@
 .template-block-title {
  padding: 16px 16px 16px 0;
  align-items: baseline;
-  height: 56px;
+  min-height: 56px;
 }

 .template-block-list {
@ -31,6 +31,11 @@
  width: 100%;
 }

+.alert-groups-editor div[aria-label='Code editor container'] {
+  border-bottom: none;
+  border-right: none;
+}
+
 .no-alert-groups-badge {
  display: flex;
  padding: 8px;
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
@ -1,15 +1,6 @@
 import React, { useEffect, useState } from 'react';

-import {
-  Button,
-  HorizontalGroup,
-  Tooltip,
-  Icon,
-  VerticalGroup,
-  IconButton,
-  Badge,
-  LoadingPlaceholder,
-} from '@grafana/ui';
+import { Button, HorizontalGroup, Tooltip, Icon, IconButton, Badge, LoadingPlaceholder } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { debounce } from 'lodash-es';

@ -88,7 +79,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                  </HorizontalGroup>
                </HorizontalGroup>
              </div>
-              <div className={cx('alert-groups-list')}>
+              <div className={cx('alert-groups-editor')}>
                <MonacoEditor
                  value={JSON.stringify(selectedAlertPayload, null, 4)}
                  data={templates}
@ -113,26 +104,23 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                  </HorizontalGroup>
                </HorizontalGroup>
              </div>
-              <div className={cx('alert-groups-list')}>
-                <VerticalGroup>
-                  <Badge color="blue" text="Last alert payload" />
-                  <div className={cx('alert-groups-editor')}>
-                    <MonacoEditor
-                      value={JSON.stringify(selectedAlertPayload, null, 4)}
-                      data={undefined}
-                      disabled
-                      height={'85vh'}
-                      onChange={getChangeHandler()}
-                      showLineNumbers
-                      useAutoCompleteList={false}
-                      language={MONACO_LANGUAGE.json}
-                      monacoOptions={{
-                        ...MONACO_PAYLOAD_OPTIONS,
-                        readOnly: true,
-                      }}
-                    />
-                  </div>
-                </VerticalGroup>
+              <div>
+                <div className={cx('alert-groups-editor')}>
+                  <MonacoEditor
+                    value={JSON.stringify(selectedAlertPayload, null, 4)}
+                    data={undefined}
+                    disabled
+                    height={'85vh'}
+                    onChange={getChangeHandler()}
+                    showLineNumbers
+                    useAutoCompleteList={false}
+                    language={MONACO_LANGUAGE.json}
+                    monacoOptions={{
+                      ...MONACO_PAYLOAD_OPTIONS,
+                      readOnly: true,
+                    }}
+                  />
+                </div>
              </div>
            </>
          )}
@ -150,7 +138,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                  </HorizontalGroup>
                </HorizontalGroup>
              </div>
-              <div className={cx('alert-groups-list')}>
+              <div className={cx('alert-groups-editor')}>
                <MonacoEditor
                  value={null}
                  disabled={true}
--- a/grafana-plugin/src/pages/integration_2/Integration2.tsx
+++ b/grafana-plugin/src/pages/integration_2/Integration2.tsx
@ -370,6 +370,7 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
                  this.setState({
                    isEditTemplateModalOpen: undefined,
                  });
+                  this.setState({ isTemplateSettingsOpen: true });
                  LocationHelper.update({ template: undefined, routeId: undefined }, 'partial');
                }}
                channelFilterId={channelFilterIdForEdit}