From 1bde6b3fd63a79914fb2922aeee9597c4559578b Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Fri, 15 Dec 2023 15:25:09 +0530
Subject: [PATCH] Add dropdown for status in Deployments tab panel (#5)

* Implement and use dropdown component

* Handle state of dropdown

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
---
 packages/frontend/package.json                |  1 +
 .../frontend/src/components/Deployments.tsx   | 12 +++++--
 packages/frontend/src/components/Dropdown.tsx | 31 +++++++++++++++++++
 yarn.lock                                     | 12 +++++++
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/components/Dropdown.tsx

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 4c9bd7c5..a0971035 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -13,6 +13,7 @@
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
diff --git a/packages/frontend/src/components/Deployments.tsx b/packages/frontend/src/components/Deployments.tsx
index 07027171..d45cfe21 100644
--- a/packages/frontend/src/components/Deployments.tsx
+++ b/packages/frontend/src/components/Deployments.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 
 import deploymentDetails from '../assets/deployments.json';
 import DeployDetailsCard from './DeploymentDetailsCard';
+import Dropdown from './Dropdown';
+
+const statusOptions = [
+  { value: 'production', label: 'Production' },
+  { value: 'preview', label: 'Preview' },
+];
 
 const Deployments = () => {
   return (
@@ -22,10 +28,10 @@ const Deployments = () => {
           />
         </div>
         <div className="col-span-1">
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+          <Dropdown
             placeholder="All status"
+            options={statusOptions}
+            handler={() => {}}
           />
         </div>
       </div>
diff --git a/packages/frontend/src/components/Dropdown.tsx b/packages/frontend/src/components/Dropdown.tsx
new file mode 100644
index 00000000..6cf44f3d
--- /dev/null
+++ b/packages/frontend/src/components/Dropdown.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  default as ReactDropdown,
+  Option as ReactDropdownOption,
+} from 'react-dropdown';
+import 'react-dropdown/style.css';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface DropdownProps {
+  placeholder: string;
+  options: Option[];
+  handler: (arg: ReactDropdownOption) => void;
+}
+
+const Dropdown = ({ placeholder, options, handler }: DropdownProps) => {
+  return (
+    <ReactDropdown
+      options={options}
+      placeholder={placeholder}
+      className="h-full"
+      controlClassName="h-full"
+      onChange={handler}
+    />
+  );
+};
+
+export default Dropdown;
diff --git a/yarn.lock b/yarn.lock
index 5bf1f727..cf009c44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3982,6 +3982,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
+classnames@^2.2.3:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.3"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz"
@@ -10160,6 +10165,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dropdown@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.11.0.tgz#b9576de17efd28e5684d101b3f58dfe784af242c"
+  integrity sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==
+  dependencies:
+    classnames "^2.2.3"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"