infisical/frontend/components/dashboard/DownloadSecretsMenu.tsx

import { Fragment } from 'react';
import { useTranslation } from "next-i18next";
import { faDownload } from '@fortawesome/free-solid-svg-icons';
import { Menu, Transition } from '@headlessui/react';

import Button from '../basic/buttons/Button';
import downloadDotEnv from '../utilities/secrets/downloadDotEnv';
import downloadYaml from '../utilities/secrets/downloadYaml';


interface SecretDataProps {
  type: 'personal' | 'shared';
  pos: number;
  key: string;
  value: string;
  id: string;
  comment: string;
}

/**
 * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
 * @param {object} obj 
 * @param {SecretDataProps[]} obj.data - secrets that we want to downlaod
 * @param {string} obj.env - the environment which we're downloading (used for naming the file)
 */
const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: string; }) => {
  const { t } = useTranslation();

  return <Menu
    as="div"
    className="relative inline-block text-left"
  >
    <Menu.Button
      as="div"
      className="inline-flex w-full justify-center 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"
    >
      <Button
        color="mineshaft"
        size="icon-md"
        icon={faDownload}
        onButtonPressed={() => {}}
      />
    </Menu.Button>
    <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-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
        <Menu.Item>
          <Button
            color="mineshaft"
            onButtonPressed={() => downloadDotEnv({ data, env })}
            size="md"
            text="Download as .env"
          />
        </Menu.Item>
        <Menu.Item>
          <Button
            color="mineshaft"
            onButtonPressed={() => downloadYaml({ data, env })}
            size="md"
            text="Download as .yml"
          />
        </Menu.Item>
      </Menu.Items>
    </Transition>
  </Menu>
}

export default DownloadSecretMenu;