901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Ticket: None
Changelog: None
Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.44

/src/js/components/settings/webhooks/webhooks.js

// Copyright 2022 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// material ui
import { ArrowRightAlt as ArrowRightAltIcon } from '@mui/icons-material';

import { changeIntegration, createIntegration, deleteIntegration, getIntegrations, getWebhookEvents } from '../../../actions/organizationActions';
import { EXTERNAL_PROVIDER } from '../../../constants/deviceConstants';
import { emptyWebhook } from '../../../constants/organizationConstants';
import { getDocsVersion } from '../../../selectors';
import DetailsTable from '../../common/detailstable';
import Time from '../../common/time';
import WebhookManagement from './management';

const columns = [
  { key: 'url', title: 'URL', render: ({ url }) => url },
  { key: 'status', title: 'Status', render: ({ status }) => status },
  {
    key: 'updated_ts',
    title: 'Last activity',
    render: ({ updated_ts }) => <Time value={updated_ts} />
  },
  {
    key: 'manage',
    title: 'Manage',
    render: () => (
      <div className="bold flexbox center-aligned link-color margin-right-small uppercased" style={{ whiteSpace: 'nowrap' }}>
        view details <ArrowRightAltIcon />
      </div>
    )
  }
];

export const Webhooks = ({ webhook = { ...emptyWebhook } }) => {
  const [adding, setAdding] = useState(false);
  const [editing, setEditing] = useState(false);
  const [selectedWebhook, setSelectedWebhook] = useState(webhook);
  const dispatch = useDispatch();
  const { events, webhooks } = useSelector(state => {
    const webhooks = state.organization.externalDeviceIntegrations.filter(
      integration => integration.id && integration.provider === EXTERNAL_PROVIDER.webhook.provider
    );
    const events = webhooks.length ? state.organization.webhooks.events : [];
    return { events, webhooks };
  });
  const docsVersion = useSelector(getDocsVersion);
  const eventTotal = useSelector(state => state.organization.webhooks.eventTotal);

  useEffect(() => {
    dispatch(getIntegrations());
  }, []);

  useEffect(() => {
    setSelectedWebhook(webhook);
  }, [JSON.stringify(webhook)]);

  const onEdit = item => {
    setAdding(false);
    setEditing(true);
    setSelectedWebhook(item);
  };

  const onCancel = () => {
    setAdding(false);
    setEditing(false);
  };

  const onSubmit = item => {
    if (adding) {
      dispatch(createIntegration(item));
    } else {
      dispatch(changeIntegration(item));
    }
    setAdding(false);
    setEditing(false);
  };

  const onRemoveClick = () => dispatch(deleteIntegration(selectedWebhook));

  const { mappedWebhooks, relevantColumns } = useMemo(() => {
    const mappedWebhooks = webhooks.map(item => ({ ...item, url: item.credentials[EXTERNAL_PROVIDER.webhook.credentialsType].url, status: 'enabled' }));
    const relevantColumns = columns.reduce((accu, item) => {
      if (mappedWebhooks.some(hook => hook[item.key]) || item === columns[columns.length - 1]) {
        accu.push(item);
      }
      return accu;
    }, []);
    return { mappedWebhooks, relevantColumns };
  }, [JSON.stringify(webhooks)]);

  return (
    <div>
      <h2>Webhooks</h2>
      {webhooks.length ? (
        <DetailsTable columns={relevantColumns} items={mappedWebhooks} onItemClick={onEdit} />
      ) : (
        <div className="flexbox centered">
          No webhooks are configured yet. Learn more about webhooks in our{' '}
          <a href={`https://docs.mender.io/${docsVersion}server-integration`} target="_blank" rel="noopener noreferrer">
            documentation
          </a>
        </div>
      )}
      <WebhookManagement
        adding={adding}
        editing={editing}
        events={events}
        eventTotal={eventTotal}
        getWebhookEvents={options => dispatch(getWebhookEvents(options))}
        onCancel={onCancel}
        onSubmit={onSubmit}
        onRemove={onRemoveClick}
        webhook={selectedWebhook}
      />
    </div>
  );
};

export default Webhooks;

1	// Copyright 2022 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useMemo, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	// material ui
18	import { ArrowRightAlt as ArrowRightAltIcon } from '@mui/icons-material';
19
20	import { changeIntegration, createIntegration, deleteIntegration, getIntegrations, getWebhookEvents } from '../../../actions/organizationActions';
21	import { EXTERNAL_PROVIDER } from '../../../constants/deviceConstants';
22	import { emptyWebhook } from '../../../constants/organizationConstants';
23	import { getDocsVersion } from '../../../selectors';
24	import DetailsTable from '../../common/detailstable';
25	import Time from '../../common/time';
26	import WebhookManagement from './management';
27
28	const columns = [	6✔
29	{ key: 'url', title: 'URL', render: ({ url }) => url },	1✔
30	{ key: 'status', title: 'Status', render: ({ status }) => status },	1✔
31	{
32	key: 'updated_ts',
33	title: 'Last activity',
UNCOV 34	render: ({ updated_ts }) => <Time value={updated_ts} />	×
35	},
36	{
37	key: 'manage',
38	title: 'Manage',
39	render: () => (
40	<div className="bold flexbox center-aligned link-color margin-right-small uppercased" style={{ whiteSpace: 'nowrap' }}>	1✔
41	view details <ArrowRightAltIcon />
42	</div>
43	)
44	}
45	];
46
47	export const Webhooks = ({ webhook = { ...emptyWebhook } }) => {	6✔
48	const [adding, setAdding] = useState(false);	2✔
49	const [editing, setEditing] = useState(false);	2✔
50	const [selectedWebhook, setSelectedWebhook] = useState(webhook);	2✔
51	const dispatch = useDispatch();	2✔
52	const { events, webhooks } = useSelector(state => {	2✔
53	const webhooks = state.organization.externalDeviceIntegrations.filter(	2✔
54	integration => integration.id && integration.provider === EXTERNAL_PROVIDER.webhook.provider	1✔
55	);
56	const events = webhooks.length ? state.organization.webhooks.events : [];	2✔
57	return { events, webhooks };	2✔
58	});
59	const docsVersion = useSelector(getDocsVersion);	2✔
60	const eventTotal = useSelector(state => state.organization.webhooks.eventTotal);	2✔
61
62	useEffect(() => {	2✔
63	dispatch(getIntegrations());	2✔
64	}, []);
65
66	useEffect(() => {	2✔
67	setSelectedWebhook(webhook);	2✔
68	}, [JSON.stringify(webhook)]);
69
70	const onEdit = item => {	2✔
UNCOV 71	setAdding(false);	×
UNCOV 72	setEditing(true);	×
UNCOV 73	setSelectedWebhook(item);	×
74	};
75
76	const onCancel = () => {	2✔
UNCOV 77	setAdding(false);	×
UNCOV 78	setEditing(false);	×
79	};
80
81	const onSubmit = item => {	2✔
UNCOV 82	if (adding) {	×
UNCOV 83	dispatch(createIntegration(item));	×
84	} else {
UNCOV 85	dispatch(changeIntegration(item));	×
86	}
UNCOV 87	setAdding(false);	×
UNCOV 88	setEditing(false);	×
89	};
90
91	const onRemoveClick = () => dispatch(deleteIntegration(selectedWebhook));	2✔
92
93	const { mappedWebhooks, relevantColumns } = useMemo(() => {	2✔
94	const mappedWebhooks = webhooks.map(item => ({ ...item, url: item.credentials[EXTERNAL_PROVIDER.webhook.credentialsType].url, status: 'enabled' }));	2✔
95	const relevantColumns = columns.reduce((accu, item) => {	2✔
96	if (mappedWebhooks.some(hook => hook[item.key]) \|\| item === columns[columns.length - 1]) {	8✔
97	accu.push(item);	4✔
98	}
99	return accu;	8✔
100	}, []);
101	return { mappedWebhooks, relevantColumns };	2✔
102	}, [JSON.stringify(webhooks)]);
103
104	return (	2✔
105	<div>
106	<h2>Webhooks</h2>
107	{webhooks.length ? (	2✔
108	<DetailsTable columns={relevantColumns} items={mappedWebhooks} onItemClick={onEdit} />
109	) : (
110	<div className="flexbox centered">
111	No webhooks are configured yet. Learn more about webhooks in our{' '}
112	<a href={`https://docs.mender.io/${docsVersion}server-integration`} target="_blank" rel="noopener noreferrer">
113	documentation
114	</a>
115	</div>
116	)}
117	<WebhookManagement
118	adding={adding}
119	editing={editing}
120	events={events}
121	eventTotal={eventTotal}
UNCOV 122	getWebhookEvents={options => dispatch(getWebhookEvents(options))}	×
123	onCancel={onCancel}
124	onSubmit={onSubmit}
125	onRemove={onRemoveClick}
126	webhook={selectedWebhook}
127	/>
128	</div>
129	);
130	};
131
132	export default Webhooks;

mendersoftware / gui / 901187442

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous