HPCC-26770 ListConfirm react component

Signed-off-by: Jeremy Clements <jeremy.clements@lexisnexisrisk.com>

esp/src/src-react/components/DFUWorkunits.tsx

@@ -115,7 +115,8 @@ export const DFUWorkunits: React.FunctionComponent<DFUWorkunitsProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedWorkunits + "\n\n" + selection.map(s => s.Wuid).join("\n"),
+        message: nlsHPCC.DeleteSelectedWorkunits,
+        items: selection.map(s => s.Wuid),
         onSubmit: React.useCallback(() => {
             FileSpray.DFUWorkunitsAction(selection, nlsHPCC.Delete).then(() => refreshTable(true));
         }, [refreshTable, selection])

esp/src/src-react/components/Files.tsx

@@ -73,7 +73,6 @@ export const Files: React.FunctionComponent<FilesProps> = ({
     const [showAddToSuperfile, setShowAddToSuperfile] = React.useState(false);
     const [showDesprayFile, setShowDesprayFile] = React.useState(false);
     const [mine, setMine] = React.useState(false);
-    const [selectedFileList, setSelectedFileList] = React.useState("");
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
 
     //  Grid ---
@@ -167,7 +166,8 @@ export const Files: React.FunctionComponent<FilesProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedFiles + "\n\n" + selectedFileList,
+        message: nlsHPCC.DeleteSelectedFiles,
+        items: selection.map(s => s.Name),
         onSubmit: React.useCallback(() => {
             WsDfu.DFUArrayAction(selection, "Delete").then(() => refreshTable(true));
         }, [refreshTable, selection])
@@ -247,7 +247,6 @@ export const Files: React.FunctionComponent<FilesProps> = ({
             state.hasSelection = true;
             //  TODO:  More State
         }
-        setSelectedFileList(selection.map(s => s.Name).join("\n"));
         setUIState(state);
     }, [selection]);
 

esp/src/src-react/components/Groups.tsx

@@ -54,7 +54,8 @@ export const Groups: React.FunctionComponent<GroupsProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedGroups + "\n" + selection.map(group => group.name).join("\n"),
+        message: nlsHPCC.DeleteSelectedGroups,
+        items: selection.map(group => group.name),
         onSubmit: React.useCallback(() => {
             const request = { ActionType: "delete" };
             selection.forEach((item, idx) => {

esp/src/src-react/components/LandingZone.tsx

@@ -162,7 +162,8 @@ export const LandingZone: React.FunctionComponent<LandingZoneProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedFiles + "\n" + selection.map(s => s.name).join("\n"),
+        message: nlsHPCC.DeleteSelectedFiles,
+        items: selection.map(s => s.name),
         onSubmit: React.useCallback(() => {
             selection.forEach((item, idx) => {
                 if (item._isUserFile) {

esp/src/src-react/components/Permissions.tsx

@@ -34,7 +34,6 @@ export const Permissions: React.FunctionComponent<PermissionsProps> = ({
     const [showAddPermission, setShowAddPermission] = React.useState(false);
     const [scopeScansEnabled, setScopeScansEnabled] = React.useState(false);
     const [modulesDn, setModulesDn] = React.useState("");
-    const [selectedFileList, setSelectedFileList] = React.useState("");
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
 
     //  Grid ---
@@ -88,7 +87,6 @@ export const Permissions: React.FunctionComponent<PermissionsProps> = ({
                 state.workunitScope = true;
             }
         }
-        setSelectedFileList(selection.map(file => file.name).join("\n"));
         setUIState(state);
     }, [selection]);
 
@@ -114,7 +112,8 @@ export const Permissions: React.FunctionComponent<PermissionsProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedPermissions + "\n\n" + selectedFileList,
+        message: nlsHPCC.DeleteSelectedPermissions,
+        items: selection.map(file => file.name),
         onSubmit: React.useCallback(() => {
             const deleteRequests = {};
             const requests = [];

esp/src/src-react/components/Queries.tsx

@@ -173,7 +173,8 @@ export const Queries: React.FunctionComponent<QueriesProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedWorkunits + "\n" + selection.map(s => s.Id).join("\n"),
+        message: nlsHPCC.DeleteSelectedWorkunits,
+        items: selection.map(s => s.Id),
         onSubmit: React.useCallback(() => {
             WsWorkunits.WUQuerysetQueryAction(selection, "Delete").then(() => refreshTable(true));
         }, [refreshTable, selection])

esp/src/src-react/components/SubFiles.tsx

@@ -30,7 +30,6 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
 }) => {
 
     const [file, , , refresh] = useFile(cluster, logicalFile);
-    const [selectedFileList, setSelectedFileList] = React.useState("");
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
 
     //  Grid ---
@@ -111,7 +110,8 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
 
     const [DeleteSubfilesConfirm, setShowDeleteSubfilesConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.RemoveSubfiles2 + "\n\n" + selectedFileList,
+        message: nlsHPCC.RemoveSubfiles2,
+        items: selection.map(item => item.Name),
         onSubmit: React.useCallback(() => {
             WsDfu.SuperfileAction("remove", file.Name, selection, false).then(() => refresh());
         }, [file, refresh, selection])
@@ -162,7 +162,6 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
         for (let i = 0; i < selection.length; i++) {
             state.hasSelection = true;
         }
-        setSelectedFileList(selection.map(s => s.Name).join("\n"));
         setUIState(state);
     }, [selection]);
 

esp/src/src-react/components/Users.tsx

@@ -71,7 +71,8 @@ export const Users: React.FunctionComponent<UsersProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedUsers + "\n" + selection.map(user => user.username).join("\n"),
+        message: nlsHPCC.DeleteSelectedUsers,
+        items: selection.map(user => user.username),
         onSubmit: React.useCallback(() => {
             const request = {
                 ActionType: "delete"

esp/src/src-react/components/Workunits.tsx

@@ -127,7 +127,8 @@ export const Workunits: React.FunctionComponent<WorkunitsProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedWorkunits + "\n" + selection.map(s => s.Wuid).join("\n"),
+        message: nlsHPCC.DeleteSelectedWorkunits,
+        items: selection.map(s => s.Wuid),
         onSubmit: React.useCallback(() => {
             WsWorkunits.WUAction(selection, "Delete").then(() => refreshTable(true));
         }, [refreshTable, selection])

esp/src/src-react/components/XrefFoundFiles.tsx

@@ -76,7 +76,8 @@ export const XrefFoundFiles: React.FunctionComponent<XrefFoundFilesProps> = ({
 
     const [AttachConfirm, setShowAttachConfirm] = useConfirm({
         title: nlsHPCC.Attach,
-        message: nlsHPCC.AddTheseFilesToDali + "\n" + selection.map(file => file.name).join("\n"),
+        message: nlsHPCC.AddTheseFilesToDali,
+        items: selection.map(file => file.name),
         onSubmit: React.useCallback(() => {
             WsDFUXref.DFUXRefArrayAction(selection, nlsHPCC.Attach, name, "Found")
                 .then(response => {
@@ -89,7 +90,8 @@ export const XrefFoundFiles: React.FunctionComponent<XrefFoundFilesProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedFiles + "\n" + selection.map(file => file.name),
+        message: nlsHPCC.DeleteSelectedFiles,
+        items: selection.map(file => file.name),
         onSubmit: React.useCallback(() => {
             WsDFUXref.DFUXRefArrayAction(selection, nlsHPCC.Delete, name, "Found")
                 .then(response => {

esp/src/src-react/components/XrefLostFiles.tsx

@@ -82,7 +82,8 @@ export const XrefLostFiles: React.FunctionComponent<XrefLostFilesProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedFiles + "\n" + selection.map(file => file.name),
+        message: nlsHPCC.DeleteSelectedFiles,
+        items: selection.map(file => file.name),
         onSubmit: React.useCallback(() => {
             WsDFUXref.DFUXRefArrayAction(selection, "DeleteLogical", name, "Lost")
                 .then(response => {

esp/src/src-react/components/XrefOrphanFiles.tsx

@@ -78,7 +78,8 @@ export const XrefOrphanFiles: React.FunctionComponent<XrefOrphanFilesProps> = ({
 
     const [DeleteConfirm, setShowDeleteConfirm] = useConfirm({
         title: nlsHPCC.Delete,
-        message: nlsHPCC.DeleteSelectedFiles + "\n" + selection.map(file => file.name).join("\n"),
+        message: nlsHPCC.DeleteSelectedFiles,
+        items: selection.map(file => file.name),
         onSubmit: React.useCallback(() => {
             WsDFUXref.DFUXRefArrayAction(selection, nlsHPCC.Delete, name, "Orphan")
                 .then(response => {

esp/src/src-react/hooks/confirm.tsx

@@ -5,10 +5,11 @@ import nlsHPCC from "src/nlsHPCC";
 interface useConfirmProps {
     title: string;
     message: string;
+    items?: string[];
     onSubmit: () => void;
 }
 
-export function useConfirm({ title, message, onSubmit }: useConfirmProps): [React.FunctionComponent, (_: boolean) => void] {
+export function useConfirm({ title, message, items = [], onSubmit }: useConfirmProps): [React.FunctionComponent, (_: boolean) => void] {
 
     const [show, setShow] = React.useState(false);
 
@@ -22,8 +23,9 @@ export function useConfirm({ title, message, onSubmit }: useConfirmProps): [Reac
             maxWidth={500}
         >
             <div>
-                {message.split("\n").map((str, idx) => {
-                    return <span key={idx}>{str} <br /></span>;
+                <p>{message}</p>
+                {items.map((item, idx) => {
+                    return <span key={idx}>{item} <br /></span>;
                 })}
             </div>
             <DialogFooter>
@@ -38,7 +40,7 @@ export function useConfirm({ title, message, onSubmit }: useConfirmProps): [Reac
                 <DefaultButton text={nlsHPCC.Cancel} onClick={() => setShow(false)} />
             </DialogFooter>
         </Dialog>;
-    }, [show, setShow, title, message, onSubmit]);
+    }, [items, message, onSubmit, setShow, show, title]);
 
     return [Confirm, setShow];