Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx

@@ -0,0 +1,40 @@
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+import { ColumnHead } from './ColumnHead';
+import { DataTableColumnDropdownMenu } from './DataTableColumnDropdownMenu';
+
+type ColumnHeadWithDropdownProps = {
+  column: ColumnDefinition<FieldMetadata>;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  primaryColumnKey: string;
+};
+
+export const ColumnHeadWithDropdown = ({
+  column,
+  isFirstColumn,
+  isLastColumn,
+  primaryColumnKey,
+}: ColumnHeadWithDropdownProps) => {
+  return (
+    <DropdownScope dropdownScopeId={column.key + '-header'}>
+      <DropdownMenu
+        clickableComponent={<ColumnHead column={column} />}
+        dropdownComponents={
+          <DataTableColumnDropdownMenu
+            column={column}
+            isFirstColumn={isFirstColumn}
+            isLastColumn={isLastColumn}
+            primaryColumnKey={primaryColumnKey}
+          />
+        }
+        dropdownHotkeyScope={{ scope: column.key + '-header' }}
+        dropdownOffset={{ x: 0, y: -8 }}
+      />
+    </DropdownScope>
+  );
+};