[Fleet] Allow global data tags to be readonly (elastic#187161)

jbudz · Jul 2, 2024 · ae30c30 · ae30c30
1 parent 74772c4
commit ae30c30
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/...icy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.test.tsx b/...icy/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', () => {
         <GlobalDataTagsTable
           updateAgentPolicy={updateAgentPolicy}
           globalDataTags={agentPolicy.global_data_tags}
+          isDisabled={options?.isDisabled}
         />
       );
     };
@@ -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/...t_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx b/...t_policy/components/agent_policy_advanced_fields/custom_fields/global_data_tags_table.tsx
@@ -34,6 +34,7 @@ import type {
 interface Props {
   updateAgentPolicy: (u: Partial<NewAgentPolicy | AgentPolicy>) => 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<Props> = ({
   updateAgentPolicy,
   globalDataTags,
+  isDisabled,
 }) => {
   const { overlays } = useStartServices();
   const [editTags, setEditTags] = useState<{ [k: number]: GlobalDataTag }>({});
@@ -358,6 +360,8 @@ export const GlobalDataTagsTable: React.FunctionComponent<Props> = ({
                   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<Props> = ({
                   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<Props> = ({
       newTagErrors,
       deleteTag,
       handleStartEdit,
+      isDisabled,
     ]
   );
 
@@ -431,6 +438,8 @@ export const GlobalDataTagsTable: React.FunctionComponent<Props> = ({
                 iconType="plusInCircle"
                 onClick={handleAddField}
                 style={{ marginTop: '16px' }}
+                disabled={isDisabled}
+                data-test-subj="globalDataTagAddFieldBtn"
               >
                 <FormattedMessage
                   id="xpack.fleet.globalDataTagsTable.addFieldBtn"
@@ -449,7 +458,8 @@ export const GlobalDataTagsTable: React.FunctionComponent<Props> = ({
                 iconType="plusInCircle"
                 onClick={handleAddField}
                 style={{ marginTop: '16px' }}
-                isDisabled={isAdding}
+                isDisabled={isDisabled || isAdding}
+                data-test-subj="globalDataTagAddAnotherFieldBtn"
               >
                 <FormattedMessage
                   id="xpack.fleet.globalDataTagsTable.addAnotherFieldBtn"

diff --git a/...eet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx b/...eet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx
@@ -24,11 +24,13 @@ import { GlobalDataTagsTable } from './global_data_tags_table';
 interface Props {
   agentPolicy: Partial<AgentPolicy | NewAgentPolicy>;
   updateAgentPolicy: (u: Partial<NewAgentPolicy | AgentPolicy>) => void;
+  isDisabled?: boolean;
 }
 
 export const CustomFields: React.FunctionComponent<Props> = ({
   agentPolicy,
   updateAgentPolicy,
+  isDisabled,
 }) => {
   const isAgentPolicy = (policy: Partial<AgentPolicy | NewAgentPolicy>): policy is AgentPolicy => {
     return (policy as AgentPolicy).package_policies !== undefined;
@@ -103,6 +105,7 @@ export const CustomFields: React.FunctionComponent<Props> = ({
       }
     >
       <GlobalDataTagsTable
+        isDisabled={isDisabled}
         updateAgentPolicy={updateAgentPolicy}
         globalDataTags={agentPolicy.global_data_tags ? agentPolicy.global_data_tags : []}
       />

diff --git a/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
@@ -308,7 +308,11 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
-      <CustomFields updateAgentPolicy={updateAgentPolicy} agentPolicy={agentPolicy} />
+      <CustomFields
+        updateAgentPolicy={updateAgentPolicy}
+        agentPolicy={agentPolicy}
+        isDisabled={disabled || agentPolicy.is_managed === true}
+      />
       <EuiDescribedFormGroup
         fullWidth
         title={