Feature/tech 1656 (#1043)

* feat: Add feedback widget with screenshot and file upload functionality * fix: add preview-api storybook package due to deprecations happening
tailwarden · Oct 11, 2023 · a27da11 · a27da11
1 parent 72bb651
commit a27da11
Show file tree

Hide file tree

Showing 9 changed files with 1,184 additions and 628 deletions.
diff --git a/dashboard/components/feedback-widget/FeedbackWidget.tsx b/dashboard/components/feedback-widget/FeedbackWidget.tsx
diff --git a/dashboard/components/input/Input.tsx b/dashboard/components/input/Input.tsx
@@ -4,10 +4,12 @@ import { required } from '../../utils/regex';
 export type InputEvent = ChangeEvent<HTMLInputElement>;
 
 export type InputProps = {
+  disabled?: boolean;
   id?: number;
   name: string;
-  type?: string;
+  type: string;
   label: string;
+  required?: boolean;
   regex?: RegExp;
   error?: string;
   value?: string | number | string[];
@@ -21,16 +23,13 @@ export type InputProps = {
 function Input({
   id,
   name,
-  type = 'text',
   label,
   regex = required,
   error = 'Please provide a value',
-  value,
   autofocus,
-  min,
-  maxLength,
   positiveNumberOnly,
-  action
+  action,
+  ...otherProps
 }: InputProps) {
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -66,7 +65,6 @@ function Input({
     <div>
       <div className="relative">
         <input
-          type={type}
           name={name}
           className={`peer w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary ${
             isValid === false && `outline-error-600 focus:outline-error-600`
@@ -82,13 +80,11 @@ function Input({
             }
           }}
           onKeyDown={e => handleKeyDown(e)}
-          value={value}
           ref={inputRef}
-          min={min}
-          maxLength={maxLength}
           autoComplete="off"
           data-lpignore="true"
           data-form-type="other"
+          {...otherProps}
         />
         <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
           {label}

diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx
@@ -178,6 +178,7 @@ function InventoryViewAlertsCreateOrEditAlert({
         {selected === 'BUDGET' && (
           <Grid gap="sm">
             <Input
+              type="text"
               label="Name"
               name="name"
               action={handleChange}
@@ -199,6 +200,7 @@ function InventoryViewAlertsCreateOrEditAlert({
         {selected === 'USAGE' && (
           <Grid gap="sm">
             <Input
+              type="text"
               label="Name"
               name="name"
               action={handleChange}
@@ -284,6 +286,7 @@ function InventoryViewAlertsCreateOrEditAlert({
             )}
 
             <Input
+              type="text"
               label="Secret (optional)"
               name="secret"
               action={handleChange}

diff --git a/dashboard/components/modal/Modal.stories.tsx b/dashboard/components/modal/Modal.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Modal, { ModalProps } from './Modal';
+
+function ModalWrapper({
+  children,
+  isOpen,
+  closeModal
+}: Pick<ModalProps, 'children' | 'isOpen'> & { closeModal: () => void }) {
+  return (
+    <Modal isOpen={isOpen} closeModal={() => closeModal()}>
+      {children}
+    </Modal>
+  );
+}
+
+const meta: Meta<typeof Modal> = {
+  title: 'Komiser/Modal',
+  component: ModalWrapper,
+  decorators: [
+    Story => <div style={{ margin: '3em', height: '200px' }}>{Story()}</div>
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean'
+    },
+    children: {
+      control: 'string'
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Lorem Ipsum dolor'
+  }
+};
diff --git a/dashboard/components/modal/Modal.tsx b/dashboard/components/modal/Modal.tsx
@@ -1,12 +1,13 @@
 import { ReactNode, useEffect } from 'react';
 
-type ModalProps = {
+export type ModalProps = {
   isOpen: boolean;
   closeModal: () => void;
   children: ReactNode;
+  id?: string;
 };
 
-function Modal({ isOpen, closeModal, children }: ModalProps) {
+function Modal({ isOpen, closeModal, id, children }: ModalProps) {
   useEffect(() => {
     function escFunction(event: KeyboardEvent) {
       if (event.key === 'Escape') {
@@ -26,10 +27,14 @@ function Modal({ isOpen, closeModal, children }: ModalProps) {
       {isOpen && (
         <>
           <div
+            id={`${id}-wrapper`}
             onClick={closeModal}
             className="fixed inset-0 z-30 hidden animate-fade-in bg-black-900/10 opacity-0 sm:block"
           ></div>
-          <div className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-2xl sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg">
+          <div
+            id={`${id}-modal`}
+            className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-2xl sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg"
+          >
             {children}
           </div>
         </>

diff --git a/dashboard/components/navbar/Navbar.tsx b/dashboard/components/navbar/Navbar.tsx
@@ -1,7 +1,9 @@
+import { useContext } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useContext } from 'react';
+
+import useFeedbackWidget from '@components/feedback-widget/FeedbackWidget';
 import GlobalAppContext from '../layout/context/GlobalAppContext';
 
 interface NavItem {
@@ -13,6 +15,8 @@ function Navbar() {
   const { displayBanner, betaFlagOnboardingWizard } =
     useContext(GlobalAppContext);
   const router = useRouter();
+  const { openFeedbackModal, FeedbackModal } = useFeedbackWidget();
+
   // TODO: (onboarding-wizard) Remove the betaFlagOnboardingWizard conditional when feature is stable
   const nav: NavItem[] = [
     { label: 'Dashboard', href: '/dashboard' },
@@ -117,10 +121,9 @@ function Navbar() {
           Changelog
         </a>
         <a
-          className="hidden items-center gap-2 transition-colors hover:text-primary md:flex"
-          href="https://tally.so/r/mZjY40"
-          target="_blank"
+          className="hidden cursor-pointer items-center gap-2 transition-colors hover:text-primary md:flex"
           rel="noopener noreferrer"
+          onClick={() => openFeedbackModal()}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -168,6 +171,7 @@ function Navbar() {
           Join our Discord
         </a>
       </div>
+      <FeedbackModal />
     </nav>
   );
 }