New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

web/components/integration/github/import-data.tsx

@@ -0,0 +1,128 @@
+import { FC } from "react";
+
+// react-hook-form
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// hooks
+import useProjects from "hooks/use-projects";
+// components
+import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
+// ui
+import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspaceIntegration } from "types";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  integration: IWorkspaceIntegration | false | undefined;
+  control: Control<TFormValues, any>;
+  watch: UseFormWatch<TFormValues>;
+};
+
+export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
+  const { projects } = useProjects();
+
+  const options = projects
+    ? projects.map((project) => ({
+        value: project.id,
+        query: project.name,
+        content: <p>{truncateText(project.name, 25)}</p>,
+      }))
+    : undefined;
+
+  return (
+    <div className="mt-6">
+      <div className="space-y-8">
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Select Repository</h4>
+            <p className="text-xs text-custom-text-200">
+              Select the repository that you want the issues to be imported from.
+            </p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            {integration && (
+              <Controller
+                control={control}
+                name="github"
+                render={({ field: { value, onChange } }) => (
+                  <SelectRepository
+                    integration={integration}
+                    value={value ? value.id : null}
+                    label={
+                      value ? (
+                        `${value.full_name}`
+                      ) : (
+                        <span className="text-custom-text-200">Select Repository</span>
+                      )
+                    }
+                    onChange={onChange}
+                    characterLimit={50}
+                  />
+                )}
+              />
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Select Project</h4>
+            <p className="text-xs text-custom-text-200">
+              Select the project to import the issues to.
+            </p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            {projects && (
+              <Controller
+                control={control}
+                name="project"
+                render={({ field: { value, onChange } }) => (
+                  <CustomSearchSelect
+                    value={value}
+                    label={
+                      value ? (
+                        projects.find((p) => p.id === value)?.name
+                      ) : (
+                        <span className="text-custom-text-200">Select Project</span>
+                      )
+                    }
+                    onChange={onChange}
+                    options={options}
+                    optionsClassName="w-full"
+                  />
+                )}
+              />
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Sync Issues</h4>
+            <p className="text-xs text-custom-text-200">
+              Set whether you want to sync the issues or not.
+            </p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            <Controller
+              control={control}
+              name="sync"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch value={value} onChange={() => onChange(!value)} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-2">
+        <SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
+        <PrimaryButton
+          onClick={() => handleStepChange("repo-details")}
+          disabled={!watch("github") || !watch("project")}
+        >
+          Next
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};