AWS Integration skeleton UI (#6758)

* feat: add AWS integration in the integrations list and redirect to the new Cloud Integration page

* feat: cloud integration details page header (i.e. breadcrumb and get help button) UI

* feat: hero section UI

* refactor: extract Header and HeroSection components from CloudIntegrationPage

* feat: services tab bar and sidebar UI

* feat: cloud integration details services UI

* refactor: group and extract cloud integration components to files

* fix: set default active service to the first service in the list if no service is specified

* feat: add NEW flag for AWS integration in the integrations list page

* chore: overall improvements

* chore: move cloud integration pages to /container

* fix: hero section background

* AWS Integration: Account setup basic UI and functionality (#6806)

* feat: implement basic cloud account management UI in HeroSection

* AWS Integration: Integrate now modal (#6807)

* feat: implement basic cloud account management UI in HeroSection

* feat: start working on integrate now modal UI

* feat: integrate now modal UI

* feat: integrate now modal states and json server API integration

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* feat: display error state if last_heartbeat_ts_ms is null even after 5 minutes

* chore: update import path for regions data in useRegionSelection hook

* chore: move hero section components inside the HeroSection/components

* feat: create a reusable modal component

* refactor: make the cloud account setup modal readable / DRYer

* AWS Integration: Account settings modal (#6808)

* feat: implement basic cloud account management UI in HeroSection

* feat: start working on integrate now modal UI

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* feat: integrate now modal UI

* feat: integrate now modal states and json server API integration

* feat: account settings

* feat: service status UI

* refactor: make account settings modal more readable and overall improvements

* feat: Get data from json server api data in service sections (#6809)

* feat: implement basic cloud account management UI in HeroSection

* feat: start working on integrate now modal UI

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* refactor: make the cloud account setup modal readable / DRYer

* feat: integrate now modal states and json server API integration

* refactor: make account settings modal more readable and overall improvements

* feat: integrate now modal states and json server API integration

* feat: display error state if last_heartbeat_ts_ms is null even after 5 minutes

* feat: get the services list and details from json server API response

* feat: update account actions to set accountId in URL query on initial account load

* feat: configure service modal (#6814)

* feat: implement basic cloud account management UI in HeroSection

* feat: start working on integrate now modal UI

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* refactor: make the cloud account setup modal readable / DRYer

* feat: integrate now modal states and json server API integration

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* feat: integrate now modal states and json server API integration

* feat: get accounts from json-server API, and redirect Add new account to the integrations modal

* feat: display error state if last_heartbeat_ts_ms is null even after 5 minutes

* feat: account settings

* feat: service status UI

* feat: get the services list and details from json server API response

* feat: update account actions to set accountId in URL query on initial account load

* feat: configure service modal UI

* feat: configure service modal functionality and API changes

* feat: replace loading indicators with Spinner component in ServiceDetails and ServicesList

* fix: make the configure service modal work

* Light mode support and overall improvements to AWS integration page (#6817)

* refactor: make the cloud account setup modal readable / DRYer

* feat: integrate now modal states and json server API integration

* refactor: make account settings modal more readable and overall improvements

* fix: integrate now modal button improvements

* feat: aws integrations light mode

* refactor: overall improvements

* refactor: define react query keys in constant

* feat: services filter

* feat: render service overview as markdown

* feat: integrate AWS integration page API (#6851)

* feat: replace json-server APIs with actual APIs

* fix: add null checks and fix the issues

Author: ahmadshaheer

frontend/package.json

@@ -107,6 +107,7 @@
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
+		"react-lottie": "1.2.10",
 		"react-markdown": "8.0.7",
 		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
@@ -178,6 +179,7 @@
 		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-helmet-async": "1.0.3",
+		"@types/react-lottie": "1.2.10",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
@@ -218,6 +220,7 @@
 		"portfinder-sync": "^0.0.2",
 		"postcss": "8.4.38",
 		"prettier": "2.2.1",
+		"prop-types": "15.8.1",
 		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",
 		"react-hot-loader": "^4.13.0",

frontend/public/Icons/solid-check-circle.svg

@@ -0,0 +1,77 @@
+import axios from 'api';
+import {
+	CloudAccount,
+	Service,
+	ServiceData,
+	UpdateServiceConfigPayload,
+	UpdateServiceConfigResponse,
+} from 'container/CloudIntegrationPage/ServicesSection/types';
+import {
+	AccountConfigPayload,
+	AccountConfigResponse,
+	ConnectionUrlResponse,
+} from 'types/api/integrations/aws';
+
+export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
+	const response = await axios.get('/cloud-integrations/aws/accounts');
+
+	return response.data.data;
+};
+
+export const getAwsServices = async (
+	accountId?: string,
+): Promise<Service[]> => {
+	const params = accountId ? { account_id: accountId } : undefined;
+	const response = await axios.get('/cloud-integrations/aws/services', {
+		params,
+	});
+
+	return response.data.data.services;
+};
+
+export const getServiceDetails = async (
+	serviceId: string,
+	accountId?: string,
+): Promise<ServiceData> => {
+	const params = accountId ? { account_id: accountId } : undefined;
+	const response = await axios.get(
+		`/cloud-integrations/aws/services/${serviceId}`,
+		{ params },
+	);
+	return response.data.data;
+};
+
+export const generateConnectionUrl = async (params: {
+	agent_config: { region: string };
+	account_config: { regions: string[] };
+	account_id?: string;
+}): Promise<ConnectionUrlResponse> => {
+	const response = await axios.post(
+		'/cloud-integrations/aws/accounts/generate-connection-url',
+		params,
+	);
+	return response.data.data;
+};
+
+export const updateAccountConfig = async (
+	accountId: string,
+	payload: AccountConfigPayload,
+): Promise<AccountConfigResponse> => {
+	const response = await axios.post<AccountConfigResponse>(
+		`/cloud-integrations/aws/accounts/${accountId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const updateServiceConfig = async (
+	serviceId: string,
+	payload: UpdateServiceConfigPayload,
+): Promise<UpdateServiceConfigResponse> => {
+	const response = await axios.post<UpdateServiceConfigResponse>(
+		`/cloud-integrations/aws/services/${serviceId}/config`,
+		payload,
+	);
+	console.log({ serviceId });
+	return response.data;
+};