Context center UI

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/file-upload/file-upload.tsx

@@ -15,12 +15,19 @@
  *  Source: https://github.com/untitleduico/react/blob/main/components/application/file-upload/file-upload-base.tsx
  */
 
-import { UploadCloud02 } from '@untitledui/icons';
-import type { DragEvent, ChangeEvent } from 'react';
-import { useId, useRef, useState } from 'react';
 import { Button } from '@/components/base/buttons/button';
+import { ButtonUtility } from '@/components/base/buttons/button-utility';
+import { ProgressBar } from '@/components/base/progress-indicators/progress-indicators';
 import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
 import { cx } from '@/utils/cx';
+import {
+  CheckCircle,
+  Trash01,
+  UploadCloud02,
+  XCircle,
+} from '@untitledui/icons';
+import type { ChangeEvent, ComponentPropsWithRef, DragEvent } from 'react';
+import { useId, useRef, useState } from 'react';
 
 export const getReadableFileSize = (bytes: number): string => {
   if (bytes === 0) {
@@ -240,3 +247,236 @@ export const FileUploadDropZone = ({
 };
 
 FileUploadDropZone.displayName = 'FileUploadDropZone';
+
+export interface FileListItemProps {
+  name: string;
+  size: number;
+  progress: number;
+  failed?: boolean;
+  className?: string;
+  completeLabel?: string;
+  uploadingLabel?: string;
+  failedLabel?: string;
+  tryAgainLabel?: string;
+  deleteLabel?: string;
+  onDelete?: () => void;
+  onRetry?: () => void;
+}
+
+export const FileListItemProgressBar = ({
+  className,
+  completeLabel = 'Complete',
+  deleteLabel = 'Delete',
+  failed,
+  failedLabel = 'Failed',
+  name,
+  onDelete,
+  onRetry,
+  progress,
+  size,
+  tryAgainLabel = 'Try again',
+  uploadingLabel = 'Uploading...',
+}: FileListItemProps) => {
+  const isComplete = progress === 100;
+
+  return (
+    <li
+      className={cx(
+        'tw:relative tw:flex tw:gap-3 tw:rounded-xl tw:bg-primary tw:p-4 tw:ring-1 tw:ring-secondary tw:transition-shadow tw:duration-100 tw:ease-linear tw:ring-inset',
+        failed && 'tw:ring-2 tw:ring-error',
+        className
+      )}>
+      <div className="tw:flex tw:size-10 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-lg tw:bg-secondary">
+        <UploadCloud02
+          className="tw:size-5 tw:text-tertiary"
+          strokeWidth={1.5}
+        />
+      </div>
+
+      <div className="tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:items-start">
+        <div className="tw:flex tw:w-full tw:min-w-0 tw:max-w-full tw:flex-1">
+          <div className="tw:min-w-0 tw:flex-1">
+            <p className="tw:truncate tw:text-sm tw:font-medium tw:text-secondary">
+              {name}
+            </p>
+            <div className="tw:mt-0.5 tw:flex tw:items-center tw:gap-2">
+              <p className="tw:truncate tw:whitespace-nowrap tw:text-sm tw:text-tertiary">
+                {getReadableFileSize(size)}
+              </p>
+              <hr className="tw:h-3 tw:w-px tw:rounded-full tw:border-none tw:bg-border-primary" />
+              <div className="tw:flex tw:items-center tw:gap-1">
+                {isComplete && !failed && (
+                  <>
+                    <CheckCircle className="tw:size-4 tw:stroke-[2.5px] tw:text-fg-success-primary" />
+                    <p className="tw:text-sm tw:font-medium tw:text-success-primary">
+                      {completeLabel}
+                    </p>
+                  </>
+                )}
+                {!isComplete && !failed && (
+                  <>
+                    <UploadCloud02 className="tw:size-4 tw:stroke-[2.5px] tw:text-fg-quaternary" />
+                    <p className="tw:text-sm tw:font-medium tw:text-quaternary">
+                      {uploadingLabel}
+                    </p>
+                  </>
+                )}
+                {failed && (
+                  <>
+                    <XCircle className="tw:size-4 tw:text-fg-error-primary" />
+                    <p className="tw:text-sm tw:font-medium tw:text-error-primary">
+                      {failedLabel}
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+          <ButtonUtility
+            className="tw:-mr-2 tw:-mt-2 tw:self-start"
+            color="tertiary"
+            icon={Trash01}
+            size="xs"
+            tooltip={deleteLabel}
+            onClick={onDelete}
+          />
+        </div>
+
+        {!failed && (
+          <div className="tw:mt-1 tw:w-full">
+            <ProgressBar
+              labelPosition="right"
+              max={100}
+              min={0}
+              value={progress}
+            />
+          </div>
+        )}
+
+        {failed && (
+          <Button
+            className="tw:mt-1.5"
+            color="link-destructive"
+            size="sm"
+            onClick={onRetry}>
+            {tryAgainLabel}
+          </Button>
+        )}
+      </div>
+    </li>
+  );
+};
+
+export const FileListItemProgressFill = ({
+  className,
+  deleteLabel = 'Delete',
+  failed,
+  failedLabel = 'Upload failed, please try again',
+  name,
+  onDelete,
+  onRetry,
+  progress,
+  size,
+  tryAgainLabel = 'Try again',
+}: FileListItemProps) => {
+  const isComplete = progress === 100;
+
+  return (
+    <li
+      className={cx(
+        'tw:relative tw:flex tw:gap-3 tw:overflow-hidden tw:rounded-xl tw:bg-primary tw:p-4',
+        className
+      )}>
+      <div
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={progress}
+        className={cx(
+          'tw:absolute tw:inset-0 tw:size-full tw:bg-secondary tw:transition tw:duration-75 tw:ease-linear',
+          isComplete && 'tw:opacity-0'
+        )}
+        role="progressbar"
+        style={{ transform: `translateX(-${100 - progress}%)` }}
+      />
+      <div
+        className={cx(
+          'tw:absolute tw:inset-0 tw:size-full tw:rounded-[inherit] tw:ring-1 tw:ring-secondary tw:transition tw:duration-100 tw:ease-linear tw:ring-inset',
+          failed && 'tw:ring-2 tw:ring-error'
+        )}
+      />
+      <div className="tw:relative tw:flex tw:size-10 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-lg tw:bg-secondary">
+        <UploadCloud02
+          className="tw:size-5 tw:text-tertiary"
+          strokeWidth={1.5}
+        />
+      </div>
+
+      <div className="tw:relative tw:flex tw:min-w-0 tw:flex-1">
+        <div className="tw:relative tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:items-start">
+          <div className="tw:w-full tw:min-w-0 tw:flex-1">
+            <p className="tw:truncate tw:text-sm tw:font-medium tw:text-secondary">
+              {name}
+            </p>
+            <div className="tw:mt-0.5 tw:flex tw:items-center tw:gap-2">
+              <p className="tw:text-sm tw:text-tertiary">
+                {failed ? failedLabel : getReadableFileSize(size)}
+              </p>
+              {!failed && (
+                <>
+                  <hr className="tw:h-3 tw:w-px tw:rounded-full tw:border-none tw:bg-border-primary" />
+                  <div className="tw:flex tw:items-center tw:gap-1">
+                    {isComplete ? (
+                      <CheckCircle className="tw:size-4 tw:stroke-[2.5px] tw:text-fg-success-primary" />
+                    ) : (
+                      <UploadCloud02 className="tw:size-4 tw:stroke-[2.5px] tw:text-fg-quaternary" />
+                    )}
+                    <p className="tw:text-sm tw:text-tertiary">{progress}%</p>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+          {failed && (
+            <Button
+              className="tw:mt-1.5"
+              color="link-destructive"
+              size="sm"
+              onClick={onRetry}>
+              {tryAgainLabel}
+            </Button>
+          )}
+        </div>
+        <ButtonUtility
+          className="tw:-mr-2 tw:-mt-2 tw:self-start"
+          color="tertiary"
+          icon={Trash01}
+          size="xs"
+          tooltip={deleteLabel}
+          onClick={onDelete}
+        />
+      </div>
+    </li>
+  );
+};
+
+const FileUploadRoot = (props: ComponentPropsWithRef<'div'>) => (
+  <div
+    {...props}
+    className={cx('tw:flex tw:flex-col tw:gap-4', props.className)}
+  />
+);
+
+const FileUploadList = (props: ComponentPropsWithRef<'ul'>) => (
+  <ul
+    {...props}
+    className={cx('tw:flex tw:flex-col tw:gap-3', props.className)}
+  />
+);
+
+export const FileUpload = {
+  DropZone: FileUploadDropZone,
+  List: FileUploadList,
+  ListItemProgressBar: FileListItemProgressBar,
+  ListItemProgressFill: FileListItemProgressFill,
+  Root: FileUploadRoot,
+};

openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/dot-icon.tsx

@@ -1,6 +1,11 @@
 import type { HTMLAttributes } from 'react';
 
 const sizes = {
+  xs: {
+    wh: 6,
+    c: 3,
+    r: 2,
+  },
   sm: {
     wh: 8,
     c: 4,
@@ -16,7 +21,7 @@ const sizes = {
 export const Dot = ({
   size = 'md',
   ...props
-}: HTMLAttributes<HTMLOrSVGElement> & { size?: 'sm' | 'md' }) => {
+}: HTMLAttributes<HTMLOrSVGElement> & { size?: 'sm' | 'md' | 'xs' }) => {
   return (
     <svg
       fill="none"

openmetadata-ui/src/main/resources/ui/playwright/constant/sidebar.ts

@@ -31,7 +31,8 @@ export enum SidebarItem {
   LINEAGE = 'lineage',
   COLUMN_BULK_OPERATIONS = 'column-bulk-operations',
   DATA_MARKETPLACE = 'data-marketplace',
-  KNOWLEDGE_CENTER = 'knowledge-center',
+  CONTEXT_CENTER = 'context-center',
+  ARTICLE = 'articles',
 }
 
 export const SIDEBAR_LIST_ITEMS = {
@@ -70,6 +71,7 @@ export const SIDEBAR_LIST_ITEMS = {
     SidebarItem.GOVERNANCE,
     SidebarItem.COLUMN_BULK_OPERATIONS,
   ],
+  [SidebarItem.ARTICLE]: [SidebarItem.CONTEXT_CENTER, SidebarItem.ARTICLE],
 
   // Profile Dropdown
   'user-name': ['dropdown-profile', 'user-name'],