various quick updates to UI for setup experience feature (#23226)

frontend/components/TableContainer/DataTable/SoftwareNameCell/_styles.scss

@@ -12,6 +12,11 @@
     height: 24px;
   }
 
+  .software-name {
+    @include ellipse-text();
+    max-width: 250px;
+  }
+
   &__install-icon {
     // TODO: we do not want to use !important but have to for now. This is
     // the same issue as the .software-name-cell class display value.

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/InstallSoftware.tsx

@@ -5,7 +5,7 @@ import { AxiosError } from "axios";
 import mdmAPI, {
   IGetSetupExperienceSoftwareResponse,
 } from "services/entities/mdm";
-import { ISoftwareTitle } from "interfaces/software";
+import software, { ISoftwareTitle } from "interfaces/software";
 import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 
 import SectionHeader from "components/SectionHeader";

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/components/InstallSoftwarePreview/InstallSoftwarePreview.tsx

@@ -11,13 +11,13 @@ const InstallSoftwarePreview = () => {
     <Card color="gray" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
       <p>
-        When the end user completes the macOS Setup Assistant, they will see
-        software being installed. User will not be able to continue until
-        software completes installation.
+        After the <b>Remote Management</b> screen, the end user will see
+        software being installed. They will not be able to continue until
+        software is installed.
       </p>
       <p>
-        If there are any installation errors, the end user will be able to
-        continue and will be instructed to contact their IT department.
+        If there are any errors, they will be able to continue and will be
+        instructed to contact their IT admin.
       </p>
       <img
         className={`${baseClass}__preview-img`}

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/components/SelectSoftwareTable/SelectSoftwareTable.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 
 import { ISoftwareTitle } from "interfaces/software";
 
 import TableContainer from "components/TableContainer";
 import EmptyTable from "components/EmptyTable";
+import TableCount from "components/TableContainer/TableCount";
 
 import generateTableConfig from "./SelectSoftwareTableConfig";
 
@@ -40,6 +41,14 @@ const SelectSoftwareTable = ({
     return generateSelectedRows(softwareTitles);
   }, [softwareTitles]);
 
+  const renderCount = useCallback(() => {
+    if (softwareTitles.length === 0) {
+      return <></>;
+    }
+
+    return <TableCount name="items" count={softwareTitles?.length} />;
+  }, [softwareTitles]);
+
   return (
     <TableContainer
       className={baseClass}
@@ -53,6 +62,7 @@ const SelectSoftwareTable = ({
           className={baseClass}
         />
       )}
+      renderCount={renderCount}
       defaultSelectedRows={initialSelectedSoftwareRows}
       showMarkAllPages
       isAllPagesSelected={false}

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/components/SelectSoftwareTable/_styles.scss

@@ -1,3 +1,7 @@
 .select-software-table {
 
+  .data-table.data-table__wrapper {
+    max-height: 343px;
+    overflow-y: auto;
+  }
 }

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupExperienceScript/components/SetupExperienceScriptPreview/SetupExperienceScriptPreview.tsx

@@ -11,13 +11,12 @@ const SetupExperienceScriptPreview = () => {
     <Card color="gray" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
       <p>
-        When the end user completes the macOS Setup Assistant, they will see
-        scripts being run. User will not be able to continue until scripts
-        complete.
+        After software is installed, the end user will see the script being run.
+        They will not be able to continue until the script runs.
       </p>
       <p>
-        If there are any errors, the end user will be able to continue and will
-        be instructed to contact their IT department.
+        If there are any errors, they will be able to continue and will be
+        instructed to contact their IT admin.
       </p>
       <img
         className={`${baseClass}__preview-img`}