Merge pull request #221 from dbeaver/feat/dialog-error-icon

feat(plugin-data-viewer): CB-455 add error icon to error Dialog

webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx

@@ -17,6 +17,7 @@ export interface CommonDialogWrapperProps {
   title?: string;
   icon?: string;
   viewBox?: string;
+  error?: boolean;
   onReject?: () => void;
   className?: string;
   noBodyPadding?: boolean;
@@ -29,6 +30,7 @@ export const CommonDialogWrapper: React.FC<CommonDialogWrapperProps> = function
   title,
   icon,
   viewBox,
+  error,
   header,
   footer,
   noBodyPadding,
@@ -36,11 +38,14 @@ export const CommonDialogWrapper: React.FC<CommonDialogWrapperProps> = function
   onReject,
   children,
 }) {
+  if (!icon && error) {
+    icon = '/icons/error_icon.svg';
+  }
   return styled(useStyles(commonDialogStyle))(
     <dialog className={className}>
       <header>
         <header-title as="div">
-          {icon && <IconOrImage icon={icon} viewBox={viewBox} />}
+          {icon && <IconOrImage {...use({ error })} icon={icon} viewBox={viewBox} />}
           <h1>{title}</h1>
           {onReject && (
             <reject as="div">

webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts

@@ -49,6 +49,10 @@ export const commonDialogStyle = composes(
     padding: 18px 24px;
     padding-right: 0;
     margin-right: -8px;
+    &[|error] {
+      width: 40px;
+      height: 40px;
+    }
   }
   dialog-body {
     box-sizing: border-box;

webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx

@@ -63,6 +63,7 @@ export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observe
             )}
           </controls>
         )}
+        error
         onReject={props.rejectDialog}
       >
         {error.reason && <property as="div">{error.reason}</property>}

webapp/packages/plugin-data-viewer/src/TableViewer/ErrorDialog.tsx

@@ -40,6 +40,7 @@ const styles = css`
 
 export interface ErrorDialogPayload {
   message: string;
+  title: string;
   onShowDetails?: () => void;
 }
 
@@ -51,7 +52,7 @@ export const ErrorDialog: DialogComponent<ErrorDialogPayload> = observer(functio
 
   return styled(useStyles(styles))(
     <CommonDialogWrapper
-      title={translate('ui_data_saving_error')}
+      title={translate(payload.title)}
       footer={(
         <controls as="div">
           {payload.onShowDetails && (
@@ -64,6 +65,7 @@ export const ErrorDialog: DialogComponent<ErrorDialogPayload> = observer(functio
           <Button type="button" mod={['unelevated']} onClick={handleRetry}>{translate('ui_processing_retry')}</Button>
         </controls>
       )}
+      error
       onReject={rejectDialog}
     >
       <message as="div"><SanitizedHTML html={payload.message} /></message>

webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts

@@ -279,6 +279,7 @@ export class TableViewerModel {
           ErrorDialog,
           {
             message,
+            title: 'ui_data_saving_error',
             onShowDetails: hasDetails
               ? () => this.commonDialogService.open(ErrorDetailsDialog, exception)
               : undefined,