style: use actionable notification for warning content (#4458)

* style: use actionable notification for warning content

* refactor: use notification title

client/src/App/Carbon/Decisions/Decision/DecisionOperations/index.tsx

@@ -9,12 +9,13 @@ import {useState} from 'react';
 import {DangerButton} from 'modules/components/Carbon/OperationItem/DangerButton';
 import {OperationItems} from 'modules/components/Carbon/OperationItems';
 import {DeleteButtonContainer} from 'modules/components/DeleteDefinition/styled';
-import {InlineLoading} from '@carbon/react';
+import {InlineLoading, Link, ListItem, Stack} from '@carbon/react';
 import {DeleteDefinitionModal} from 'modules/components/Carbon/DeleteDefinitionModal';
 import {operationsStore} from 'modules/stores/operations';
 import {panelStatesStore} from 'modules/stores/panelStates';
 import {useNotifications} from 'modules/notifications';
 import {DetailTable} from 'modules/components/Carbon/DeleteDefinitionModal/DetailTable';
+import {UnorderedList} from 'modules/components/Carbon/DeleteDefinitionModal/Warning/styled';
 
 type Props = {
   decisionDefinitionId: string;
@@ -53,7 +54,35 @@ const DecisionOperations: React.FC<Props> = ({
         description="You are about to delete the following DRD:"
         confirmationText="Yes, I confirm I want to delete this DRD and all related instances."
         isVisible={isDeleteModalVisible}
-        warningContent={'warning'}
+        warningTitle="Deleting a decision definition will delete the DRD and will impact
+        the following:"
+        warningContent={
+          <Stack gap={6}>
+            <UnorderedList nested>
+              <ListItem>
+                By deleting a decision definition, you will be deleting the DRD
+                which contains this decision definition. All other decision
+                tables and literal expressions that are part of the DRD will
+                also be deleted.
+              </ListItem>
+              <ListItem>
+                Deleting the only existing version of a decision definition
+                could result in process incidents.
+              </ListItem>
+              <ListItem>
+                In case the DRD contains decisions which are part of multiple
+                DRDs, these decision definitions and their DRDs will not be
+                deleted.
+              </ListItem>
+            </UnorderedList>
+            <Link
+              href="https://docs.camunda.io/docs/components/operate/operate-introduction/"
+              target="_blank"
+            >
+              Read more about deleting a decision definition
+            </Link>
+          </Stack>
+        }
         bodyContent={
           <DetailTable
             headerColumns={[

client/src/modules/components/Carbon/DeleteDefinitionModal/Warning/styled.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a proprietary license.
+ * See the License.txt file for more information. You may not use this file
+ * except in compliance with the proprietary license.
+ */
+
+import styled from 'styled-components';
+import {bodyShort01} from '@carbon/elements';
+import {UnorderedList as BaseUnorderedList} from '@carbon/react';
+
+const UnorderedList = styled(BaseUnorderedList)`
+  ${bodyShort01};
+`;
+
+export {UnorderedList};

client/src/modules/components/Carbon/DeleteDefinitionModal/index.tsx

@@ -5,15 +5,16 @@
  * except in compliance with the proprietary license.
  */
 
-import {Modal, Stack} from '@carbon/react';
-import {Description} from './styled';
+import {Modal, Stack, ActionableNotification} from '@carbon/react';
+import {Description, WarningContainer} from './styled';
 
 type Props = {
   isVisible: boolean;
   title: string;
   description: string;
   bodyContent: React.ReactNode;
   confirmationText: string;
+  warningTitle?: string; //TODO: make mandatory after https://github.com/camunda/operate/issues/4020
   warningContent?: React.ReactNode; //TODO: make mandatory after https://github.com/camunda/operate/issues/4020
   onClose: () => void;
   onDelete: () => void;
@@ -24,6 +25,8 @@ const DeleteDefinitionModal: React.FC<Props> = ({
   title,
   description,
   bodyContent,
+  warningTitle,
+  warningContent,
   onClose,
   onDelete,
 }) => {
@@ -42,6 +45,17 @@ const DeleteDefinitionModal: React.FC<Props> = ({
       <Stack gap={6}>
         <Description>{description}</Description>
         {bodyContent}
+        {warningContent && (
+          <ActionableNotification
+            kind="warning"
+            inline
+            hideCloseButton
+            lowContrast
+            title={warningTitle}
+            children={<WarningContainer>{warningContent}</WarningContainer>}
+            actionButtonLabel=""
+          />
+        )}
       </Stack>
     </Modal>
   );

client/src/modules/components/Carbon/DeleteDefinitionModal/styled.tsx

@@ -11,4 +11,8 @@ const Description = styled.p`
   margin: 0;
 `;
 
-export {Description};
+const WarningContainer = styled.section`
+  margin-top: var(--cds-spacing-06);
+`;
+
+export {Description, WarningContainer};

client/src/modules/types/carbon.d.ts

@@ -95,6 +95,32 @@ declare module '@carbon/react' {
   }>;
 
   export const useTheme: any;
+  export const ActionableNotification: React.FunctionComponent<{
+    actionButtonLabel: string;
+    ['aria-label']?: string;
+    children?: node;
+    className?: string;
+    closeOnEscape?: boolean;
+    hasFocus?: boolean;
+    hideCloseButton?: boolean;
+    inline?: boolean;
+    kind:
+      | 'error'
+      | 'info'
+      | 'info-square'
+      | 'success'
+      | 'warning'
+      | 'warning-alt';
+
+    lowContrast?: boolean;
+    onActionButtonClick?: func;
+    onClose?: func;
+    onCloseButtonClick?: func;
+    role?: string;
+    statusIconDescription?: string;
+    subtitle?: string;
+    title?: string;
+  }>;
   export * from 'carbon-components-react';
 }