[Security Solution] Update button text according to status

[angorayc]

Summary

This PR fixes https:/elastic/security-team/issues/36

Problem:

Before this PR, the button for loading rules and templates in Manage Detection Rules button always display Load pre-built Elastic Rules and Timeline Templates even if the templates have already been loaded.

Steps to Verify

1. Go to x-pack/plugins/security_solution/server/lib/detection_engine/scripts, and run ./timelines/delete_all_timelines.sh to delete all the existing timelines and templates.
2. Click on Detection tab (Make sure you haven't landed on timelines page)
3. Click on Manage Detection Rules button
4. Confirm the text on the button to load elastic rule & Template is Load pre-built Elastic Rules and Timeline Templates
5. Go to timelines page, and click on template. Wait for templates to load
6. Go back to Manage Detection Rules page, the button text should become Load pre-built Elastic Rules

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios

[stephmilovic]

could you please refactor all of your tests to use waitFor instead of act? Whenever you see that act error on a test, you should resolve it using waitFor with enzyme mount and act with renderHook You can follow the waitFor pattern in edit_connector/index.test.tsx. I'll show you an example on this test:

import { waitFor } from '@testing-library/react';

  it('renders correct button with correct text - Load Elastic prebuilt rules and timeline templates', async () => {
    (getPrePackagedRulesStatus as jest.Mock).mockResolvedValue({
      rules_not_installed: 3,
      rules_installed: 0,
      rules_not_updated: 0,
      timelines_not_installed: 3,
      timelines_installed: 0,
      timelines_not_updated: 0,
    });

    const wrapper = mount(
      <TestProviders>
        <RulesPage />
      </TestProviders>
    );
    await waitFor(() => {
      wrapper.update();
      expect(wrapper.find('[data-test-subj="loadPrebuiltRulesBtn"]').exists()).toEqual(true);
      expect(wrapper.find('[data-test-subj="loadPrebuiltRulesBtn"]').last().text()).toEqual(
        'Load Elastic prebuilt rules and timeline templates'
      );
    });
  });

[stephmilovic]

if you get stuck and want to zoom let me know!

[stephmilovic]

Nice work here! Code looks good, great job on test coverage, manual testing is good. The only change for me is the test update I requested in my comment. Once you have that ping me for a LGTM!

[stephmilovic]

Thanks for updating those tests. This PR is ready to rock 🎸 LGTM!!

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 5b0965b

Metrics [docs]

async chunks size

id	before	after	diff
securitySolution	10.9MB	10.9MB	+6.7KB

History

• 💚 Build #81738 succeeded 3edb313
• 💚 Build #81604 succeeded 57f2cb5
• 💔 Build #81570 failed 732d88c
• 💔 Build #81565 failed 772c6bb
• 💔 Build #81430 failed 34572c9

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream