diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.test.tsx index a79c298a6e9e9..dffe682bcc452 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.test.tsx @@ -35,7 +35,7 @@ describe('GlobalDataTagsTable', () => { ]; let renderer: TestRenderer; - const renderComponent = (tags: GlobalDataTag[]) => { + const renderComponent = (tags: GlobalDataTag[], options?: { isDisabled?: boolean }) => { mockUpdateAgentPolicy = jest.fn(); renderer = createFleetTestRendererMock(); @@ -53,6 +53,7 @@ describe('GlobalDataTagsTable', () => { ); }; @@ -287,4 +288,19 @@ describe('GlobalDataTagsTable', () => { ], }); }); + + it('should not allow to add tag when disabled and no tags exists', () => { + renderComponent([], { isDisabled: true }); + + const test = renderResult.getByTestId('globalDataTagAddFieldBtn'); + expect(test).toBeDisabled(); + }); + + it('should not allow to add/edit/remove tag when disabled and tags already exists', () => { + renderComponent(globalDataTags, { isDisabled: true }); + + expect(renderResult.getByTestId('globalDataTagAddAnotherFieldBtn')).toBeDisabled(); + expect(renderResult.getByTestId('globalDataTagDeleteField1Btn')).toBeDisabled(); + expect(renderResult.getByTestId('globalDataTagEditField1Btn')).toBeDisabled(); + }); }); diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx index 9f51b5c181459..228b666af38f3 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx @@ -34,6 +34,7 @@ import type { interface Props { updateAgentPolicy: (u: Partial) => void; globalDataTags: GlobalDataTag[]; + isDisabled?: boolean; } function parseValue(value: string | number): string | number { @@ -50,6 +51,7 @@ function parseValue(value: string | number): string | number { export const GlobalDataTagsTable: React.FunctionComponent = ({ updateAgentPolicy, globalDataTags, + isDisabled, }) => { const { overlays } = useStartServices(); const [editTags, setEditTags] = useState<{ [k: number]: GlobalDataTag }>({}); @@ -358,6 +360,8 @@ export const GlobalDataTagsTable: React.FunctionComponent = ({ aria-label="Edit" iconType="pencil" color="text" + data-test-subj={`globalDataTagEditField${index}Btn`} + isDisabled={isDisabled} onClick={() => handleStartEdit(index)} /> ); @@ -387,6 +391,8 @@ export const GlobalDataTagsTable: React.FunctionComponent = ({ aria-label="Delete" iconType="trash" color="text" + data-test-subj={`globalDataTagDeleteField${index}Btn`} + isDisabled={isDisabled} onClick={() => deleteTag(index)} /> ); @@ -408,6 +414,7 @@ export const GlobalDataTagsTable: React.FunctionComponent = ({ newTagErrors, deleteTag, handleStartEdit, + isDisabled, ] ); @@ -431,6 +438,8 @@ export const GlobalDataTagsTable: React.FunctionComponent = ({ iconType="plusInCircle" onClick={handleAddField} style={{ marginTop: '16px' }} + disabled={isDisabled} + data-test-subj="globalDataTagAddFieldBtn" > = ({ iconType="plusInCircle" onClick={handleAddField} style={{ marginTop: '16px' }} - isDisabled={isAdding} + isDisabled={isDisabled || isAdding} + data-test-subj="globalDataTagAddAnotherFieldBtn" > ; updateAgentPolicy: (u: Partial) => void; + isDisabled?: boolean; } export const CustomFields: React.FunctionComponent = ({ agentPolicy, updateAgentPolicy, + isDisabled, }) => { const isAgentPolicy = (policy: Partial): policy is AgentPolicy => { return (policy as AgentPolicy).package_policies !== undefined; @@ -103,6 +105,7 @@ export const CustomFields: React.FunctionComponent = ({ } > diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx index 470288f2ebac5..ef5dc9b8e3c4d 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx @@ -308,7 +308,11 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent = /> - +