add info tooltip and tooltip for no changes gitignore

src/components/assignment-panel/assignment-staged-changes/assignment-staged-changes.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { folderIcon, fileIcon } from '@jupyterlab/ui-components'
 import { assignmentStagedChangesClass, assignmentStagedChangesFolderIconClass, largeBulletClass, modifiedTypeBadgeClass, showMoreBtnClass, stagedChangeListItemClass, stagedChangesListClass } from './style'
 import { TextDivider } from '../../text-divider'
+import { InfoTooltip } from '../../info-tooltip'
 import { useAssignment } from '../../../contexts'
 import { IStagedChange } from '../../../api/staged-change'
 
@@ -89,6 +90,12 @@ export const AssignmentStagedChanges = ({ ...props }: AssignmentStagedChangesPro
             }}>
                 <h3 style={{ fontSize: 15, marginBottom: 12, fontWeight: 500 }}>
                     No Changes
+                    <InfoTooltip
+                        title="Files included in your .gitignore will not appear here."
+                        trigger="hover"
+                        placement="right"
+                        iconProps={{ style: { fontSize: 13, marginLeft: 6, color: "var(--jp-content-font-color2)" } }}
+                    />
                 </h3>
                 <p style={{ fontSize: 13, marginTop: 0 }}>
                     Files you've changed since your last submission will appear here.

src/components/info-tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './info-tooltip'
+export * from './info-popover'

src/components/info-tooltip/info-icon.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo, Ref } from 'react'
+import { InfoCircleFilled, InfoCircleOutlined } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+
+export interface InfoIconProps extends AntdIconProps {
+    filled?: boolean
+    ref?: Ref<HTMLSpanElement>
+}
+
+export const InfoIcon = ({ filled=true, style, ...other }: InfoIconProps) => {
+    const Icon = useMemo(() => filled ? InfoCircleFilled : InfoCircleOutlined, [filled])
+    return (
+        <Icon
+            className="info-circle"
+            style={{
+                fontSize: 16,
+                color: "rgb(85, 85, 85)",
+                ...style
+            }}
+            { ...other }
+        />
+    )
+}

src/components/info-tooltip/info-popover.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Popover, PopoverProps } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+import { ReactNode } from 'react'
+import { InfoIcon, InfoIconProps } from './info-icon'
+
+type InfoPopoverProps = PopoverProps & {
+    iconProps?: InfoIconProps
+}
+
+export const InfoPopover = ({
+    iconProps={},
+    ...tooltipProps
+}: InfoPopoverProps) => {
+    return (
+        <Popover
+            className="info-popover"
+            trigger="click"
+            {...tooltipProps }
+        >
+            <InfoIcon { ...iconProps } />
+        </Popover>
+    )
+}

src/components/info-tooltip/info-tooltip.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Tooltip, TooltipProps } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+import { ReactNode } from 'react'
+import { InfoIcon, InfoIconProps } from './info-icon'
+
+type InfoTooltipProps = TooltipProps & {
+    iconProps?: InfoIconProps
+}
+
+export const InfoTooltip = ({
+    iconProps={},
+    ...tooltipProps
+}: InfoTooltipProps) => {
+    return (
+        <Tooltip
+            className="info-tooltip"
+            trigger="click"
+            {...tooltipProps }
+        >
+            <InfoIcon { ...iconProps } />
+        </Tooltip>
+    )
+}