fleet/frontend/components/graphics/FileVpp.tsx
Gabriel Hernandez 845b524dcc
add/remove/disable vpp token in Fleet UI (#20127)
relates to #19866

> NOTE: API integration work still needs to be done, which will happen
in another PR.

This adds the ability to add, remove, or disable a VPP token in the
Fleet UI. This includes:

**Vpp integration page with VPP card:**


![image](https://github.com/fleetdm/fleet/assets/1153709/99b1ca9b-8872-447f-a085-b5385a2b7f7e)


![image](https://github.com/fleetdm/fleet/assets/1153709/1cdb80a2-1afe-4739-994c-fe7430449f13)


![image](https://github.com/fleetdm/fleet/assets/1153709/79ec7927-f905-48c4-b1b9-42d4d6b41028)

**VPP setup page with steps to set up VPP:**


![image](https://github.com/fleetdm/fleet/assets/1153709/dec203e4-01d3-4e1d-b493-be3772b72813)

**VPP setup page with VPP info:**


![image](https://github.com/fleetdm/fleet/assets/1153709/afccba29-e97b-4937-8235-4706e39d9333)

**Disable VPP modal:**


![image](https://github.com/fleetdm/fleet/assets/1153709/da4a2db3-7546-4f3b-8ec0-d77ad7bff19f)

**renew Vpp modal:**


![image](https://github.com/fleetdm/fleet/assets/1153709/8224f466-6aae-43bd-a120-3de5f0c90064)

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
2024-07-10 17:05:09 +01:00

59 lines
2.8 KiB
TypeScript

import React from "react";
const FileVpp = () => {
return (
<svg width="34" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#a)">
<path
d="M29.333 39.75H4.667a2.417 2.417 0 0 1-2.417-2.416V2.667A2.417 2.417 0 0 1 4.667.25h19.562c.64 0 1.255.255 1.709.708l5.104 5.105c.453.453.708 1.068.708 1.709v29.562a2.417 2.417 0 0 1-2.417 2.416Z"
fill="#fff"
stroke="#192147"
strokeWidth=".5"
/>
<path
d="M23.5.5h.834l.5 6.5 6.666.5v1h-6a2 2 0 0 1-2-2v-6Z"
fill="#C5C7D1"
/>
<path
d="M24.5.334v5.667c0 .736.597 1.333 1.333 1.333h6"
stroke="#192147"
strokeWidth=".5"
/>
<path
d="M2.5 20h25a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2h-25V20Z"
fill="#C5C7D1"
/>
<rect
x=".25"
y="18.25"
width="27.7"
height="16.35"
rx="1.75"
fill="#515774"
/>
<rect
x=".25"
y="18.25"
width="27.7"
height="16.35"
rx="1.75"
stroke="#192147"
strokeWidth=".5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.752 31.045v-7.5h1.946v.952h.043c.07-.185.175-.354.312-.508.137-.156.308-.28.511-.373.204-.094.44-.142.71-.142.36 0 .703.096 1.027.288.327.192.592.494.795.905.206.412.31.947.31 1.606 0 .63-.099 1.151-.296 1.566-.194.414-.454.723-.78.927-.325.203-.681.305-1.07.305-.255 0-.484-.042-.685-.124-.199-.086-.37-.2-.511-.345a1.593 1.593 0 0 1-.323-.497h-.029v2.94h-1.96Zm1.917-4.772c0 .265.035.494.104.689.07.191.17.34.298.447.13.104.285.156.465.156.18 0 .333-.05.458-.152a.96.96 0 0 0 .291-.444c.069-.194.103-.427.103-.696 0-.27-.034-.501-.103-.693a.936.936 0 0 0-.291-.444.693.693 0 0 0-.458-.156.722.722 0 0 0-.465.156.981.981 0 0 0-.298.444 2.061 2.061 0 0 0-.104.693Zm4.758 4.772v-7.5h1.945v.952h.043c.071-.185.175-.354.313-.508.137-.156.307-.28.511-.373.204-.094.44-.142.71-.142.36 0 .702.096 1.026.288.327.192.592.494.796.905.206.412.309.947.309 1.606 0 .63-.098 1.151-.295 1.566-.194.414-.454.723-.781.927-.325.203-.68.305-1.069.305-.256 0-.484-.042-.685-.124-.2-.086-.37-.2-.512-.345a1.593 1.593 0 0 1-.323-.497h-.028v2.94h-1.96Zm1.917-4.772c0 .265.034.494.103.689.071.191.17.34.298.447.13.104.286.156.466.156.18 0 .332-.05.458-.152a.96.96 0 0 0 .29-.444c.07-.194.104-.427.104-.696 0-.27-.034-.501-.103-.693a.935.935 0 0 0-.291-.444.693.693 0 0 0-.458-.156.722.722 0 0 0-.466.156.98.98 0 0 0-.298.444 2.061 2.061 0 0 0-.103.693ZM8.162 29l1.832-5.455h-2.06l-.88 3.608h-.057l-.88-3.608h-2.06L5.889 29h2.273Z"
fill="#fff"
/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h34v40H0z" />
</clipPath>
</defs>
</svg>
);
};
export default FileVpp;