From 8b3188a031e62eec9da720f1f4dd475d3413e5b7 Mon Sep 17 00:00:00 2001 From: Chad Elliott Date: Wed, 8 Jan 2025 10:07:32 -0600 Subject: [PATCH] Removed unused components. --- .../discrete_slider/DiscreteSlider.jsx | 153 ------------------ .../DiscreteSlider.stories.jsx | 27 ---- .../discrete_slider/DiscreteSlider.test.tsx | 37 ----- .../DiscreteSlider.test.tsx.snap | 19 --- web-ui/src/components/skills/SkillSlider.css | 21 --- web-ui/src/components/skills/SkillSlider.jsx | 105 ------------ 6 files changed, 362 deletions(-) delete mode 100644 web-ui/src/components/discrete_slider/DiscreteSlider.jsx delete mode 100644 web-ui/src/components/discrete_slider/DiscreteSlider.stories.jsx delete mode 100644 web-ui/src/components/discrete_slider/DiscreteSlider.test.tsx delete mode 100644 web-ui/src/components/discrete_slider/__snapshots__/DiscreteSlider.test.tsx.snap delete mode 100644 web-ui/src/components/skills/SkillSlider.css delete mode 100644 web-ui/src/components/skills/SkillSlider.jsx diff --git a/web-ui/src/components/discrete_slider/DiscreteSlider.jsx b/web-ui/src/components/discrete_slider/DiscreteSlider.jsx deleted file mode 100644 index e907980211..0000000000 --- a/web-ui/src/components/discrete_slider/DiscreteSlider.jsx +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react'; -import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import Tooltip from '@mui/material/Tooltip'; - -const Root = styled('div')(({ theme }) => ({ - '& .MuiSlider-markLabel': { - [theme.breakpoints.down('md')]: { - fontSize: '0.525rem' - }, - [theme.breakpoints.between('sm', 'lg')]: { - fontSize: '0.525rem' - }, - [theme.breakpoints.between('md', 'xl')]: { - fontSize: '0.775rem' - }, - [theme.breakpoints.up('lg')]: { - fontSize: '0.875rem' - } - } -})); - -const DiscreteSlider = ({ - title, - onChange, - onChangeCommitted, - inMarks, - inStartPos -}) => { - const defaultMarks = [ - { - value: 1, - label: 'Interested', - tooltip: - 'You have an interest in this skill and, perhaps, common knowledge or an understanding of its basic techniques and concepts.', - tooltipChildren: ['Focus on learning.'] - }, - { - value: 2, - label: 'Novice', - tooltip: - 'You have the level of experience gained in a classroom, experimental scenarios, or via other training. You are expected to need help when performing this skill.', - tooltipChildren: [ - 'Focus on developing through experience.', - 'You understand and can discuss terminology, concepts, principles and issues related to this skill.', - 'You rely heavily on reference and resource materials to be effective with this skill.' - ] - }, - { - value: 3, - label: 'Intermediate', - tooltip: - 'You are able to successfully complete tasks in this competency as requested. Help from an expert may be required from time to time, but you can usually perform the skill independently.', - tooltipChildren: [ - 'Focus on applying and enhancing knowledge or skill.', - 'You have applied this competency to situations, while occasionally needing minimal guidance to perform successfully.', - 'You understand and can discuss the application and implications of changes to processes and procedures in this area.' - ] - }, - { - value: 4, - label: 'Advanced', - tooltip: - 'You can perform the actions associated with this skill without assistance. You are certainly recognized within your immediate organization as "a person to ask" when difficult questions arise regarding this skill.', - tooltipChildren: [ - 'Focus on broad organizational/professional issues.', - 'You have consistently provided relevant ideas and perspectives on process or practice improvements as relate to this skill.', - 'You are capable of coaching others in the application of this skill.', - 'You participate in senior level discussions regarding this skill.', - 'You assist in the development of reference and resource materials related to this skill.' - ] - }, - { - value: 5, - label: 'Expert', - tooltip: - 'You are known as an expert in this area. You can provide guidance, troubleshoot and answer questions related to this skill.', - tooltipChildren: [ - 'Focus on the strategic.', - 'You have demonstrated consistent excellence in applying this competency across multiple projects or organizations.', - 'You are considered the “go to” person for this skill within OCI or externally.', - 'You create new applications for or lead the development of reference and resource materials for this skill.', - 'You are able to explain relevant topics, issues, process elements, and trends in sufficient detail during discussions and presentations as to foster a greater understanding among internal and external colleagues.' - ] - } - ]; - - const marks = inMarks ? inMarks : defaultMarks; - - const formatTooltipTitle = (title, children) => { - return ( -
-
{title}
- -
- ); - }; - - const ValueLabelComponent = props => { - let thisMark = marks.find(mark => mark.value === props.value); - if (!thisMark) { - return ''; - } - return ( - - {props.children} - - ); - }; - - const startPos = inStartPos - ? Number(inStartPos) - : Math.ceil(marks.length / 2); - - return ( -
- - {title} - - - `${value}`} - step={null} - marks={marks} - onChange={onChange} - onChangeCommitted={onChangeCommitted} - /> - -
- ); -}; - -export default DiscreteSlider; diff --git a/web-ui/src/components/discrete_slider/DiscreteSlider.stories.jsx b/web-ui/src/components/discrete_slider/DiscreteSlider.stories.jsx deleted file mode 100644 index 355c5ade79..0000000000 --- a/web-ui/src/components/discrete_slider/DiscreteSlider.stories.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import DiscreteSlider from './DiscreteSlider'; - -export default { - title: 'Check Ins/DiscreteSlider', - component: DiscreteSlider -}; -const Template = args => ; - -export const DefaultSlider = Template.bind({}); -DefaultSlider.args = { - title: 'Some skill', - lastUsed: undefined -}; - -export const SliderWithChangeHandler = Template.bind({}); -SliderWithChangeHandler.args = { - onChangeCommitted: (event, value) => { - window.alert(value); - } -}; - -export const SliderWithLastUsed = Template.bind({}); -SliderWithLastUsed.args = { - title: 'Other Skill', - lastUsed: 'Currently Used' -}; diff --git a/web-ui/src/components/discrete_slider/DiscreteSlider.test.tsx b/web-ui/src/components/discrete_slider/DiscreteSlider.test.tsx deleted file mode 100644 index cec6492351..0000000000 --- a/web-ui/src/components/discrete_slider/DiscreteSlider.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -// @ts-ignore -import DiscreteSlider from './DiscreteSlider'; - -vi.mock('@mui/material/Slider', () => { - return { - default: () => (props: any) => { - const { onChange, 'data-testid': testId, ...rest } = props; - - return ( - { - onChange(null, parseInt(event.target.value, 10)); - }} - {...rest} - /> - ); - } - }; -}); - -describe('DiscreteSlider', () => { - it('renders slider with title', () => { - // @ts-ignore - snapshot(, { - createNodeMock: (element: any) => { - if (element.type === 'div') { - return { - addEventListener: vi.fn() - }; - } - } - }); - }); -}); diff --git a/web-ui/src/components/discrete_slider/__snapshots__/DiscreteSlider.test.tsx.snap b/web-ui/src/components/discrete_slider/__snapshots__/DiscreteSlider.test.tsx.snap deleted file mode 100644 index 34e4af06e8..0000000000 --- a/web-ui/src/components/discrete_slider/__snapshots__/DiscreteSlider.test.tsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`DiscreteSlider > renders slider with title 1`] = ` -
-
-

- Some skill -

-
-
-
-`; diff --git a/web-ui/src/components/skills/SkillSlider.css b/web-ui/src/components/skills/SkillSlider.css deleted file mode 100644 index 7e1df842b3..0000000000 --- a/web-ui/src/components/skills/SkillSlider.css +++ /dev/null @@ -1,21 +0,0 @@ -.date-box-hidden { - display: none; -} - -.skill-slider-container { - width: 100%; - display: flex; - flex-direction: row; - align-items: flex-start; -} - -.discrete-slider { - margin-right: 10px; - width: 40rem; -} - -@media screen and (max-width: 900px) { - .discrete-slider { - width: 90%; - } -} diff --git a/web-ui/src/components/skills/SkillSlider.jsx b/web-ui/src/components/skills/SkillSlider.jsx deleted file mode 100644 index 9cee1fa6d7..0000000000 --- a/web-ui/src/components/skills/SkillSlider.jsx +++ /dev/null @@ -1,105 +0,0 @@ -import { debounce } from 'lodash/function'; -import React, { useState } from 'react'; -import DeleteIcon from '@mui/icons-material/Delete'; -import { - Checkbox, - FormControl, - FormControlLabel, - IconButton, - TextField, - Typography -} from '@mui/material'; -import { styled } from '@mui/material/styles'; -import DiscreteSlider from '../discrete_slider/DiscreteSlider'; - -import './SkillSlider.css'; - -const PREFIX = 'SkillSlider'; -const classes = { - hidden: `${PREFIX}-hidden` -}; - -const Root = styled('span')(() => ({ - [`& .${classes.hidden}`]: { - display: 'none' - }, - '@media screen and (max-width: 900px)': { - width: '100%' - } -})); - -const SkillSlider = ({ - id, - name, - startLevel, - lastUsedDate, - onDelete, - onUpdate -}) => { - let [currCheck, setCurrCheck] = useState(!lastUsedDate); - let [lastUsed, setLastUsed] = useState(lastUsedDate); - let [skillLevel, setSkillLevel] = useState(startLevel); - - const datePickerVisibility = () => { - setCurrCheck(!currCheck); - }; - - const updateLevel = (e, value) => setSkillLevel(value); - - const updateSkillLevel = debounce((event, value) => { - onUpdate(lastUsed, value, id); - }, 1500); - - const updateLastUsed = debounce(value => { - setLastUsed(value); - onUpdate(value, skillLevel, id); - }, 1500); - - const formatDate = date => { - if (!date) return; - let dateString = date[0] + '-'; - dateString = dateString + (date[1] < 10 ? '0' + date[1] : date[1]) + '-'; - dateString = dateString + (date[2] < 10 ? '0' + date[2] : date[2]); - return dateString; - }; - - return ( - <> - - - {name} - -
- - onDelete(id)} size="large"> - - -
- {false && ( - - } - label="Currently Used" - labelPlacement="top" - checked={currCheck} - onChange={datePickerVisibility} - /> - - )} - {false && ( - updateLastUsed(value)} - defaultValue={formatDate(lastUsed)} - /> - )} - - - ); -}; -export default SkillSlider;