dynamic ID generation

Author: thedannywahl

src/assets/Features.tsx

@@ -20,7 +20,6 @@ import {
 interface RawFeatureInterface {
 	color?: string;
 	icon?: ComponentType<SVGIconProps>;
-	id: string;
 	label: string;
 	description?: JSX.Element;
 	colorIcon?: ComponentType<SVGIconProps>;
@@ -30,11 +29,11 @@ interface RawFeatureInterface {
 export interface FeatureInterface {
 	color: string;
 	icon: ComponentType<SVGIconProps>;
-	id: string;
 	label: string;
 	description: JSX.Element;
 	colorIcon: ComponentType<SVGIconProps>;
 	link?: string;
+	id: string;
 }
 
 type BrandKey =
@@ -94,7 +93,6 @@ const RawFeatures: RawFeaturesType = {
 				</>
 			),
 			icon: Canvas.icon,
-			id: "canvas_career",
 			label: "Canvas Career",
 			link: "https://instructure.com/canvas/canvas-career",
 		},
@@ -109,7 +107,6 @@ const RawFeatures: RawFeaturesType = {
 				</>
 			),
 			icon: Canvas.icon,
-			id: "canvas_apps",
 			label: "Canvas Apps",
 			link: "https://www.instructure.com/k12/products/learnplatform",
 		},
@@ -124,13 +121,11 @@ const RawFeatures: RawFeaturesType = {
 				</>
 			),
 			icon: Canvas.icon,
-			id: "canvas_modules",
 			label: "Canvas Modules Redesign",
 		},
 	],
 	IgniteAI: [
 		{
-			id: "ignite",
 			label: "Ignite Agent",
 			link: "http://instructure.com/ignite-ai",
 		},
@@ -143,7 +138,6 @@ const RawFeatures: RawFeaturesType = {
 					coverage.
 				</>
 			),
-			id: "rubric_generator",
 			label: "Canvas Rubric Generator",
 		},
 		{
@@ -155,7 +149,6 @@ const RawFeatures: RawFeaturesType = {
 					instructors and facilitating personalized assessments for students.
 				</>
 			),
-			id: "mastery_item_generator",
 			label: "Mastery Connect Item Generator",
 		},
 		{
@@ -166,7 +159,6 @@ const RawFeatures: RawFeaturesType = {
 					reports and automated remediation of issues in Canvas content.
 				</>
 			),
-			id: "accessibility_remediation",
 			label: "Content Accessibility Checker",
 		},
 		{
@@ -178,7 +170,6 @@ const RawFeatures: RawFeaturesType = {
 					engagement at a glance.
 				</>
 			),
-			id: "discussion_insights",
 			label: "Canvas Discussion Insights",
 		},
 		{
@@ -190,7 +181,6 @@ const RawFeatures: RawFeaturesType = {
 					videos for accessibility issues.
 				</>
 			),
-			id: "studio_captioning",
 			label: "Studio Caption Review",
 		},
 		{
@@ -208,7 +198,6 @@ const RawFeatures: RawFeaturesType = {
 					</List>
 				</>
 			),
-			id: "studio_translation",
 			label: "Studio Caption Translation",
 		},
 		{
@@ -220,7 +209,6 @@ const RawFeatures: RawFeaturesType = {
 					instructors and facilitating personalized assessments for students.
 				</>
 			),
-			id: "canvas_quiz_generator",
 			label: "Canvas Quizzes Item Generator",
 		},
 	],
@@ -238,7 +226,6 @@ const RawFeatures: RawFeaturesType = {
 				</>
 			),
 			icon: Instructure.icon,
-			id: "irn",
 			label: "Instructure Research Network",
 		},
 	],
@@ -258,57 +245,48 @@ const RawFeatures: RawFeaturesType = {
 				</>
 			),
 			icon: Studio.icon,
-			id: "media_archiving",
 			label: "Studio Archive & Restore",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "canvas_admin_experience",
 			label: "Canvas Admin Experience",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "improved_lmgb",
 			label: "Improved Learning Mastery Gradebook",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "canvas_portfolio",
 			label: "Canvas Portfolios",
 		},
 		{
-			id: "grading_assistance",
 			label: "Grading Assistance",
 		},
 		{
-			id: "translations",
 			label: "Translations",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "block_editor",
 			label: "Block Content Editor",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "peer_review",
 			label: "Updated Peer Review",
 		},
 		{
 			color: Canvas.color,
 			colorIcon: Canvas.colorIcon,
 			icon: Canvas.icon,
-			id: "concurrent_grading",
 			label: "Concurrent Grading",
 		},
 	],
@@ -318,12 +296,13 @@ const RawFeatures: RawFeaturesType = {
 const Features = Object.fromEntries(
 	Object.entries(RawFeatures).map(([name, features]) => [
 		name,
-		[...features].map((feature) => ({
+		features.map((feature) => ({
 			...feature,
 			color: feature.color ?? IgniteAI.color,
 			colorIcon: feature.colorIcon ?? IgniteAI.colorIcon,
 			description: feature.description ?? <React.Fragment />,
 			icon: feature.icon ?? IgniteAI.icon,
+			id: `${name}_${feature.label}`.toLowerCase().replace(/[^a-z0-9]/g, "_"),
 			stage: name,
 		})),
 	]),

src/assets/Roles.tsx

@@ -5,71 +5,51 @@ export interface Role {
 
 export type RolesType = Record<string, Role[]>;
 
-const Roles: RolesType = {
+type RolesRawType = {
+	[key: string]: string[];
+};
+
+const RolesRaw: RolesRawType = {
 	Business: [
-		{
-			id: "chief_technology_officer",
-			label: "Chief Product/Technology Officer",
-		},
-		{ id: "chief_learning_officer", label: "Chief Learning Officer" },
-		{ id: "chief_people_officer", label: "Chief People Officer" },
-		{ id: "chief_customer_officer", label: "Chief Customer Officer" },
-		{ id: "vp_training", label: "VP of Training" },
-		{ id: "vp_hr", label: "VP of Human Resources" },
-		{ id: "dir_talend_dev", label: "Director of Talent Development" },
-		{ id: "training_manager", label: "Training & Development Manager" },
-		{ id: "dir_lnd", label: "Director of Learning & Development" },
-		{ id: "dir_od", label: "Director of Organizational Development" },
-		{ id: "head_of_learning", label: "Head of Learning" },
-		{ id: "prod_mgr", label: "Product Manager" },
-		{ id: "instructional_designer_biz", label: "Instructional Designer" },
-		{ id: "dir_product", label: "Director of Product Management" },
-		{ id: "dir_cust_training", label: "Director of Customer Training" },
-		{ id: "other_biz", label: "Other" },
+		"Chief Product/Technology Officer",
+		"Chief Learning Officer",
+		"Chief People Officer",
+		"Chief Customer Officer",
+		"VP of Training",
+		"VP of Human Resources",
+		"Director of Talent Development",
+		"Training & Development Manager",
+		"Director of Learning & Development",
+		"Director of Organizational Development",
+		"Head of Learning",
+		"Product Manager",
+		"Instructional Designer",
+		"Director of Product Management",
+		"Director of Customer Training",
+		"Other",
 	],
 	Government: [],
-	"Higher Education": [
-		{
-			id: "instructor",
-			label: "Faculty / Instructor",
-		},
-		{
-			id: "instructional_designer",
-			label: "Instructional Designer",
-		},
-	],
+	"Higher Education": ["Faculty / Instructor", "Instructional Designer"],
 	"K-12 & Primary": [
-		{
-			id: "teacher",
-			label: "Teacher",
-		},
-		{
-			id: "tech_coach",
-			label: "Technology Coach",
-		},
-		{
-			id: "principal",
-			label: "Principal",
-		},
-		{
-			id: "superintendent",
-			label: "Superintendent",
-		},
-		{
-			id: "school_board",
-			label: "School Board Member",
-		},
-		{
-			id: "librarian",
-			label: "Librarian",
-		},
-	],
-	Other: [
-		{
-			id: "other",
-			label: "Other",
-		},
+		"Teacher",
+		"Technology Coach",
+		"Principal",
+		"Superintendent",
+		"School Board Member",
+		"Librarian",
 	],
+	Other: ["Other"],
 	"Technical & Vocational": [],
 };
+
+const Roles: RolesType = Object.fromEntries(
+	Object.entries(RolesRaw).map(([category, roles]) => [
+		category,
+		roles.map((role) => ({
+			id: `${category}_${role}`.toLowerCase().replace(/[^a-z0-9]/g, "_"),
+			label: role,
+		})),
+	]),
+);
+
 export default Roles;