Snap Components — DevRev

Snap components enable adding custom UI components defined by snap-kit to the DevRev UI. These components can be used to display data or interact with the user. Snap components are defined in the snap-in manifest file. DevRev UI renders these components based on the defined configuration.

Each snap-component has the following properties:

surface : The surface where the snap component can be displayed.
snap_kit_action_name : The name of the action within the snap kit that is triggered when the snap component’s defined action is engaged.
snap_kit_body : The initial body content of the snap kit action that is rendered upon loading the snap component.
initializer : Refers to a function that can be invoked to set up the snap component. This is particularly useful when the component needs to be initialized with server data, depending on the context in which it is being deployed.

1 functions:
2  - name: upgrade_test_function_1
3    description: first function
4 
5 snap_kit_actions:
6   - name: show_test_cases
7     function: show_test_cases_or_runs
8 
9 snap_components:
10   - name: show_test_cases
11     display_name: Test Case Details
12     description: Test Case Details
13     surface: issue
14     snap_kit_action_name: show_test_cases
15     initializer: upgrade_test_function_1
16     snap_kit_body:
17       {
18         "snaps":[]
19       }

Format of context passed to snap-kit action

1 // The payload contains details and values of the snap-kit from which the action was invoked.
2 interface Payload {
3   action: {
4     block_id: string;
5     id: string;
6     timestamp: number;
7     type: string;
8     value: string;
9   };
10   action_id: string;
11   actor_id: string;
12   body: {
13     snaps: any[];
14   };
15   context: {
16  // id of the object where the snap component is invoked.
17     object_id: string;
18   };
19   dev_org: string;
20   parent_id: string;
21   request_id: string;
22 }
23 
24 interface Secrets {
25   actor_session_token: string;
26   service_account_token: string;
27 }
28 
29 interface Context {
30   dev_oid: string;
31   // Snap-kit action ID in DONv2 format.
32   source_id: string;
33   snap_in_id: string;
34   snap_in_version_id: string;
35   service_account_id: string;
36   secrets: Secrets;
37 }
38 
39 interface ExecutionMetadata {
40   request_id: string;
41   // function that is being invoked.
42   function_name: string;
43   // endpoint for DevRev that can be used to make API calls.
44   devrev_endpoint: string;
45 }
46 
47 interface InputData {
48   global_values: {
49     // contains the inputs that are defined in the snap-in.
50   };
51   event_sources: any;
52   resources: {
53     keyrings: any;
54     tags: any;
55   };
56 }
57 
58 // Event object passed to the snap-kit action.
59 interface Event {
60  // The payload of the event
61   payload: Payload;
62   context: Context;
63   execution_metadata: ExecutionMetadata;
64   input_data: InputData;
65 }

List of surfaces

Surface	Description
issue	Issue surface is used to display snap components in the issue view.
support	Support surface is used to display snap components in the Customer Portal.
comments_rte	Comments RTE surface is used to display snap components in the comments section of the timeline.
snap_in__configuration	Snap-in configuration surface is used to display snap components in the snap-in configuration view.
plug	Plug surface is used to display snap components in the plug widget.

1	functions:
2	- name: upgrade_test_function_1
3	description: first function
4
5	snap_kit_actions:
6	- name: show_test_cases
7	function: show_test_cases_or_runs
8
9	snap_components:
10	- name: show_test_cases
11	display_name: Test Case Details
12	description: Test Case Details
13	surface: issue
14	snap_kit_action_name: show_test_cases
15	initializer: upgrade_test_function_1
16	snap_kit_body:
17	{
18	"snaps":[]
19	}

1	// The payload contains details and values of the snap-kit from which the action was invoked.
2	interface Payload {
3	action: {
4	block_id: string;
5	id: string;
6	timestamp: number;
7	type: string;
8	value: string;
9	};
10	action_id: string;
11	actor_id: string;
12	body: {
13	snaps: any[];
14	};
15	context: {
16	// id of the object where the snap component is invoked.
17	object_id: string;
18	};
19	dev_org: string;
20	parent_id: string;
21	request_id: string;
22	}
23
24	interface Secrets {
25	actor_session_token: string;
26	service_account_token: string;
27	}
28
29	interface Context {
30	dev_oid: string;
31	// Snap-kit action ID in DONv2 format.
32	source_id: string;
33	snap_in_id: string;
34	snap_in_version_id: string;
35	service_account_id: string;
36	secrets: Secrets;
37	}
38
39	interface ExecutionMetadata {
40	request_id: string;
41	// function that is being invoked.
42	function_name: string;
43	// endpoint for DevRev that can be used to make API calls.
44	devrev_endpoint: string;
45	}
46
47	interface InputData {
48	global_values: {
49	// contains the inputs that are defined in the snap-in.
50	};
51	event_sources: any;
52	resources: {
53	keyrings: any;
54	tags: any;
55	};
56	}
57
58	// Event object passed to the snap-kit action.
59	interface Event {
60	// The payload of the event
61	payload: Payload;
62	context: Context;
63	execution_metadata: ExecutionMetadata;
64	input_data: InputData;
65	}