Improve page heading

Change buttons to icon only based on breakpoints

Allow card actions to wrap

apps/electron/preferences/src/styles.scss

@@ -191,6 +191,10 @@ pre {
   width: 75%;
 }
 
+.slds-panel.slds-size_full {
+  width: 75vw;
+}
+
 /**
  * Apply to a button to make it look like a link
  */
@@ -214,6 +218,126 @@ pre {
   }
 }
 
+.collapsible-button {
+  min-height: 2rem;
+
+  span:not(.slds-icon_container) {
+    display: none;
+  }
+
+  svg.slds-button__icon_left {
+    margin-right: 0;
+  }
+
+  &.collapsible-button-xs {
+    @media (max-width: 500px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 500px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.collapsible-button-sm {
+    @media (max-width: 800px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 800px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.collapsible-button-md {
+    @media (max-width: 830px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 830px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.collapsible-button-lg {
+    @media (max-width: 890px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 890px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.collapsible-button-xl {
+    @media (max-width: 1000px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 1000px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.collapsible-button-xxl {
+    @media (max-width: 1075px) {
+      width: 2rem;
+      padding-left: unset;
+      padding-right: unset;
+    }
+
+    @media (min-width: 1075px) {
+      span {
+        display: inline;
+      }
+
+      svg.slds-button__icon_left {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+}
+
 .modal-card-override {
   background: #fff;
   border: 1px solid #dddbda !important;

apps/jetstream/src/app/components/automation-control/AutomationControlEditor.tsx

@@ -252,12 +252,13 @@ export const AutomationControlEditor: FunctionComponent<AutomationControlEditorP
       <Toolbar>
         <ToolbarItemGroup>
           <Link
-            className="slds-button slds-button_brand"
+            className="slds-button slds-button_brand collapsible-button collapsible-button-md"
+            title="Go back"
             to=".."
             // onClick={handleGoBack}
           >
             <Icon type="utility" icon="back" className="slds-button__icon slds-button__icon_left" omitContainer />
-            Go Back
+            <span>Go Back</span>
           </Link>
           {/* Select all does not work well for flows/process builders since there is a version that needs to be selected */}
           {/* <button className="slds-button slds-button_neutral slds-m-left_small" onClick={handleSelectAll}>
@@ -271,20 +272,34 @@ export const AutomationControlEditor: FunctionComponent<AutomationControlEditorP
           <SearchInput id="quick-filter" placeholder="Filter items..." className="slds-m-left_small" onChange={setQuickFilterText} />
         </ToolbarItemGroup>
         <ToolbarItemActions>
-          <button className="slds-button slds-button_neutral" onClick={handleResetChanges} disabled={loading || !dirtyCount}>
+          <button
+            className="slds-button slds-button_neutral collapsible-button collapsible-button-xl"
+            onClick={handleResetChanges}
+            title="Reset changes"
+            disabled={loading || !dirtyCount}
+          >
             <Icon type="utility" icon="refresh" className="slds-button__icon slds-button__icon_left" />
-            Reset Changes
+            <span>Reset Changes</span>
           </button>
           <ButtonGroupContainer>
             <Tooltip content="Downloading as a metadata zip package will allow you to re-deploy the changes on the Deploy Metadata page.">
-              <button className="slds-button slds-button_neutral slds-button_first" disabled={loading} onClick={exportPackage}>
+              <button
+                className="slds-button slds-button_neutral slds-button_first collapsible-button collapsible-button-xl"
+                disabled={loading}
+                onClick={exportPackage}
+              >
                 <Icon type="utility" icon="archive" className="slds-button__icon slds-button__icon_left" />
-                Export as Zip
+                <span>Export as Zip</span>
               </button>
             </Tooltip>
-            <button className="slds-button slds-button_neutral" disabled={loading} onClick={exportSpreadsheet}>
+            <button
+              className="slds-button slds-button_neutral collapsible-button collapsible-button-md"
+              disabled={loading}
+              title="Export as Spreadsheet"
+              onClick={exportSpreadsheet}
+            >
               <Icon type="utility" icon="file" className="slds-button__icon slds-button__icon_left" />
-              Export as Spreadsheet
+              <span>Export as Spreadsheet</span>
             </button>
           </ButtonGroupContainer>
           <button className="slds-button slds-button_brand" disabled={loading || !dirtyCount} onClick={handleReviewChanges}>

apps/jetstream/src/app/components/create-object-and-fields/CreateFields.tsx

@@ -143,16 +143,24 @@ export const CreateFields: FunctionComponent<CreateFieldsProps> = () => {
             <Icon type="utility" icon="back" className="slds-button__icon slds-button__icon_left" omitContainer />
             Go Back
           </Link>
-          <button className="slds-button slds-button_neutral slds-m-right_x-small" onClick={() => handleStartOver()}>
+          <button
+            className="slds-button slds-button_neutral slds-m-right_x-small collapsible-button collapsible-button-lg"
+            onClick={() => handleStartOver()}
+            title="Start Over"
+          >
             <Icon type="utility" icon="refresh" className="slds-button__icon slds-button__icon_left" omitContainer />
-            Start Over
+            <span>Start Over</span>
           </button>
           <CreateFieldsImportExport selectedOrg={selectedOrg} rows={rows} onImportRows={importRows} />
         </ToolbarItemGroup>
         <ToolbarItemActions>
-          <button className="slds-button slds-button_neutral slds-m-right_x-small" onClick={() => handleReset()}>
+          <button
+            className="slds-button slds-button_neutral slds-m-right_x-small collapsible-button collapsible-button-sm"
+            onClick={() => handleReset()}
+            title="Reset fields"
+          >
             <Icon type="utility" icon="refresh" className="slds-button__icon slds-button__icon_left" omitContainer />
-            Reset Fields
+            <span>Reset Fields</span>
           </button>
           <Tooltip content={allValid ? '' : 'All fields must be fully configured'}>
             <button className="slds-button slds-button_brand" onClick={() => handleSubmit()} disabled={!allValid}>

apps/jetstream/src/app/components/create-object-and-fields/CreateFieldsImportExport.tsx

@@ -126,9 +126,12 @@ export const CreateFieldsImportExport: FunctionComponent<CreateFieldsImportExpor
         />
       )}
       <ButtonGroupContainer>
-        <button className="slds-button slds-button_neutral slds-button_first" onClick={() => handleExport()}>
+        <button
+          className="slds-button slds-button_neutral slds-button_first collapsible-button collapsible-button-lg"
+          onClick={() => handleExport()}
+        >
           <Icon type="utility" icon="download" className="slds-button__icon slds-button__icon_left" omitContainer />
-          Export Fields
+          <span>Export Fields</span>
         </button>
         <Popover
           ref={popoverRef}
@@ -152,11 +155,11 @@ export const CreateFieldsImportExport: FunctionComponent<CreateFieldsImportExpor
             </div>
           }
           buttonProps={{
-            className: 'slds-button slds-button_neutral slds-button_middle',
+            className: 'slds-button slds-button_neutral slds-button_middle collapsible-button collapsible-button-lg',
           }}
         >
           <Icon type="utility" icon="upload" className="slds-button__icon slds-button__icon_left" omitContainer />
-          Import Fields
+          <span>Import Fields</span>
         </Popover>
         <DropDown
           className="slds-button_last"

apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTrace.tsx

@@ -72,9 +72,10 @@ export const DebugLogViewerTrace: FunctionComponent<DebugLogViewerTraceProps> =
           }
           buttonProps={{
             className: 'slds-button slds-button_neutral',
+            title: 'Log Level',
           }}
         >
-          {activeDebugLevel ? `Active Log Level - ${activeDebugLevel?.DeveloperName}` : 'Loading log levels'}
+          {activeDebugLevel ? `${activeDebugLevel?.DeveloperName}` : 'Loading log levels'}
         </Popover>
       </div>
     </Grid>

apps/jetstream/src/app/components/deploy/DeployMetadataDeployment.tsx

@@ -276,19 +276,24 @@ export const DeployMetadataDeployment: FunctionComponent<DeployMetadataDeploymen
           </Link>
         </ToolbarItemGroup>
         <ToolbarItemActions>
-          <DeployMetadataHistoryModal />
+          <DeployMetadataHistoryModal className="collapsible-button collapsible-button-xxl" />
           <ButtonGroupContainer>
-            <DeployMetadataPackage selectedOrg={selectedOrg} />
+            <DeployMetadataPackage className="collapsible-button collapsible-button-xl" selectedOrg={selectedOrg} />
             <button
               title="Download a metadata package as a zip file so that you can view or modify the components locally and re-deploy to any org. You can also use this to keep a backup of the current state of the components."
-              className="slds-button slds-button_neutral"
+              className="slds-button slds-button_neutral collapsible-button collapsible-button-xl"
               onClick={() => handleDownloadActive('package')}
               disabled={loading || selectedRows.size === 0}
             >
               <Icon type="utility" icon="download" className="slds-button__icon slds-button__icon_left" omitContainer />
-              Download Metadata
+              <span>Download Metadata</span>
             </button>
-            <AddToChangeset selectedOrg={selectedOrg} loading={loading} selectedRows={selectedRows} />
+            <AddToChangeset
+              className="collapsible-button collapsible-button-sm"
+              selectedOrg={selectedOrg}
+              loading={loading}
+              selectedRows={selectedRows}
+            />
             <DeployMetadataToOrg selectedOrg={selectedOrg} loading={loading} selectedRows={selectedRows} />
             <DropDown
               position="right"

apps/jetstream/src/app/components/deploy/DeployMetadataSelection.tsx

@@ -54,10 +54,10 @@ export const DeployMetadataSelection: FunctionComponent<DeployMetadataSelectionP
             docsPath="/deploy-metadata"
           />
           <PageHeaderActions colType="actions" buttonType="separate">
-            <DeployMetadataHistoryModal />
+            <DeployMetadataHistoryModal className="collapsible-button collapsible-button-xl" />
             <ButtonGroupContainer>
-              <DownloadMetadataPackage selectedOrg={selectedOrg} />
-              <DeployMetadataPackage selectedOrg={selectedOrg} />
+              <DownloadMetadataPackage className="collapsible-button collapsible-button-xl" selectedOrg={selectedOrg} />
+              <DeployMetadataPackage className="collapsible-button collapsible-button-sm" selectedOrg={selectedOrg} />
             </ButtonGroupContainer>
             {hasSelectionsMade && (
               <Link onClick={trackContinue} className="slds-button slds-button_brand" to="deploy">

apps/jetstream/src/app/components/deploy/add-to-changeset/AddToChangeset.tsx

@@ -1,6 +1,7 @@
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { ChangeSet, DeployResult, ListMetadataResult, MapOf, SalesforceOrgUi } from '@jetstream/types';
 import { FileDownloadModal, Icon } from '@jetstream/ui';
+import classNames from 'classnames';
 import { Fragment, FunctionComponent, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { applicationCookieState } from '../../../app-state';
@@ -13,12 +14,13 @@ import AddToChangesetConfigModal from './AddToChangesetConfigModal';
 import AddToChangesetStatusModal from './AddToChangesetStatusModal';
 
 export interface AddToChangesetProps {
+  className?: string;
   selectedOrg: SalesforceOrgUi;
   loading: boolean;
   selectedRows: Set<DeployMetadataTableRow>;
 }
 
-export const AddToChangeset: FunctionComponent<AddToChangesetProps> = ({ selectedOrg, loading, selectedRows }) => {
+export const AddToChangeset: FunctionComponent<AddToChangesetProps> = ({ className, selectedOrg, loading, selectedRows }) => {
   const { trackEvent } = useAmplitude();
   const [{ google_apiKey, google_appId, google_clientId }] = useRecoilState(applicationCookieState);
   const [configModalOpen, setConfigModalOpen] = useState(false);
@@ -65,13 +67,13 @@ export const AddToChangeset: FunctionComponent<AddToChangesetProps> = ({ selecte
   return (
     <Fragment>
       <button
-        className="slds-button slds-button_neutral"
+        className={classNames('slds-button slds-button_neutral', className)}
         disabled={loading || selectedRows.size === 0}
         onClick={handleClick}
         title="You can deploy the selected components to an existing outbound changeset."
       >
         <Icon type="utility" icon="upload" className="slds-button__icon slds-button__icon_left" omitContainer />
-        Add To Outbound Changeset
+        <span>Add To Outbound Changeset</span>
       </button>
       {/* MODALS */}
       {configModalOpen && (

apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryModal.tsx

@@ -4,7 +4,8 @@ import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { useRollbar } from '@jetstream/shared/ui-utils';
 import { MapOf, SalesforceDeployHistoryItem, SalesforceOrgUi } from '@jetstream/types';
 import { EmptyState, FileDownloadModal, Icon, Modal, OpenRoadIllustration, ScopedNotification, Spinner } from '@jetstream/ui';
-import { Fragment, FunctionComponent, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import * as fromAppState from '../../../app-state';
 import { useAmplitude } from '../../core/analytics';
@@ -15,7 +16,11 @@ import { getDeployResultsExcelData, getHistory, getHistoryItemFile } from '../ut
 import DeployMetadataHistoryTable from './DeployMetadataHistoryTable';
 import DeployMetadataHistoryViewResults from './DeployMetadataHistoryViewResults';
 
-export const DeployMetadataHistoryModal: FunctionComponent = () => {
+interface DeployMetadataHistoryModalProps {
+  className?: string;
+}
+
+export const DeployMetadataHistoryModal = ({ className }: DeployMetadataHistoryModalProps) => {
   const { trackEvent } = useAmplitude();
   const rollbar = useRollbar();
   const modalRef = useRef();
@@ -144,13 +149,13 @@ export const DeployMetadataHistoryModal: FunctionComponent = () => {
   return (
     <Fragment>
       <button
-        className="slds-button slds-button_neutral"
+        className={classNames('slds-button slds-button_neutral', className)}
         aria-haspopup="true"
         title="View deployment history"
         onClick={() => handleToggleOpen(true)}
       >
         <Icon type="utility" icon="date_time" className="slds-button__icon slds-button__icon_left" omitContainer />
-        History
+        <span>History</span>
       </button>
       {downloadPackageModalState.open && (
         <FileDownloadModal