-
Notifications
You must be signed in to change notification settings - Fork 988
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #169 from Infisical/dashboard-sidebar
Added dashboard sidebar
- Loading branch information
Showing
11 changed files
with
724 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from "react"; | ||
| import { Switch } from "@headlessui/react"; | ||
|
|
||
|
|
||
| interface OverrideProps { | ||
| id: string; | ||
| keyName: string; | ||
| value: string; | ||
| pos: number; | ||
| } | ||
|
|
||
| interface ToggleProps { | ||
| enabled: boolean; | ||
| setEnabled: (value: boolean) => void; | ||
| addOverride: (value: OverrideProps) => void; | ||
| keyName: string; | ||
| value: string; | ||
| pos: number; | ||
| id: string; | ||
| deleteOverride: (id: string) => void; | ||
| sharedToHide: string[]; | ||
| setSharedToHide: (values: string[]) => void; | ||
| } | ||
|
|
||
| /** | ||
| * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values) | ||
| * @param obj | ||
| * @param {boolean} obj.enabled - whether the toggle is turned on or off | ||
| * @param {function} obj.setEnabled - change the state of the toggle | ||
| * @param {function} obj.addOverride - a function that adds an override to a certain secret | ||
| * @param {string} obj.keyName - key of a certain secret | ||
| * @param {string} obj.value - value of a certain secret | ||
| * @param {number} obj.pos - position of a certain secret | ||
| #TODO: make the secret id persistent? | ||
| * @param {string} obj.id - id of a certain secret | ||
| * @param {function} obj.deleteOverride - a function that deleted an override for a certain secret | ||
| * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. | ||
| * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually | ||
| * @returns | ||
| */ | ||
| export default function Toggle ({ | ||
| enabled, | ||
| setEnabled, | ||
| addOverride, | ||
| keyName, | ||
| value, | ||
| pos, | ||
| id, | ||
| deleteOverride, | ||
| sharedToHide, | ||
| setSharedToHide | ||
| }: ToggleProps): JSX.Element { | ||
| return ( | ||
| <Switch | ||
| checked={enabled} | ||
| onChange={() => { | ||
| if (enabled == false) { | ||
| addOverride({ id, keyName, value, pos }); | ||
| setSharedToHide([ | ||
| ...sharedToHide!, | ||
| id | ||
| ]) | ||
| } else { | ||
| setSharedToHide(sharedToHide!.filter(tempId => tempId != id)) | ||
| deleteOverride(id); | ||
| } | ||
| setEnabled(!enabled); | ||
| }} | ||
| className={`${ | ||
| enabled ? 'bg-primary' : 'bg-bunker-400' | ||
| } relative inline-flex h-5 w-9 items-center rounded-full`} | ||
| > | ||
| <span className="sr-only">Enable notifications</span> | ||
| <span | ||
| className={`${ | ||
| enabled ? 'translate-x-[1.26rem]' : 'translate-x-0.5' | ||
| } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`} | ||
| /> | ||
| </Switch> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { Fragment,useState } from 'react'; | ||
| import { faShuffle } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { Menu, Transition } from '@headlessui/react'; | ||
|
|
||
|
|
||
| /** | ||
| * This is the menu that is used to (re)generate secrets (currently we only have ranom hex, in future we will have more options) | ||
| * @returns the popup-menu for randomly generating secrets | ||
| */ | ||
| const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => { | ||
| const [randomStringLength, setRandomStringLength] = useState(32); | ||
|
|
||
| return <Menu as="div" className="relative inline-block text-left"> | ||
| <div> | ||
| <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"> | ||
| <div className='py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500'> | ||
| <FontAwesomeIcon icon={faShuffle} className='text-bunker-300'/> | ||
| </div> | ||
| </Menu.Button> | ||
| </div> | ||
| <Transition | ||
| as={Fragment} | ||
| enter="transition ease-out duration-100" | ||
| enterFrom="transform opacity-0 scale-95" | ||
| enterTo="transform opacity-100 scale-100" | ||
| leave="transition ease-in duration-75" | ||
| leaveFrom="transform opacity-100 scale-100" | ||
| leaveTo="transform opacity-0 scale-95" | ||
| > | ||
| <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1"> | ||
| <div | ||
| onClick={() => { | ||
| if (randomStringLength > 32) { | ||
| setRandomStringLength(32); | ||
| } else if (randomStringLength < 2) { | ||
| setRandomStringLength(2); | ||
| } else { | ||
| modifyValue( | ||
| [...Array(randomStringLength)] | ||
| .map(() => Math.floor(Math.random() * 16).toString(16)) | ||
| .join(''), | ||
| position | ||
| ); | ||
| } | ||
| }} | ||
| className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full" | ||
| > | ||
| <FontAwesomeIcon | ||
| className="text-lg pl-1.5 pr-3" | ||
| icon={faShuffle} | ||
| /> | ||
| <div className="text-sm justify-between flex flex-row w-full"> | ||
| <p>Generate Random Hex</p> | ||
| <p>digits</p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 "> | ||
| <div | ||
| className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700" | ||
| onClick={() => { | ||
| if (randomStringLength > 1) { | ||
| setRandomStringLength(randomStringLength - 1); | ||
| } | ||
| }} | ||
| > | ||
| - | ||
| </div> | ||
| <input | ||
| onChange={(e) => | ||
| setRandomStringLength(parseInt(e.target.value)) | ||
| } | ||
| value={randomStringLength} | ||
| className="text-center z-20 peer text-sm bg-transparent w-full outline-none" | ||
| spellCheck="false" | ||
| /> | ||
| <div | ||
| className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700" | ||
| onClick={() => { | ||
| if (randomStringLength < 32) { | ||
| setRandomStringLength(randomStringLength + 1); | ||
| } | ||
| }} | ||
| > | ||
| + | ||
| </div> | ||
| </div> | ||
| </Menu.Items> | ||
| </Transition> | ||
| </Menu> | ||
| } | ||
|
|
||
| export default GenerateSecretMenu; |
Oops, something went wrong.
0e78336There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Coverage report for
backendTest suite run success
1 tests passing in 1 suite.
Report generated by 🧪jest coverage report action from 0e78336
0e78336There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Coverage report for
backendTest suite run success
1 tests passing in 1 suite.
Report generated by 🧪jest coverage report action from 0e78336