From 854dfd56a08d30c8cbf8c7831fe37a694e885738 Mon Sep 17 00:00:00 2001 From: Dominik Broj Date: Wed, 14 Aug 2024 14:52:55 +0200 Subject: [PATCH] Polish unified slack ui (#4819) # What this PR does polish ui of unified slack: - [x] New deprecation banner - [x] Move install/uninstall button to the top right corner - [x] New texts in migrate modal - [x] New text and layout in uninstall modal. ## Which issue(s) this PR closes Related to https://github.com/grafana/oncall-gateway/issues/299 ## Checklist - [ ] Unit, integration, and e2e (if applicable) tests updated - [x] Documentation added (or `pr:no public docs` PR label added if not required) - [x] Added the relevant release notes label (see labels prefixed w/ `release:`). These labels dictate how your PR will show up in the autogenerated release notes. --- grafana-plugin/src/assets/style/utils.css | 8 + .../components/WithConfirm/WithConfirm.tsx | 2 + .../SlackSettings/SlackSettings.module.css | 17 +- .../tabs/SlackSettings/SlackSettings.tsx | 240 ++++++++++-------- 4 files changed, 150 insertions(+), 117 deletions(-) diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index 76d404c0..23d3a18f 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -36,6 +36,10 @@ margin-right: 4px; } +.u-margin-left-xs { + margin-left: 4px; +} + .u-margin-bottom-none { margin-bottom: 0; } @@ -44,6 +48,10 @@ margin-bottom: 12px; } +.u-margin-bottom-xxs { + margin-bottom: 2px; +} + .u-margin-top-xs { margin-top: 4px; } diff --git a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx index 51a92e7c..fc724528 100644 --- a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx +++ b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx @@ -17,6 +17,7 @@ export const WithConfirm: React.FC = ({ children, disabled, skip = false, + modalClass, }) => { const [showConfirmation, setShowConfirmation] = useState(false); @@ -57,6 +58,7 @@ export const WithConfirm: React.FC = ({ onDismiss={() => { setShowConfirmation(false); }} + modalClass={modalClass} /> )} {React.cloneElement(children, { diff --git a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.module.css b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.module.css index ab38f543..20256d77 100644 --- a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.module.css +++ b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.module.css @@ -18,7 +18,7 @@ .slack-infoblock { text-align: center; - width: 725px; + width: 100%; } .external-link-style { @@ -33,10 +33,9 @@ .infoblock-text { margin-left: 48px; margin-right: 48px; - margin-top: 24px; } -.infoblock-icon { +.marginTop { margin-top: 24px; } @@ -47,10 +46,18 @@ transform: translateY(-50%); } -.upgradeSlackAlert svg { - display: none; +.upgradeSlackAlertText { + margin-right: 110px; + + a { + font-weight: 600; + } } .linkToIncidentWrapper { margin-top: 16px; } + +.confirmUninstallModal input { + min-width: 300px; +} diff --git a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.tsx b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.tsx index 213f3b6b..112fa050 100644 --- a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.tsx +++ b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings.tsx @@ -4,13 +4,13 @@ import { Alert, HorizontalGroup, LoadingPlaceholder, - VerticalGroup, Icon, Button, InlineField, Input, Legend, ConfirmModal, + Stack, } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; @@ -31,7 +31,7 @@ import { WithStoreProps } from 'state/types'; import { useStore } from 'state/useStore'; import { withMobXProviderContext } from 'state/withStore'; import { UserActions } from 'utils/authorization/authorization'; -import { DOCS_SLACK_SETUP, getPluginId } from 'utils/consts'; +import { DOCS_ROOT, DOCS_SLACK_SETUP, getPluginId } from 'utils/consts'; import { useConfirmModal } from 'utils/hooks'; import { showApiError } from 'utils/utils'; @@ -122,9 +122,74 @@ class _SlackSettings extends Component { const isUnifiedSlackInstalled = !currentOrganization.slack_team_identity.needs_reinstall; + const uninstallSlackButton = ( + + {isUnifiedSlackInstalled ? ( + + + Are you sure you want to remove this integration from OnCall and Incident? + +

+ This action will uninstall the IRM Slack integration from OnCall and Incident. The following IRM data + will be permanently deleted: +

+
    +
  • OnCall default Slack channel
    • +
  • Slack channels for OnCall escalation policies
    • +
  • Slack channels and user groups for OnCall schedules
    • +
  • Linked Slack profiles for OnCall users
    • +
  • Incident announcement and automatic Slack channel creation
    • +
+
+ + } + confirmationText="UNINSTALL" + confirmText="Uninstall" + > + + + ) : ( + +

Are you sure to delete this Slack Integration?

+

Removing the integration will also irreverisbly remove the following data for your OnCall plugin:

+
    +
  • default organization Slack channel
    • +
  • default Slack channels for OnCall Integrations
    • +
  • Slack channels & Slack user groups for OnCall Schedules
    • +
  • linked Slack usernames for OnCall Users
    • +
+
+

+ If you would like to instead remove your linked Slack username, please head{' '} + here. +

+ + } + confirmationText="DELETE" + > + + + )} + + ); + return (
- Slack App settings + + Slack OnCall settings + {uninstallSlackButton} + {currentOrganization.slack_team_identity.needs_reinstall && } @@ -152,62 +217,6 @@ class _SlackSettings extends Component { severity="info" title="Tip: Create a separate channel for OnCall Slack App notifications (catch-all). Avoid using #general, etc." /> - - - {isUnifiedSlackInstalled ? ( - -

Are you sure to delete this Slack Integration? It will affect both OnCall & Incident.

-

Removing the integration will irreverisbly remove the following data for IRM;

-
    -
  • OnCall default Slack channel
    • -
  • Slack channels for OnCall escalation policies
    • -
  • Slack channels & Slack user groups for OnCall Schedules
    • -
  • linked Slack usernames for OnCall Users
    • -
  • Incident hooks
    • -
-
- - } - confirmationText="DELETE" - > - - - ) : ( - -

Are you sure to delete this Slack Integration?

-

- Removing the integration will also irreverisbly remove the following data for your OnCall plugin: -

-
    -
  • default organization Slack channel
    • -
  • default Slack channels for OnCall Integrations
    • -
  • Slack channels & Slack user groups for OnCall Schedules
    • -
  • linked Slack usernames for OnCall Users
    • -
-
-

- If you would like to instead remove your linked Slack username, please head{' '} - here. -

- - } - confirmationText="DELETE" - > - - - )} - - Additional settings { const isUnifiedSlackEnabled = store.hasFeature(AppFeature.UnifiedSlack); return ( - - Connect Slack workspace + + + Slack + {isLiveSettingAvailable ? ( + + + + ) : ( + + + {store.hasFeature(AppFeature.LiveSettings) && ( + + + + )} + + )} + - -
+ +
- + {isUnifiedSlackEnabled ? 'Connecting Slack App will allow you to manage alert groups and incidents in your team Slack workspace.' : 'Connecting Slack App will allow you to manage alert groups in your team Slack workspace.'} - After a basic workspace connection your team members need to connect their personal Slack accounts in - order to be allowed to manage alert groups. + Once the workspace is connected, team members need to link their Slack accounts to their IRM users to + start using the app. {isLiveSettingAvailable && ( - + For bot creating instructions and additional information please read{' '} our documentation )} - - + - {isLiveSettingAvailable ? ( - - - - ) : ( - - - {store.hasFeature(AppFeature.LiveSettings) && ( - - - - )} - - )} - + ); }; } @@ -350,48 +356,58 @@ const UpgradeToUnifiedSlackBanner = observer(() => { return ( <> - Upgrade
} - > - We've rebranded the OnCall Slack app as the Grafana IRM Slack app, now with incident management features. -

Click "Upgrade" to reviewn and approve the new permissions and complete the process.

-

For more details, check our documentation.

+ +
+ The OnCall Slack app is now a Grafana IRM app with new incident management features. Migrate now to access the + enhanced capabilities.{' '} + + {/* TODO: update link to docs */} + Learn more + +