Merge pull request #1104 from cdapio/newux/confirmdialog

Add new component for confirmation dialog

app/cdap/components/shared/ConfirmDialog/index.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright © 2023 Cask Data, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import React, { ReactElement, ReactNode, useState } from 'react';
+import isObject from 'lodash/isObject';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+
+import IconButton from '@material-ui/core/IconButton';
+import { StyledBox, StyledDialog, StyledAlert } from './styles';
+import PrimaryTextButton from 'components/shared/Buttons/PrimaryTextButton';
+
+interface IConfirmDialogProps {
+  headerTitle: string | ReactNode;
+  isOpen: boolean;
+  cancelButtonText: string | ReactNode;
+  cancelFn: (arg0: any) => void;
+  confirmButtonText: string | ReactNode;
+  confirmFn: (arg0: any) => void;
+  confirmationElem?: string | ReactNode | ReactElement;
+  confirmationText?: string | ReactNode;
+  severity?: 'success' | 'info' | 'warning' | 'error';
+  statusMessage?: string | ReactNode;
+  extendedMessage?: { response: string };
+  disableAction?: boolean;
+}
+
+export const ConfirmDialog = ({
+  headerTitle,
+  isOpen,
+  cancelButtonText,
+  cancelFn,
+  confirmButtonText,
+  confirmFn,
+  confirmationElem,
+  confirmationText,
+  severity,
+  statusMessage,
+  extendedMessage,
+  disableAction,
+}: IConfirmDialogProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const showStatusMessage = () => {
+    if (statusMessage) {
+      return (
+        <StyledAlert severity={severity}>
+          {statusMessage}
+          {getExtendedMessage()}
+        </StyledAlert>
+      );
+    }
+  };
+
+  const handleToggleExtendedMessage = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const getExtendedMessage = () => {
+    if (extendedMessage) {
+      return (
+        <>
+          <IconButton
+            size="small"
+            onClick={handleToggleExtendedMessage}
+            color="inherit"
+            title={isExpanded ? 'Hide details' : 'Show details'}
+          >
+            {isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+          {isExpanded && (
+            <StyledBox>
+              {isObject(extendedMessage) ? (
+                <pre>{extendedMessage.response}</pre>
+              ) : (
+                <pre>{extendedMessage}</pre>
+              )}
+            </StyledBox>
+          )}
+        </>
+      );
+    }
+  };
+
+  return (
+    <StyledDialog open={isOpen} fullWidth>
+      <DialogTitle>{headerTitle}</DialogTitle>
+      {showStatusMessage()}
+      <DialogContent>
+        {confirmationText}
+        {confirmationElem}
+      </DialogContent>
+      <DialogActions>
+        <PrimaryTextButton onClick={cancelFn} data-testid={cancelButtonText}>
+          {cancelButtonText}
+        </PrimaryTextButton>
+        <PrimaryTextButton
+          onClick={confirmFn}
+          disabled={disableAction}
+          data-testid={confirmButtonText}
+        >
+          {confirmButtonText}
+        </PrimaryTextButton>
+      </DialogActions>
+    </StyledDialog>
+  );
+};

app/cdap/components/shared/ConfirmDialog/styles.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright © 2023 Cask Data, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import styled from 'styled-components';
+import Dialog from '@material-ui/core/Dialog';
+import Alert from '@material-ui/lab/Alert';
+import Box from '@material-ui/core/Box';
+
+export const StyledDialog = styled(Dialog)`
+  & .MuiDialogActions-root {
+    margin-right: 16px;
+    & .MuiButton-label {
+      font-size: 13px;
+    }
+  }
+`;
+
+export const StyledAlert = styled(Alert)`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+
+export const StyledBox = styled(Box)`
+  overflow-y: auto;
+  max-height: 14vh;
+  word-break: break-all;
+
+  & pre {
+    word-break: break-word;
+    margin-bottom: 0;
+    white-space: pre-wrap;
+    color: inherit;
+    border: 0;
+    border-radius: 0;
+    padding: 0px 8px;
+  }
+`;

app/cdap/text/text-en.yaml

@@ -79,6 +79,7 @@ commons:
       singular: Workflow
   export: Export
   formatLabel: Format
+  hideDetails: Hide details
   hydrator: Cask Hydrator
   keyValPairs:
     keyLabel: Key
@@ -100,6 +101,7 @@ commons:
   secondsShortLabel: secs
   secShortLabel: sec
   showAll: Show all pipelines
+  showDetails: Show details
   showFailed: Show failed only
   status: Status
   then: Then