[Cases] Update UI to use the new connector's API

x-pack/plugins/cases/common/api/connectors/index.ts

@@ -120,7 +120,7 @@ export const GetCaseConnectorsResponseRt = rt.record(
   rt.string,
   rt.intersection([
     rt.type({ needsToBePushed: rt.boolean, hasBeenPushed: rt.boolean }),
-    rt.partial(rt.type({ latestPushDate: rt.string }).props),
+    rt.partial(rt.type({ latestPushDate: rt.string, oldestPushDate: rt.string }).props),
     CaseConnectorRt,
   ])
 );

x-pack/plugins/cases/common/api/helpers.ts

@@ -16,6 +16,7 @@ import {
   CASE_ALERTS_URL,
   CASE_COMMENT_DELETE_URL,
   CASE_FIND_USER_ACTIONS_URL,
+  INTERNAL_CONNECTORS_URL,
 } from '../constants';
 
 export const getCaseDetailsUrl = (id: string): string => {
@@ -57,3 +58,7 @@ export const getCaseConfigurationDetailsUrl = (configureID: string): string => {
 export const getCasesFromAlertsUrl = (alertId: string): string => {
   return CASE_ALERTS_URL.replace('{alert_id}', alertId);
 };
+
+export const getCaseConnectorsUrl = (id: string): string => {
+  return INTERNAL_CONNECTORS_URL.replace('{case_id}', id);
+};

x-pack/plugins/cases/common/ui/types.ts

@@ -17,7 +17,6 @@ import type {
   CaseStatuses,
   User,
   ActionConnector,
-  CaseExternalServiceBasic,
   CaseUserActionResponse,
   SingleCaseMetricsResponse,
   CommentResponse,
@@ -29,6 +28,7 @@ import type {
   CaseSeverity,
   CommentResponseExternalReferenceType,
   CommentResponseTypePersistableState,
+  GetCaseConnectorsResponse,
 } from '../api';
 import type { PUSH_CASES_CAPABILITY } from '../constants';
 import type { SnakeToCamelCase } from '../types';
@@ -77,12 +77,12 @@ export type AlertComment = SnakeToCamelCase<CommentResponseAlertsType>;
 export type ExternalReferenceComment = SnakeToCamelCase<CommentResponseExternalReferenceType>;
 export type PersistableComment = SnakeToCamelCase<CommentResponseTypePersistableState>;
 export type CaseUserActions = SnakeToCamelCase<CaseUserActionResponse>;
-export type CaseExternalService = SnakeToCamelCase<CaseExternalServiceBasic>;
 export type Case = Omit<SnakeToCamelCase<CaseResponse>, 'comments'> & { comments: Comment[] };
 export type Cases = Omit<SnakeToCamelCase<CasesFindResponse>, 'cases'> & { cases: Case[] };
 export type CasesStatus = SnakeToCamelCase<CasesStatusResponse>;
 export type CasesMetrics = SnakeToCamelCase<CasesMetricsResponse>;
 export type CaseUpdateRequest = SnakeToCamelCase<CasePatchRequest>;
+export type CaseConnectors = GetCaseConnectorsResponse;
 
 export interface ResolvedCase {
   case: Case;

x-pack/plugins/cases/public/common/mock/connectors.ts

@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import type { ActionConnector, ActionTypeConnector } from '../../../common/api';
+import type {
+  ActionConnector,
+  ActionTypeConnector,
+  GetCaseConnectorsResponse,
+} from '../../../common/api';
 
 export const connectorsMock: ActionConnector[] = [
   {
     id: 'servicenow-1',
     actionTypeId: '.servicenow',
-    name: 'My Connector',
+    name: 'My SN connector',
     config: {
       apiUrl: 'https://instance1.service-now.com',
     },
@@ -21,7 +25,7 @@ export const connectorsMock: ActionConnector[] = [
   {
     id: 'resilient-2',
     actionTypeId: '.resilient',
-    name: 'My Connector 2',
+    name: 'My Resilient connector',
     config: {
       apiUrl: 'https://test/',
       orgId: '201',
@@ -52,7 +56,7 @@ export const connectorsMock: ActionConnector[] = [
   {
     id: 'servicenow-uses-table-api',
     actionTypeId: '.servicenow',
-    name: 'My Connector',
+    name: 'My deprecated SN connector',
     config: {
       apiUrl: 'https://instance1.service-now.com',
       usesTableApi: true,
@@ -118,3 +122,25 @@ export const actionTypesMock: ActionTypeConnector[] = [
     supportedFeatureIds: ['alerting', 'cases'],
   },
 ];
+
+export const getCaseConnectorsMockResponse = (
+  overrides: Record<string, Partial<GetCaseConnectorsResponse[string]>> = {}
+): GetCaseConnectorsResponse => {
+  return connectorsMock.reduce(
+    (acc, connector) => ({
+      ...acc,
+      [connector.id]: {
+        id: connector.id,
+        name: connector.name,
+        type: connector.actionTypeId,
+        fields: null,
+        needsToBePushed: false,
+        oldestPushDate: '2023-01-17T09:46:29.813Z',
+        latestPushDate: '2023-01-17T09:46:29.813Z',
+        hasBeenPushed: true,
+        ...overrides[connector.id],
+      },
+    }),
+    {}
+  );
+};

x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx

@@ -123,10 +123,6 @@ describe('CaseView actions', () => {
           {...defaultProps}
           currentExternalIncident={{
             ...basicPush,
-            firstPushIndex: 5,
-            lastPushIndex: 5,
-            commentsToUpdate: [],
-            hasDataToPush: false,
           }}
         />
       </TestProviders>

x-pack/plugins/cases/public/components/case_action_bar/actions.tsx

@@ -13,14 +13,13 @@ import { useDeleteCases } from '../../containers/use_delete_cases';
 import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
 import { PropertyActions } from '../property_actions';
 import type { Case } from '../../../common/ui/types';
-import type { CaseService } from '../../containers/use_get_case_user_actions';
 import { useAllCasesNavigation } from '../../common/navigation';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import { useCasesToast } from '../../common/use_cases_toast';
 
 interface CaseViewActions {
   caseData: Case;
-  currentExternalIncident: CaseService | null;
+  currentExternalIncident: Case['externalService'];
 }
 
 const ActionsComponent: React.FC<CaseViewActions> = ({ caseData, currentExternalIncident }) => {

x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx

@@ -29,8 +29,6 @@ const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
 const defaultUseGetCaseUserActions = {
   data: {
     caseUserActions: [...caseUserActions, getAlertUserAction()],
-    caseServices: {},
-    hasDataToPush: false,
     participants: [basicCase.createdBy],
   },
   isLoading: false,
@@ -70,21 +68,6 @@ describe('CaseActionBar', () => {
     expect(wrapper.find(`[data-test-subj="sync-alerts-switch"]`).exists()).toBeTruthy();
     expect(wrapper.find(`[data-test-subj="case-refresh"]`).exists()).toBeTruthy();
     expect(wrapper.find(`[data-test-subj="case-view-actions"]`).exists()).toBeTruthy();
-    // no loading bar
-    expect(wrapper.find(`[data-test-subj="case-view-action-bar-spinner"]`).exists()).toBeFalsy();
-  });
-
-  it('shows a loading bar when user actions are loaded', async () => {
-    useGetCaseUserActionsMock.mockReturnValue({
-      data: undefined,
-      isLoading: true,
-    });
-    const wrapper = mount(
-      <TestProviders>
-        <CaseActionBar {...defaultProps} />
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="case-view-action-bar-spinner"]`).exists()).toBeTruthy();
   });
 
   it('should show correct status', () => {

x-pack/plugins/cases/public/components/case_action_bar/index.tsx

@@ -15,13 +15,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIconTip,
-  EuiLoadingSpinner,
 } from '@elastic/eui';
 import type { Case } from '../../../common/ui/types';
 import type { CaseStatuses } from '../../../common/api';
 import * as i18n from '../case_view/translations';
 import { Actions } from './actions';
-import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
 import { StatusContextMenu } from './status_context_menu';
 import { SyncAlertsSwitch } from '../case_settings/sync_alerts_switch';
 import type { OnUpdateFields } from '../case_view/types';
@@ -68,19 +66,7 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
     [onUpdateField]
   );
 
-  const { data: userActionsData, isLoading: isLoadingUserActions } = useGetCaseUserActions(
-    caseData.id,
-    caseData.connector.id
-  );
-
-  const currentExternalIncident = useMemo(
-    () =>
-      userActionsData?.caseServices != null &&
-      userActionsData.caseServices[caseData.connector.id] != null
-        ? userActionsData.caseServices[caseData.connector.id]
-        : null,
-    [userActionsData?.caseServices, caseData.connector]
-  );
+  const currentExternalIncident = caseData.externalService ?? null;
 
   const onSyncAlertsChanged = useCallback(
     (syncAlerts: boolean) =>
@@ -93,92 +79,86 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
 
   return (
     <EuiFlexGroup gutterSize="l" justifyContent="flexEnd" data-test-subj="case-action-bar-wrapper">
-      {isLoadingUserActions ? (
+      <>
         <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner data-test-subj="case-view-action-bar-spinner" size="l" />
-        </EuiFlexItem>
-      ) : (
-        <>
-          <EuiFlexItem grow={false}>
-            <MyDescriptionList compressed>
-              <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-                <EuiFlexItem grow={false} data-test-subj="case-view-status">
-                  <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
+          <MyDescriptionList compressed>
+            <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+              <EuiFlexItem grow={false} data-test-subj="case-view-status">
+                <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>
+                  <StatusContextMenu
+                    currentStatus={caseData.status}
+                    disabled={!permissions.update}
+                    isLoading={isLoading}
+                    onStatusChanged={onStatusChanged}
+                  />
+                </EuiDescriptionListDescription>
+              </EuiFlexItem>
+              {!metricsFeatures.includes('lifespan') ? (
+                <EuiFlexItem grow={false}>
+                  <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    <StatusContextMenu
-                      currentStatus={caseData.status}
-                      disabled={!permissions.update}
-                      isLoading={isLoading}
-                      onStatusChanged={onStatusChanged}
+                    <FormattedRelativePreferenceDate
+                      data-test-subj={'case-action-bar-status-date'}
+                      value={date}
                     />
                   </EuiDescriptionListDescription>
                 </EuiFlexItem>
-                {!metricsFeatures.includes('lifespan') ? (
-                  <EuiFlexItem grow={false}>
-                    <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      <FormattedRelativePreferenceDate
-                        data-test-subj={'case-action-bar-status-date'}
-                        value={date}
-                      />
-                    </EuiDescriptionListDescription>
-                  </EuiFlexItem>
-                ) : null}
-              </EuiFlexGroup>
-            </MyDescriptionList>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiDescriptionList compressed>
-              <EuiFlexGroup
-                gutterSize="l"
-                alignItems="center"
-                responsive={false}
-                justifyContent="spaceBetween"
-              >
-                {permissions.update && isSyncAlertsEnabled && (
-                  <EuiFlexItem grow={false}>
-                    <EuiDescriptionListTitle>
-                      <EuiFlexGroup
-                        component="span"
-                        alignItems="center"
-                        gutterSize="xs"
-                        responsive={false}
-                      >
-                        <EuiFlexItem grow={false}>
-                          <span>{i18n.SYNC_ALERTS}</span>
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      <SyncAlertsSwitch
-                        disabled={isLoading}
-                        isSynced={caseData.settings.syncAlerts}
-                        onSwitchChange={onSyncAlertsChanged}
-                      />
-                    </EuiDescriptionListDescription>
-                  </EuiFlexItem>
-                )}
+              ) : null}
+            </EuiFlexGroup>
+          </MyDescriptionList>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiDescriptionList compressed>
+            <EuiFlexGroup
+              gutterSize="l"
+              alignItems="center"
+              responsive={false}
+              justifyContent="spaceBetween"
+            >
+              {permissions.update && isSyncAlertsEnabled && (
                 <EuiFlexItem grow={false}>
-                  <span>
-                    <EuiButtonEmpty
-                      data-test-subj="case-refresh"
-                      flush="left"
-                      iconType="refresh"
-                      onClick={refreshCaseViewPage}
+                  <EuiDescriptionListTitle>
+                    <EuiFlexGroup
+                      component="span"
+                      alignItems="center"
+                      gutterSize="xs"
+                      responsive={false}
                     >
-                      {i18n.CASE_REFRESH}
-                    </EuiButtonEmpty>
-                  </span>
+                      <EuiFlexItem grow={false}>
+                        <span>{i18n.SYNC_ALERTS}</span>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiDescriptionListTitle>
+                  <EuiDescriptionListDescription>
+                    <SyncAlertsSwitch
+                      disabled={isLoading}
+                      isSynced={caseData.settings.syncAlerts}
+                      onSwitchChange={onSyncAlertsChanged}
+                    />
+                  </EuiDescriptionListDescription>
                 </EuiFlexItem>
-                <Actions caseData={caseData} currentExternalIncident={currentExternalIncident} />
-              </EuiFlexGroup>
-            </EuiDescriptionList>
-          </EuiFlexItem>
-        </>
-      )}
+              )}
+              <EuiFlexItem grow={false}>
+                <span>
+                  <EuiButtonEmpty
+                    data-test-subj="case-refresh"
+                    flush="left"
+                    iconType="refresh"
+                    onClick={refreshCaseViewPage}
+                  >
+                    {i18n.CASE_REFRESH}
+                  </EuiButtonEmpty>
+                </span>
+              </EuiFlexItem>
+              <Actions caseData={caseData} currentExternalIncident={currentExternalIncident} />
+            </EuiFlexGroup>
+          </EuiDescriptionList>
+        </EuiFlexItem>
+      </>
     </EuiFlexGroup>
   );
 };